Merge pull request #19 from tinloof/tin-2243-resolve-product-testimon…

…ials-references

Resolve product testimonials references

backend/yarn.lock

@@ -2056,7 +2056,7 @@
   dependencies:
     ioredis "^5.4.1"
 
-"@medusajs/cart@1.0.0-rc-20241001083650":
+"@medusajs/@1.0.0-rc-20241001083650":
   version "1.0.0-rc-20241001083650"
   resolved "https://registry.yarnpkg.com/@medusajs/cart/-/cart-1.0.0-rc-20241001083650.tgz#9dc5021a86d4e25ef416938806ebbe5e7c2a3c30"
   integrity sha512-ESWLtOt4bavk10MqIGPpRbk+a4nhTDLiDKQlLT8d5QA7p1PwKJftS2/ye2y7pcD39fyCvN+lcvC3XVL3Tm55AA==

storefront/app/(website)/products/[handle]/_parts/product-information.tsx

@@ -1,4 +1,4 @@
-import type {Product} from "@/types/sanity.generated";
+import type {PRODUCT_QUERYResult} from "@/types/sanity.generated";
 import type {StoreProduct} from "@medusajs/types";
 
 import Body from "@/components/shared/typography/body";
@@ -12,7 +12,7 @@ import OptionsSelect from "./options";
 import Price from "./price";
 import ProductSpecs from "./specs";
 
-type Props = {region_id: string} & {sanity_product: Product} & Pick<
+type Props = {content: PRODUCT_QUERYResult} & {region_id: string} & Pick<
     StoreProduct,
     | "collection"
     | "description"
