@app-brew/brewery 1.0.0

package/src/state/src/lib/products.ts

@@ -0,0 +1,1072 @@
+import { StoreSlice } from './types'
+import { ConfigSlice } from './config'
+import {
+  AppConfig,
+  AsyncData,
+  BaseProduct,
+  EnhancedProduct,
+  ErrorData,
+  ICatalogProvider,
+  IdleData,
+  LineItemChild,
+  ProductHandle,
+  ProductId,
+  ProductSellingPlanId,
+  ProductVariantId,
+  RecentlyViewedItem,
+  RecentlyViewedJson,
+  SiblingArray,
+} from '@gauntlet/types'
+import { ModuleSlice } from './modules'
+import base64 from 'react-native-base64'
+import { LocalStorage } from '@gauntlet/local-storage'
+import { MAX, RECENTLY_VIEWED } from './constants'
+import { CollectionSlice } from './collections'
+import { RouteSlice } from './route'
+import { CartSlice } from './cart'
+import { LocalizationSlice } from './localization'
+import { getEnhancedProduct, getInitialSelectedVariantOptions } from './utils'
+import { useAppStore } from './store'
+import { MetafieldSlice } from './metafield'
+
+export type ProductKeys<T> = keyof T
+export type ProductItem = AsyncData<BaseProduct>
+export interface TrendingItems {
+  data: Array<BaseProduct>
+  status: 'loading' | 'idle' | 'error'
+}
+
+export interface ProductsState {
+  description: Record<
+    string,
+    { status: 'idle' | 'loading'; productDescription?: any }
+  >
+  items: Record<string, AsyncData<EnhancedProduct>>
+  recommendedProducts: Record<
+    string,
+    { data: string[]; status: 'loading' | 'idle' | 'error' }
+  >
+  trendingItems: TrendingItems
+  variantIdToQuantityAvailable: Record<string, number>
+}
+export interface ProductsActions {
+  getByHandle: (productHandle: string) => Promise<AsyncData<EnhancedProduct>>
+  getByHandles: (
+    productHandles: string[]
+  ) => Promise<AsyncData<EnhancedProduct>[]>
+  getById: (productId: ProductId) => Promise<any>
+  getProductByVariantIds: (variantIds: [ProductVariantId]) => Promise<any>
+  updateDisplayVariantId: (
+    variantId: ProductVariantId | null,
+    productHandle: ProductHandle
+  ) => void
+  updateProductList: (products: Record<string, AsyncData<BaseProduct>>) => void
+  updateSelectedVariant: (
+    variantId: ProductVariantId | null,
+    productHandle: ProductHandle
+  ) => void
+  updateSelectedVariantWithSubscription: (
+    variantId: string,
+    productHandle: string,
+    sellingPlanId: string
+  ) => void
+  getItemWishListStatus: (productId: string) => void
+  updateSelectDefaultVariant: (value: boolean, productHandle: string) => void
+  getRecommendations: (
+    id: string,
+    handle: string,
+    mode: 'RELATED' | 'COMPLEMENTARY'
+  ) => Promise<Array<string> | void>
+  updateRecentlyViewed: (handle: string) => void
+  getRecentlyViewedProducts: () => RecentlyViewedItem[]
+  updateSelectedVariantQuantity: (quantity: number, handle: string) => void
+  setTrendingItems: (items: TrendingItems) => void
+  getProductDescription: (handle: string) => Promise<void>
+  updateSellingPlanId: (
+    handle: ProductHandle,
+    id: ProductSellingPlanId | undefined
+  ) => void
+  updateDefaultSellingPlanId: (
+    handle: ProductHandle,
+    id: ProductSellingPlanId | undefined
+  ) => void
+  updateLineItemChildren: (
+    handle: ProductHandle,
+    lineItemChild: Record<ProductHandle, LineItemChild>
+  ) => void
+  updateLineItemSiblings: (
+    handle: ProductHandle,
+    lineItemChild: Record<ProductHandle, LineItemChild>
+  ) => void
+  updateLineItemSiblingArray: (
+    handle: ProductHandle,
+    lineItemSiblingArray: SiblingArray
+  ) => void
+  updateLineItemCustomAttibutes: (
+    handle: ProductHandle,
+    customAttributes: Record<string, string>
+  ) => void
+  fetchByIds: (
+    productIds: Array<ProductId>
+  ) => Promise<Record<string, IdleData<EnhancedProduct> | null> | null>
+
+  updateSelectedOptions: (
+    handle: string,
+    options: Record<string, string>
+  ) => void
+  updateLineItemMissingVariantId: ({
+    handle,
+    missingVariantId,
+  }: {
+    handle: ProductHandle
+    missingVariantId: boolean | null
+  }) => void
+  resetSelectedOptions: (handle: string) => void
+  resetLineItem: (handle: string) => void
+  refreshByHandleUsingShopify: (productHandle: string) => Promise<any>
+  refreshByHandlesUsingShopify: (productHandles: string[]) => Promise<void>
+  /**
+   *
+   * @todo this is a temporary solution to maintain the quantity available for a variant. We need to fetch the quantity available when cart lineItems are fetched/updated. When the cart queries are changed to string based queries, we can fetch the quantity available for each variant in the cart query itself and remove this method.
+   * @param variantId
+   * @param quantityAvailable
+   *
+   */
+  updateVariantIdToQuantityAvailable: (
+    variantId: string,
+    quantityAvailable: number
+  ) => void
+  resetSlice: () => void
+  resetMultipleLineItems: (productHandles: ProductHandle[]) => void
+
+  updateDefaultVariantId: (
+    productHandle: ProductHandle,
+    defaultVariantId: ProductVariantId
+  ) => void
+}
+export interface ProductSlice {
+  products: ProductsState & ProductsActions
+}
+const localStorage = LocalStorage.getInstance()
+export const createProductsSlice: StoreSlice<
+  ProductSlice,
+  ProductSlice &
+    ConfigSlice &
+    ModuleSlice &
+    CollectionSlice &
+    RouteSlice &
+    CartSlice &
+    LocalizationSlice &
+    MetafieldSlice
+> = (set, get) => ({
+  products: {
+    items: {},
+    description: {},
+    recommendedProducts: {},
+    trendingItems: { data: [], status: 'idle' },
+
+    getById: async (productId) => {
+      const productSlice = get().products.items[productId] ?? {}
+      if (!productSlice.data) {
+        if (productSlice.status === 'loading') {
+          return productSlice
+        }
+
+        const initialState: ProductItem = {
+          status: 'loading',
+        }
+        set((store) => {
+          store.products.items = {
+            ...store.products.items,
+            [productId]: initialState,
+          }
+        })
+        const module = get().modules.value?.catalog
+        if (!module) throw new Error('Catalog is not defined')
+        const provider = module(get().config.data as AppConfig)
+        const product = (await provider.getProductById(
+          productId
+        )) as unknown as BaseProduct
+        let productItem: IdleData<EnhancedProduct> | ErrorData
+        if (!product) {
+          productItem = {
+            status: 'error',
+            error: {
+              code: 'PRODUCT_NOT_FOUND',
+              message: 'product not found',
+              rootCause: 'product not found',
+            },
+          }
+        } else {
+          const enhancedProduct = getEnhancedProduct(product)
+          if (!enhancedProduct) {
+            productItem = {
+              status: 'error',
+              error: {
+                code: 'PRODUCT_NOT_FOUND',
+                message: 'product not found',
+                rootCause: 'product not found',
+              },
+            }
+          }
+          productItem = {
+            data: enhancedProduct,
+            status: 'idle',
+          }
+        }
+        set((store) => {
+          store.products.items = {
+            ...store.products.items,
+            [productId]: productItem,
+          }
+        })
+        return get().products.items[productId]
+      } else {
+        return productSlice
+      }
+    },
+
+    getProductByVariantIds: async (variantIds) => {
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+      const provider = module(get().config.data as AppConfig)
+      const productsObjs = await provider.getProductByVariantIds(variantIds)
+      if (!productsObjs) return null
+      const { products } = productsObjs
+      if (!products) return null
+      return products
+    },
+
+    fetchByIds: async (productIds: Array<ProductId>) => {
+      if (productIds.length === 0) return {}
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+      const provider = module(get().config.data as AppConfig)
+      const productsObj = await provider.getProductByIds(productIds)
+      if (!productsObj) return null
+      const { products, metafields } = productsObj
+
+      if (!products) return null
+
+      const transformedProducts = products.reduce((acc, product) => {
+        return {
+          ...acc,
+          [product.handle]: {
+            data: product,
+            status: 'idle',
+          },
+        }
+      }, {})
+      get().products.updateProductList(transformedProducts)
+      if (metafields) get().metafield.updateMetafields(metafields)
+      return products
+    },
+
+    getByHandle: async (productHandle: string) => {
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+      const productSlice = get().products.items[productHandle] ?? {
+        status: 'init',
+      }
+      if (productSlice.status === 'idle' || productSlice.status === 'loading') {
+        return productSlice
+      }
+
+      const provider = module(get().config.data as AppConfig)
+
+      if (productSlice.status === 'error' || productSlice.status === 'init') {
+        const productDetails = await provider.getProductByHandle(productHandle)
+
+        let productItem: AsyncData<EnhancedProduct>
+        if (!productDetails) {
+          productItem = {
+            status: 'error',
+            error: {
+              message: 'Product not found',
+              code: 'NO_PRODUCT_DATA',
+              rootCause: 'Product not found, Got no product data for product',
+            },
+          }
+        } else {
+          const product = productDetails?.product
+          if (!product) {
+            productItem = {
+              status: 'error',
+              error: {
+                message: 'Product not found',
+                code: 'NO_PRODUCT_DATA',
+                rootCause: 'Product not found, Got no product data for product',
+              },
+            }
+          } else {
+            const p = getEnhancedProduct(product)
+            if (!p) {
+              productItem = {
+                status: 'error',
+                error: {
+                  code: 'PRODUCT_NOT_FOUND',
+                  message: 'product not found',
+                  rootCause: 'product not found',
+                },
+              }
+            } else {
+              productItem = { status: 'idle', data: p }
+            }
+          }
+        }
+        set((store) => {
+          store.products.items[productHandle] = productItem
+        })
+        if (productDetails?.metafields) {
+          get().metafield.updateMetafields(productDetails.metafields)
+        }
+      }
+      return get().products.items[productHandle]
+    },
+
+    getByHandles: async (productHandles: string[]) => {
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+      const productsMap: Record<string, AsyncData<EnhancedProduct>> = {}
+      const handlesToBeFetched: string[] = []
+
+      productHandles.forEach((productHandle) => {
+        const productSlice = get().products.items[productHandle] ?? {
+          status: 'init',
+        }
+        const { status } = productSlice
+        if (status === 'idle' || status === 'loading') {
+          productsMap[productHandle] = productSlice
+        } else {
+          handlesToBeFetched.push(productHandle)
+        }
+      })
+
+      const provider = module(get().config.data as AppConfig)
+
+      if (handlesToBeFetched.length > 0) {
+        const productsData = await provider.getProductsByHandles(
+          handlesToBeFetched
+        )
+
+        productsData?.products.forEach(({ product, metafields }, index) => {
+          let productItem: AsyncData<EnhancedProduct>
+          if (!product) {
+            productItem = {
+              status: 'error',
+              error: {
+                message: 'Product not found',
+                code: 'NO_PRODUCT_DATA',
+                rootCause: 'Product not found, Got no product data for product',
+              },
+            }
+          } else {
+            const p = getEnhancedProduct(product)
+            if (!p) {
+              productItem = {
+                status: 'error',
+                error: {
+                  code: 'PRODUCT_NOT_FOUND',
+                  message: 'product not found',
+                  rootCause: 'product not found',
+                },
+              }
+            } else {
+              productItem = { status: 'idle', data: p }
+            }
+          }
+
+          productsMap[handlesToBeFetched[index]] = productItem
+          set((store) => {
+            store.products.items[handlesToBeFetched[index]] = productItem
+          })
+
+          if (metafields) {
+            get().metafield.updateMetafields(metafields)
+          }
+        })
+      }
+
+      const products = productHandles.map(
+        (productHandle) => productsMap[productHandle]
+      )
+
+      return products
+    },
+
+    refreshByHandleUsingShopify: async (productHandle: string) => {
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+
+      const provider = module(get().config.data as AppConfig)
+
+      const product = await provider.getProductByHandle(productHandle)
+
+      let productItem: AsyncData<EnhancedProduct>
+
+      if (!product) {
+        productItem = {
+          status: 'error',
+          error: {
+            message: 'Product not found',
+            code: 'NO_PRODUCT_DATA',
+            rootCause: 'Product not found, Got no product data for product',
+          },
+        }
+      } else {
+        const p = getEnhancedProduct(product)
+        if (!p) {
+          productItem = {
+            status: 'error',
+            error: {
+              code: 'PRODUCT_NOT_FOUND',
+              message: 'product not found',
+              rootCause: 'product not found',
+            },
+          }
+        } else {
+          productItem = { status: 'idle', data: p }
+        }
+      }
+      set((store) => {
+        store.products.items[productHandle] = productItem
+      })
+      return get().products.items[productHandle]
+    },
+
+    refreshByHandlesUsingShopify: async (productHandles: string[]) => {
+      if (productHandles.length === 0) return
+
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+
+      const provider = module(get().config.data as AppConfig)
+
+      try {
+        const productsData = await provider.getProductsByHandles(productHandles)
+        if (!productsData?.products) return
+
+        productsData.products.forEach(({ product, metafields }, index) => {
+          const handle = productHandles[index]
+          if (!handle) return
+
+          let productItem: AsyncData<EnhancedProduct>
+          if (!product) {
+            productItem = {
+              status: 'error',
+              error: {
+                message: 'Product not found',
+                code: 'NO_PRODUCT_DATA',
+                rootCause: 'Product not found, Got no product data for product',
+              },
+            }
+          } else {
+            const p = getEnhancedProduct(product)
+            if (!p) {
+              productItem = {
+                status: 'error',
+                error: {
+                  code: 'PRODUCT_NOT_FOUND',
+                  message: 'product not found',
+                  rootCause: 'product not found',
+                },
+              }
+            } else {
+              productItem = { status: 'idle', data: p }
+            }
+          }
+
+          // Only overwrite store when we have successful Shopify data. When Shopify returns null
+          // or enhancement fails, keep existing Wizzy-derived product so PLP tile does not become empty.
+          if (productItem.status === 'idle' && productItem.data) {
+            set((store) => {
+              store.products.items[handle] = productItem
+            })
+          }
+
+          if (metafields) {
+            get().metafield.updateMetafields(metafields)
+          }
+        })
+      } catch (error) {
+        console.warn(
+          '[WizzySearch] Failed to refresh products from Shopify:',
+          error
+        )
+      }
+    },
+
+    updateProductList: (products) => {
+      set((store) => {
+        for (const key of Object.keys(products)) {
+          const p = products[key]
+          if (p.status === 'idle') {
+            const derivedProduct = getEnhancedProduct(p.data)
+            if (derivedProduct) {
+              store.products.items[key] = {
+                data: derivedProduct,
+                status: 'idle',
+              }
+            } else {
+              if (!p) {
+                store.products.items[key] = {
+                  status: 'error',
+                  error: {
+                    code: 'PRODUCT_NOT_FOUND',
+                    message: 'product not found',
+                    rootCause: 'product not found',
+                  },
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    updateSelectedVariant: (variantId, productHandle) => {
+      set((store) => {
+        const globalSetting = get().config.data?.settings?.['global']
+        const selectDefaultVariant = globalSetting?.selectDefaultVariant
+        const enableDynamicVariant = globalSetting?.enableDynamicVariant
+
+        if (enableDynamicVariant) {
+          if (selectDefaultVariant) {
+            if (variantId === null) {
+              // do nothing. the code ahead will reset the selectedVariantId
+              // we want to reset the variant id because this function is called only when the options that user has selected does not form any valid combination. so reset the selectedVariantId
+            }
+          }
+        } else {
+          if (selectDefaultVariant && !enableDynamicVariant) {
+            if (variantId === null) {
+              // earlier we used to return from here. so keeping it as it was.
+              return
+            }
+          }
+        }
+
+        const productItem = store.products.items[productHandle]
+        const productItemStatus = productItem.status
+        if (productItemStatus === 'error' || productItemStatus === 'loading') {
+          console.error({
+            message: 'Product item data is not available in store',
+            at: 'updateSelectedVariant',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+
+        const productItemData = productItem.data
+        if (!productItemData?.variants) {
+          console.error({
+            message: 'variants key is not  available in product data',
+            at: 'updateSelectedVariant',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+
+        const isVariantIdEncoded = !variantId?.startsWith(
+          'gid://shopify/ProductVariant'
+        )
+
+        let decodedVariantId: ProductVariantId | null = variantId
+        if (variantId) {
+          if (isVariantIdEncoded) {
+            decodedVariantId = base64.decode(variantId) as ProductVariantId
+          }
+        }
+
+        const product = store.products.items[productHandle]
+
+        if (product.status !== 'idle') return
+
+        product.data = {
+          ...productItemData,
+          selectedVariantId: decodedVariantId,
+          // TODO: Everywhere in the code selected variant id is being used.We need to migrate to lineItem.variantId
+          lineItem: {
+            ...product.data.lineItem,
+            variantId: decodedVariantId,
+          },
+        }
+      })
+    },
+    updateDisplayVariantId: (variantId, productHandle) => {
+      set((store) => {
+        const productItem = store.products.items[productHandle]
+        const productItemStatus = productItem.status
+        if (productItemStatus === 'error' || productItemStatus === 'loading') {
+          console.error({
+            message: 'Product item data is not available in store',
+            at: 'updateSelectedVariant',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+
+        const productItemData = productItem.data
+        if (!productItemData?.variants) {
+          console.error({
+            message: 'variants key is not  available in product data',
+            at: 'updateSelectedVariant',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+        const isVariantIdEncoded = !variantId?.startsWith(
+          'gid://shopify/ProductVariant'
+        )
+        const _variantId = (
+          variantId && isVariantIdEncoded ? base64.decode(variantId) : variantId
+        ) as ProductVariantId
+
+        const product = store.products.items[productHandle]
+        if (product.status === 'idle') {
+          product.data = {
+            ...productItemData,
+            displayVariantId: _variantId,
+          }
+        }
+      })
+    },
+
+    updateSelectedVariantWithSubscription: (
+      variantId: string,
+      productHandle: string,
+      sellingPlanId: string
+    ) => {
+      set((store) => {
+        const productItem = store.products.items[productHandle]
+        const productItemStatus = productItem.status
+        if (productItemStatus === 'error' || productItemStatus === 'loading') {
+          console.error({
+            message: 'Product item data is not available in store',
+            at: 'updateSelectedVariant',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+        const productItemData = productItem.data
+        if (!productItemData?.variants) {
+          console.error({
+            message: 'variants key is not  available in product data',
+            at: 'updateSelectedVariant',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+        const isVariantIdEncoded = !variantId.startsWith(
+          'gid://shopify/ProductVariant'
+        )
+        const _variantId = (
+          isVariantIdEncoded ? base64.decode(variantId) : variantId
+        ) as ProductVariantId
+        const productItemDerivedData = productItem.derivedData
+        if (
+          !productItemDerivedData ||
+          !productItemDerivedData.variantOptionsWithSubscriptions
+        ) {
+          console.error({
+            message:
+              'variantOptionsWithSubscriptions key is not  available in product derived data',
+            at: 'updateSelectedVariantWithSubscription',
+            productHandle: productHandle,
+            variantId: variantId,
+          })
+          return
+        }
+
+        store.products.items[productHandle].data = {
+          ...productItemData,
+          selectedVariantId: _variantId,
+          selectedSellingPlanId: sellingPlanId,
+        }
+      })
+    },
+    updateSellingPlanId: (productHandle, sellingPlanId) => {
+      set((store) => {
+        const productItem = store.products.items[productHandle]
+        const productItemStatus = productItem.status
+        if (
+          !productItem ||
+          productItemStatus === 'loading' ||
+          productItemStatus === 'error'
+        ) {
+          console.error({
+            message: 'product data is not defined',
+            at: 'updateSellingPlanId',
+            productHandle: productHandle,
+            selectedSellingPlanId: sellingPlanId,
+          })
+          return
+        }
+        const productItemData = productItem.data
+
+        store.products.items[productHandle].data = {
+          ...productItemData,
+          selectedSellingPlanId: sellingPlanId,
+        }
+      })
+    },
+    updateDefaultSellingPlanId: (productHandle, defaultSellingPlanId) => {
+      set((store) => {
+        const productItem = store.products.items[productHandle]
+        const productItemStatus = productItem.status
+        if (
+          !productItem ||
+          productItemStatus === 'loading' ||
+          productItemStatus === 'error'
+        ) {
+          console.error({
+            message: 'product data is not defined',
+            at: 'updateDefaultSellingPlanId',
+            productHandle: productHandle,
+            defaultSellingPlanId: defaultSellingPlanId,
+          })
+          return
+        }
+        const productItemData = productItem.data
+
+        store.products.items[productHandle].data = {
+          ...productItemData,
+          defaultSellingPlanId: defaultSellingPlanId,
+        }
+      })
+    },
+
+    getRecommendations: async (
+      id: string,
+      handle: string,
+      mode: 'RELATED' | 'COMPLEMENTARY' = 'RELATED'
+    ) => {
+      const module = get().modules.value?.catalog
+      if (!module) throw new Error('Catalog is not defined')
+      const provider = module(get().config.data as AppConfig)
+      const res = await provider.getRecommendations(id, handle, mode)
+      if (!res || !Array.isArray(res.products)) {
+        console.error(`error occured`)
+        // set((store) => {
+        //   store.products.items[handle].data.productRecommendations = []
+        // })
+        return []
+      } else {
+        const handles = res.products.map((r) => r.handle)
+        set((store) => {
+          for (const p of res.products) {
+            const key = p.handle
+            if (
+              !store.products.items[key] ||
+              store.products.items[key].status !== 'idle'
+            ) {
+              const derivedProduct = getEnhancedProduct(p)
+              if (derivedProduct) {
+                store.products.items[key] = {
+                  data: derivedProduct,
+                  status: 'idle',
+                }
+              } else {
+                store.products.items[key] = {
+                  error: {
+                    code: 'PRODUCT_NOT_FOUND',
+                    message: 'product not found',
+                    rootCause: 'product not found',
+                  },
+                  status: 'error',
+                }
+              }
+            }
+          }
+        })
+        get().metafield.updateMetafields(res.metafields)
+        return handles
+      }
+    },
+    updateRecentlyViewed: (handle: ProductHandle) => {
+      if (!handle) return
+      const recentlyViewed =
+        localStorage.getJson<RecentlyViewedJson>(RECENTLY_VIEWED)
+
+      const product = get().products.items[handle]
+
+      if (product && product.status === 'idle') {
+        const products: RecentlyViewedItem[] = recentlyViewed?.products || []
+
+        const existingIndex = products.findIndex(
+          (item) => item.handle === handle
+        )
+        if (existingIndex !== -1) {
+          products.splice(existingIndex, 1)
+        }
+
+        products.unshift({ handle: handle, id: product.data.id })
+
+        if (products.length > MAX) {
+          products.splice(MAX)
+        }
+        const newRecentlyViewedData = {
+          products: products,
+          max: MAX,
+        }
+
+        localStorage.set(RECENTLY_VIEWED, newRecentlyViewedData)
+      }
+    },
+    getRecentlyViewedProducts: () => {
+      const recentlyViewed =
+        localStorage.getJson<RecentlyViewedJson>(RECENTLY_VIEWED)
+      const products = recentlyViewed?.products || []
+      if (products.length > MAX) {
+        products.splice(MAX)
+      }
+      return products
+    },
+    updateSelectedVariantQuantity: (
+      quantity: number,
+      handle: ProductHandle
+    ) => {
+      set((store) => {
+        if (!store.products.items[handle].data) return
+        store.products.items[handle].data.lineItem.quantity = quantity
+      })
+    },
+    updateLineItemChildren: (handle, lineItemChildren) => {
+      const product = get().products.items[handle]
+      const productStatus = product.status
+      if (productStatus !== 'idle') {
+        console.log(
+          'lineItem child update failed, product not available in slice'
+        )
+        return
+      }
+      set((store) => {
+        const product = store.products.items[handle]
+        if (product.status !== 'idle') return
+        product.data.lineItem.children = lineItemChildren
+      })
+    },
+    updateLineItemSiblings: (handle, lineItemSiblings) => {
+      const product = get().products.items[handle]
+      const productStatus = product.status
+      if (productStatus !== 'idle') {
+        console.log(
+          'lineItem sibling update failed, product not available in slice'
+        )
+        return
+      }
+      set((store) => {
+        const product = store.products.items[handle]
+        if (product.status !== 'idle') return
+        product.data.lineItem.siblings = lineItemSiblings
+      })
+    },
+    updateLineItemSiblingArray: (handle, lineItemSiblingArray) => {
+      const product = get().products.items[handle]
+      const productStatus = product.status
+      if (productStatus !== 'idle') {
+        console.log(
+          'lineItem sibling array update failed, product not available in slice'
+        )
+        return
+      }
+      set((store) => {
+        const product = store.products.items[handle]
+        if (product.status !== 'idle') return
+        product.data.lineItem.siblingArray = lineItemSiblingArray
+      })
+    },
+    updateLineItemCustomAttibutes: (
+      handle: ProductHandle,
+      customAttributes: Record<string, string>
+    ) => {
+      const product = get().products.items[handle]
+      const productStatus = product?.status
+      if (!product || productStatus !== 'idle') {
+        console.log(
+          'lineItem customAttributes update failed, product not available in slice'
+        )
+        return
+      }
+
+      set((store) => {
+        const product = store.products.items[handle]
+        if (product.status !== 'idle') return
+        product.data.lineItem.customAttributes = customAttributes
+      })
+    },
+    setTrendingItems(items) {
+      set((store) => {
+        for (const item of items.data) {
+          store.products.items[item.handle] = { data: item, status: 'idle' }
+        }
+        store.products.trendingItems = items
+      })
+    },
+    getProductDescription: async (handle) => {
+      if (!handle) return
+      const products = get().products.description
+      if (products[handle]?.status === 'idle' || products[handle]?.data) return
+      set((store) => {
+        store.products.description[handle] = {
+          status: 'loading',
+        }
+      })
+      const shopifyCatlog = get().modules.getModule<ICatalogProvider>('catalog')
+      const productDescription = await shopifyCatlog.getProductDesctiption(
+        handle
+      )
+      if (productDescription.status !== 'error' && productDescription.data) {
+        set((store) => {
+          store.products.description[handle] = {
+            productDescription: productDescription.data.product,
+            status: 'idle',
+          }
+        })
+      }
+    },
+    updateSelectedOptions: (handle, options) => {
+      set((s) => {
+        const productItem = s.products.items[handle]
+
+        if (productItem.status !== 'idle') return
+        productItem.data.selectedOptions = options
+      })
+    },
+    resetSelectedOptions: (handle) => {
+      // log error here
+      set((s) => {
+        const productItem = s.products.items[handle]
+        const productItemStatus = productItem.status
+        const globalSetting = get().config.data?.settings?.['global']
+
+        if (productItemStatus !== 'idle') return
+
+        const product = productItem.data
+        const variantOptions = productItem.data.variantOptions
+        const selectDefaultVariant = globalSetting?.selectDefaultVariant
+        const shouldAlwaysSelectVariant =
+          product.variants.displayOrder.length === 1 &&
+          product.variants.items[
+            product.variants.displayOrder[0]
+          ].title.toLowerCase() === 'default title'
+        const preSelectedOptionsFromConfig =
+          useAppStore.getState().config.data?.settings?.['global']
+            ?.preSelectedOptionsFromConfig
+
+        const { selectedOptions } = getInitialSelectedVariantOptions({
+          defaultVariantId: product.defaultVariantId,
+          variantOptions,
+          options: {
+            selectDefaultVariant,
+            shouldAlwaysSelectVariant,
+            preSelectedOptionsFromConfig,
+          },
+          product,
+        })
+
+        product.selectedOptions = selectedOptions
+      })
+    },
+    resetLineItem: (handle) => {
+      set((s) => {
+        const globalSetting = get().config.data?.settings?.['global']
+        const product = s.products.items[handle]
+        if (!product || product.status !== 'idle') return
+        const {
+          quantity,
+          selectedOptions,
+          selectedVariantId,
+          displayVariantId,
+        } = product.data.lineItem._initial
+        product.data.lineItem = {
+          quantity,
+          variantId: selectedVariantId,
+          _initial: product.data.lineItem._initial,
+          missingVariantId: null,
+        }
+        product.data.selectedOptions = selectedOptions
+        product.data.selectedVariantId = selectedVariantId
+        product.data.displayVariantId = displayVariantId
+
+        const selectOneTimePuchaseAsDefault =
+          globalSetting?.selectOneTimePuchaseAsDefault ?? false
+        if (selectOneTimePuchaseAsDefault) {
+          product.data.selectedSellingPlanId = undefined
+        }
+      })
+    },
+    updateLineItemMissingVariantId({ handle, missingVariantId }) {
+      set((s) => {
+        const productItem = s.products.items[handle]
+        if (!productItem) return
+        const productItemStatus = productItem.status
+        if (productItemStatus !== 'idle') return
+        productItem.data.lineItem.missingVariantId = missingVariantId
+      })
+    },
+    updateVariantIdToQuantityAvailable: (variantId, quantityAvailable) => {
+      set((s) => {
+        s.products.variantIdToQuantityAvailable = {
+          ...s.products.variantIdToQuantityAvailable,
+          [variantId]: quantityAvailable,
+        }
+      })
+    },
+    resetSlice: () => {
+      set((s) => {
+        s.products.items = {}
+        s.products.description = {}
+        s.products.recommendedProducts = {}
+        s.products.trendingItems = { data: [], status: 'idle' }
+        s.products.variantIdToQuantityAvailable = {}
+      })
+    },
+    resetMultipleLineItems: (productHandles: ProductHandle[]) => {
+      set((s) => {
+        const globalSetting = get().config.data?.settings?.['global']
+
+        for (const handle of productHandles) {
+          const product = s.products.items[handle]
+          if (product.status !== 'idle') continue
+          const {
+            quantity,
+            selectedOptions,
+            selectedVariantId,
+            displayVariantId,
+          } = product.data.lineItem._initial
+          product.data.lineItem = {
+            quantity,
+            variantId: selectedVariantId,
+            _initial: product.data.lineItem._initial,
+            missingVariantId: null,
+          }
+          product.data.selectedOptions = selectedOptions
+          product.data.selectedVariantId = selectedVariantId
+          product.data.displayVariantId = displayVariantId
+
+          const selectOneTimePuchaseAsDefault =
+            globalSetting?.selectOneTimePuchaseAsDefault ?? false
+          if (selectOneTimePuchaseAsDefault) {
+            product.data.selectedSellingPlanId = undefined
+          }
+        }
+      })
+    },
+
+    updateDefaultVariantId: (productHandle, defaultVariantId) => {
+      set((s) => {
+        const productItem = s.products.items[productHandle]
+        const productItemStatus = productItem.status
+        if (productItemStatus !== 'idle') return
+
+        productItem.data.defaultVariantId = defaultVariantId
+      })
+    },
+  },
+})