Added library item buying links

src/components/Button.tsx

@@ -8,6 +8,7 @@ interface Props {
   children: React.ReactNode;
   active?: boolean;
   locale?: string;
+  target?: "_blank";
   onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
@@ -30,6 +31,14 @@ export default function Button(props: Props): JSX.Element {
     </div>
   );
 
+  if (props.target) {
+    return (
+      <a href={props.href} target={props.target} rel="noreferrer">
+        <div>{button}</div>
+      </a>
+    );
+  }
+
   return (
     <div
       onClick={() => {

src/components/Img.tsx

@@ -66,6 +66,7 @@ export function getAssetURL(url: string, quality: ImageQuality): string {
   let newUrl = url;
   newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
   newUrl = newUrl.replace(/.jpg$/u, ".webp");
+  newUrl = newUrl.replace(/.jpeg$/u, ".webp");
   newUrl = newUrl.replace(/.png$/u, ".webp");
   if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
   return process.env.NEXT_PUBLIC_URL_IMG + newUrl;

src/graphql/operations/getLibraryItem.graphql

@@ -39,6 +39,9 @@ query getLibraryItem($slug: String, $language_code: String) {
             }
           }
         }
+        urls {
+          url
+        }
         size {
           width
           height

src/pages/library/[slug]/index.tsx

@@ -37,6 +37,7 @@ import {
   prettyPrice,
   prettyTestError,
   prettyTestWarning,
+  prettyURL,
   sortContent,
 } from "queries/helpers";
 import { useState } from "react";
@@ -191,6 +192,37 @@ export default function LibrarySlug(props: Props): JSX.Element {
             {item?.descriptions?.[0] && (
               <p className="text-justify">{item.descriptions[0].description}</p>
             )}
+            {!(
+              item?.metadata &&
+              item.metadata[0]?.__typename === "ComponentMetadataGroup" &&
+              (item.metadata[0].subtype?.data?.attributes?.slug ===
+                "variant-set" ||
+                item.metadata[0].subtype?.data?.attributes?.slug ===
+                  "relation-set")
+            ) && (
+              <>
+                {item?.urls && item?.urls?.length ? (
+                  <div className="flex flex-row place-items-center gap-3">
+                    <p>Available at</p>
+                    {item?.urls?.map((url) => (
+                      <>
+                        {url?.url && (
+                          <Button
+                            href={url.url}
+                            key={url.url}
+                            target={"_blank"}
+                          >
+                            {prettyURL(url.url)}
+                          </Button>
+                        )}
+                      </>
+                    ))}
+                  </div>
+                ) : (
+                  <p>This item is not for sale or is no longer available</p>
+                )}
+              </>
+            )}
           </div>
         </InsetBox>
 
@@ -433,7 +465,7 @@ export async function getStaticProps(
     slug: context.params?.slug ? context.params.slug.toString() : "",
     language_code: context.locale ?? "en",
   });
-  if (!item.libraryItems) return { notFound: true };
+  if (!item.libraryItems?.data[0]?.attributes) return { notFound: true };
   const props: Props = {
     ...(await getAppStaticProps(context)),
     item: item.libraryItems.data[0].attributes,

src/queries/helpers.ts

@@ -322,6 +322,11 @@ function prettyTestWritter(
   }
 }
 
+export function prettyURL(url: string): string {
+  let domain = new URL(url);
+  return domain.hostname.replace("www.", "");
+}
+
 export function capitalizeString(string: string): string {
   function capitalizeWord(word: string): string {
     return word.charAt(0).toUpperCase() + word.substring(1);