@@ -25,11 +25,11 @@ type Props = {region_id: string} & {sanity_product: Product} & Pick<
 
 export default function ProductInformation({
   collection,
+  content,
   description,
   id,
   options,
   region_id,
-  sanity_product,
   title,
   variants,
 }: Props) {
@@ -59,11 +59,11 @@ export default function ProductInformation({
           <AddToCart />
         </div>
         <Addons
-          products={sanity_product?.addons?.products}
+          products={content?.addons?.products}
           region_id={region_id}
-          title={sanity_product?.addons?.title}
+          title={content?.addons?.title}
         />
-        <ProductSpecs specs={sanity_product?.specs} />
+        <ProductSpecs specs={content?.specs} />
       </div>
     </ProductVariantsProvider>
   );

storefront/app/(website)/products/[handle]/page.tsx

@@ -1,9 +1,9 @@
-import type {SectionProps} from "@/components/sections/types";
 import type {PageProps} from "@/types";
 
 import SectionsRenderer from "@/components/sections/section-renderer";
 import {getProductByHandle} from "@/data/medusa/products";
 import {getRegion} from "@/data/medusa/regions";
+import {loadProductContent} from "@/data/sanity";
 import {notFound} from "next/navigation";
 
 import {ProductImagesCarousel} from "./_parts/image-carousel";
@@ -24,6 +24,8 @@ export default async function ProductPage({params}: ProductPageProps) {
 
   const product = await getProductByHandle(params.handle, region.id);
 
+  const content = await loadProductContent(params.handle);
+
   if (!product) {
     console.log("No product found");
     return notFound();
@@ -32,13 +34,15 @@ export default async function ProductPage({params}: ProductPageProps) {
     <>
       <section className="mx-auto flex max-w-max-screen flex-col items-start justify-start gap-s lg:flex-row lg:gap-xs lg:px-xl lg:py-m">
         <ProductImagesCarousel product={product} />
-        <ProductInformation region_id={region.id} {...product} />
+        <ProductInformation
+          content={content}
+          region_id={region.id}
+          {...product}
+        />
       </section>
-
-      <SectionsRenderer
-        fieldName="body"
-        sections={product.sanity_product?.sections as SectionProps[]}
-      />
+      {content?.sections && (
+        <SectionsRenderer fieldName="body" sections={content.sections} />
+      )}
     </>
   );
 }

storefront/components/shared/addons-item.tsx

@@ -1,7 +1,7 @@
-import type {StoreProduct} from "@medusajs/types";
+import type { StoreProduct } from "@medusajs/types";
 
-import {AddToCartButton} from "@/app/(website)/products/[handle]/_parts/add-to-cart";
-import {getProductPrice} from "@/utils/medusa/get-product-price";
+import { AddToCartButton } from "@/app/(website)/products/[handle]/_parts/add-to-cart";
+import { getProductPrice } from "@/utils/medusa/get-product-price";
 import Image from "next/image";
 
 import Body from "./typography/body";
@@ -24,6 +24,8 @@ export function AddonsItem({
     },
   });
 
+  const default_variant = variants?.[0]
+
   return (
     <div className="flex w-full gap-xs">
       {images?.[0].url && (
@@ -46,16 +48,15 @@ export function AddonsItem({
             {title}
           </Body>
           <Body desktopSize="base" font="sans" mobileSize="sm">
-            {cheapestPrice?.calculated_price}
+            {default_variant?.title} / {cheapestPrice?.calculated_price}
           </Body>
         </div>
         <AddToCartButton
           className="self-end"
           label="Add +"
           size={variant === "PDP" ? "md" : variant === "cart" ? "sm" : null}
           variant="outline"
-          // TODO: Better variant selection
-          variantId={variants?.[0].id}
+          variantId={default_variant?.id}
         />
       </div>
     </div>

storefront/data/medusa/collections.ts

@@ -1,19 +1,16 @@
-import type {Collection} from "@/types/sanity.generated";
-import type {StoreCollection} from "@medusajs/types";
 
 import medusa from "./client";
 
 export async function getCollectionByHandle(handle: string) {
   return medusa.store.collection
     .list(
       {
-        fields: "+sanity_collection.*",
         handle,
       },
       {next: {tags: ["collections"]}},
     )
     .then(
       ({collections}) =>
-        collections[0] as {sanity_collection: Collection} & StoreCollection,
+        collections[0]
     );
 }

storefront/data/medusa/cookies.ts

@@ -1,7 +1,9 @@
 import {cookies} from "next/headers";
 import "server-only";
 
-export const getAuthHeaders = (): {authorization: string} | {} => {
+export const getAuthHeaders = ():
+  | {authorization: string}
+  | NonNullable<unknown> => {
   const token = cookies().get("_medusa_jwt")?.value;
 
   if (token) {
@@ -21,7 +23,9 @@ export const getCacheTag = (tag: string): string => {
   return "";
 };
 
-export const getCacheHeaders = (tag: string): {next: {tags: string[]}} | {} => {
+export const getCacheHeaders = (
+  tag: string,
+): {next: {tags: string[]}} | NonNullable<unknown> => {
   const cacheTag = getCacheTag(tag);
 
   if (cacheTag) {

storefront/data/medusa/products.ts

@@ -1,25 +1,16 @@
-import type {Product} from "@/types/sanity.generated";
-import type {StoreProduct} from "@medusajs/types";
-
 import medusa from "./client";
 
 export async function getProductByHandle(handle: string, region_id: string) {
   return medusa.store.product
     .list(
       {
-        fields:
-          "*variants.calculated_price,+variants.inventory_quantity,+sanity_product.*",
+        fields: "*variants.calculated_price,+variants.inventory_quantity",
         handle,
         region_id,
       },
       {next: {tags: ["products"]}},
     )
-    .then(
-      ({products}) =>
-        products[0] as {
-          sanity_product: Product;
-        } & StoreProduct,
-    );
+    .then(({products}) => products[0]);
 }
 
 export async function getProductsByIds(ids: string[], region_id: string) {

storefront/data/sanity/index.ts

@@ -5,6 +5,7 @@ import type {
   HOME_QUERYResult,
   MODULAR_PAGE_QUERYResult,
   NOT_FOUND_PAGE_QUERYResult,
+  PRODUCT_QUERYResult,
   REDIRECT_QUERYResult,
   TEXT_PAGE_QUERYResult,
 } from "@/types/sanity.generated";
@@ -17,6 +18,7 @@ import {
   HOME_QUERY,
   MODULAR_PAGE_QUERY,
   NOT_FOUND_PAGE_QUERY,
+  PRODUCT_QUERY,
   REDIRECT_QUERY,
   TEXT_PAGE_QUERY,
 } from "./queries";
@@ -100,3 +102,10 @@ export function loadFaqs() {
     query: FAQS_PAGE_QUERY,
   });
 }
+
+export function loadProductContent(handle: string) {
+  return loadQuery<PRODUCT_QUERYResult>({
+    params: {handle},
+    query: PRODUCT_QUERY,
+  });
+}

storefront/data/sanity/queries/index.ts

@@ -51,3 +51,8 @@ export const FAQS_PAGE_QUERY = groq`*[_type == "faq.index"][0]{
       }
     }
 }`;
+
+export const PRODUCT_QUERY = groq`*[_type == "product" && pathname.current == ("/products/" + $handle)][0]{
+  ...,
+  sections[] ${SECTIONS_BODY_FRAGMENT},
+}`;