fix: Issues with Product types

Author: olivermrbl

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@headlessui/react": "^1.6.1",
     "@hookform/error-message": "^2.0.0",
-    "@medusajs/medusa-js": "^1.3.7",
+    "@medusajs/medusa-js": "^5.0.0",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",
     "@paypal/react-paypal-js": "^7.8.1",
@@ -31,7 +31,7 @@
     "@tanstack/react-query": "^4.22.4",
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
-    "medusa-react": "^4.0.4",
+    "medusa-react": "^8.0.0",
     "next": "^12.2.0",
     "react": "17.0.2",
     "react-country-flag": "^3.0.2",
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@medusajs/client-types": "^0.2.2",
     "@medusajs/medusa": "^1.7.5",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",

src/lib/context/checkout-context.tsx

@@ -43,7 +43,7 @@ export type CheckoutFormValues = {
 
 interface CheckoutContext {
   cart?: Omit<Cart, "refundable_amount" | "refunded_total">
-  shippingMethods: { label: string; value: string; price: string }[]
+  shippingMethods: { label?: string; value?: string; price: string }[]
   isLoading: boolean
   readyToComplete: boolean
   sameAsBilling: StateType
@@ -242,7 +242,7 @@ export const CheckoutProvider = ({ children }: CheckoutProviderProps) => {
   const prepareFinalSteps = () => {
     initPayment()
 
-    if (shippingMethods) {
+    if (shippingMethods?.length && shippingMethods?.[0]?.value) {
       setShippingOption(shippingMethods[0].value)
     }
   }

src/lib/context/product-context.tsx

@@ -11,6 +11,7 @@ import React, {
 } from "react"
 import { Product, Variant } from "types/medusa"
 import { useStore } from "./store-context"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 
 interface ProductContext {
   formattedPrice: string
@@ -30,7 +31,7 @@ const ProductActionContext = createContext<ProductContext | null>(null)
 
 interface ProductProviderProps {
   children?: React.ReactNode
-  product: Product
+  product: PricedProduct
 }
 
 export const ProductProvider = ({
@@ -44,12 +45,12 @@ export const ProductProvider = ({
 
   const { addItem } = useStore()
   const { cart } = useCart()
-  const { variants } = product
+  const variants = product.variants as unknown as Variant[]
 
   useEffect(() => {
     // initialize the option state
     const optionObj: Record<string, string> = {}
-    for (const option of product.options) {
+    for (const option of (product.options || [])) {
       Object.assign(optionObj, { [option.id]: undefined })
     }
     setOptions(optionObj)

src/lib/data/index.ts

@@ -1,9 +1,10 @@
 import { medusaClient } from "@lib/config"
-import { Product, StoreGetProductsParams } from "@medusajs/medusa"
+import { StoreGetProductsParams } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 
 const COL_LIMIT = 15
 
-const getFeaturedProducts = async (): Promise<Product[]> => {
+const getFeaturedProducts = async (): Promise<PricedProduct[]> => {
   const payload = {} as Record<string, unknown>
 
   if (process.env.FEATURED_PRODUCTS) {

src/lib/hooks/use-layout-data.tsx

@@ -1,6 +1,7 @@
 import { medusaClient } from "@lib/config"
 import { getPercentageDiff } from "@lib/util/get-precentage-diff"
 import { Product, ProductCollection, Region } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 import { useQuery } from "@tanstack/react-query"
 import { formatAmount, useCart } from "medusa-react"
 import { ProductPreviewType } from "types/global"
@@ -57,12 +58,12 @@ const fetchFeaturedProducts = async (
       cart_id: cartId,
     })
     .then(({ products }) => products)
-    .catch((_) => [] as Product[])
+    .catch((_) => [] as PricedProduct[])
 
   return products
     .filter((p) => !!p.variants)
     .map((p) => {
-      const variants = p.variants as CalculatedVariant[]
+      const variants = p.variants as unknown as CalculatedVariant[]
 
       const cheapestVariant = variants.reduce((acc, curr) => {
         if (acc.calculated_price > curr.calculated_price) {
@@ -72,10 +73,10 @@ const fetchFeaturedProducts = async (
       }, variants[0])
 
       return {
-        id: p.id,
-        title: p.title,
-        handle: p.handle,
-        thumbnail: p.thumbnail,
+        id: p.id!,
+        title: p.title!,
+        handle: p.handle!,
+        thumbnail: p.thumbnail!,
         price: cheapestVariant
           ? {
               calculated_price: formatAmount({

src/lib/hooks/use-previews.tsx

@@ -1,5 +1,6 @@
 import transformProductPreview from "@lib/util/transform-product-preview"
 import { Product, Region } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 import { useMemo } from "react"
 import { InfiniteProductPage, ProductPreviewType } from "types/global"
 
@@ -17,7 +18,7 @@ const usePreviews = <T extends InfiniteProductPage>({
       return []
     }
 
-    const products: Product[] = []
+    const products: PricedProduct[] = []
 
     for (const page of pages) {
       products.push(...page.response.products)

src/lib/hooks/use-product-price.tsx

@@ -38,7 +38,7 @@ const useProductPrice = ({ id, variantId }: useProductPriceProps) => {
       return null
     }
 
-    const variants = product.variants as CalculatedVariant[]
+    const variants = product.variants as unknown as CalculatedVariant[]
 
     const cheapestVariant = variants.reduce((prev, curr) => {
       return prev.calculated_price < curr.calculated_price ? prev : curr
@@ -70,7 +70,7 @@ const useProductPrice = ({ id, variantId }: useProductPriceProps) => {
 
     const variant = product.variants.find(
       (v) => v.id === variantId || v.sku === variantId
-    ) as CalculatedVariant
+    ) as unknown as CalculatedVariant
 
     if (!variant) {
       return null

src/lib/util/transform-product-preview.ts

@@ -1,14 +1,15 @@
 import { getPercentageDiff } from "@lib/util/get-precentage-diff"
-import { Product, Region } from "@medusajs/medusa"
+import { Region } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 import { formatAmount } from "medusa-react"
 import { ProductPreviewType } from "types/global"
 import { CalculatedVariant } from "types/medusa"
 
 const transformProductPreview = (
-  product: Product,
+  product: PricedProduct,
   region: Region
 ): ProductPreviewType => {
-  const variants = product.variants as CalculatedVariant[]
+  const variants = product.variants as unknown as CalculatedVariant[]
 
   let cheapestVariant = undefined
 
@@ -22,10 +23,10 @@ const transformProductPreview = (
   }
 
   return {
-    id: product.id,
-    title: product.title,
-    handle: product.handle,
-    thumbnail: product.thumbnail,
+    id: product.id!,
+    title: product.title!,
+    handle: product.handle!,
+    thumbnail: product.thumbnail!,
     price: cheapestVariant
       ? {
           calculated_price: formatAmount({

src/modules/checkout/components/shipping/index.tsx

@@ -11,8 +11,8 @@ import { Controller, useForm } from "react-hook-form"
 import StepContainer from "../step-container"
 
 type ShippingOption = {
-  value: string
-  label: string
+  value?: string
+  label?: string
   price: string
 }
 

src/modules/products/components/mobile-actions/index.tsx

@@ -9,17 +9,18 @@ import clsx from "clsx"
 import React, { Fragment, useMemo } from "react"
 import { Product } from "types/medusa"
 import OptionSelect from "../option-select"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 
 type MobileActionsProps = {
-  product: Product
+  product: PricedProduct
   show: boolean
 }
 
 const MobileActions: React.FC<MobileActionsProps> = ({ product, show }) => {
   const { variant, addToCart, options, inStock, updateOptions } = useProductActions()
   const { state, open, close } = useToggleState()
 
-  const price = useProductPrice({ id: product.id, variantId: variant?.id })
+  const price = useProductPrice({ id: product.id!, variantId: variant?.id })
 
   const selectedPrice = useMemo(() => {
     const { variantPrice, cheapestPrice } = price
@@ -122,7 +123,7 @@ const MobileActions: React.FC<MobileActionsProps> = ({ product, show }) => {
                   <div className="bg-white px-6 py-12">
                     {product.variants.length > 1 && (
                       <div className="flex flex-col gap-y-6">
-                        {product.options.map((option) => {
+                        {(product.options || []).map((option) => {
                           return (
                             <div key={option.id}>
                               <OptionSelect