{"version":3,"file":"collection-660ab715.js","sources":["../src/components/collection/CollectionBuyStack.tsx","../src/components/collection/CollectionBuyStackRegister.tsx"],"sourcesContent":["import {addLineItems, getCart} from '@/cart/cart-store';\nimport {endDrawer} from '@/components/drawers';\nimport {getLocalizedStrings} from '@/localization/localization-store';\nimport {getDefaultOnetimePlan} from '@/product/product-selection';\nimport {ProductState, VariantState} from '@/product/types';\nimport {getProductSellingPlans} from '@/selling-plan/selling-plan-store';\nimport {createShopifyImageUrl} from '@/utilities/create-shopify-image-url';\nimport formatCurrency from '@/utilities/format-currency';\nimport {handleize} from '@/utilities/handleize';\nimport {logError} from '@/utilities/log';\nimport classNames from 'classnames';\nimport {ChangeEvent} from 'preact/compat';\nimport {useState} from 'preact/hooks';\n\n/**\n * Props for the CollectionBuyStack component\n */\nexport type CollectionBuyStackProps = {\n  /**\n   * The product data\n   */\n  product: ProductState;\n};\n\n/**\n * A component that displays a product image, title, price, and add to cart button\n * @param product - The product data\n * @returns A CollectionBuyStack component\n */\nexport default function CollectionBuyStack({product}: CollectionBuyStackProps) {\n  const [selectedVariant, setSelectedVariant] = useState<VariantState | null>(\n    product.selectedOrFirstAvailableVariant\n  );\n  const cart = getCart();\n  const currency = cart?.currency ?? 'USD';\n  const price = selectedVariant?.price ?? 0;\n  const buttonLabel =\n    getLocalizedStrings().collectionCtaButtonLabel ?? 'Add To Cart';\n  const plans = getProductSellingPlans(product.id);\n  const onetimePlan = getDefaultOnetimePlan(plans);\n\n  /**\n   * Handles the change event for the variant select element\n   * Updates the selected variant based on the selected value\n   */\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n    const newVariant = product.variants.find(\n      ({id}) => id === event.currentTarget?.value\n    );\n    if (!newVariant) return;\n\n    setSelectedVariant(newVariant);\n  };\n\n  /**\n   * Handles the click event for the add to cart button\n   * Opens the end drawer and adds the selected variant to the cart\n   * Logs an error if the operation fails\n   * @returns A promise that resolves when the operation is complete\n   */\n  const handleClick = async () => {\n    if (!selectedVariant) return;\n\n    try {\n      endDrawer.open();\n      await addLineItems([\n        {\n          id: parseInt(selectedVariant.id),\n          quantity: 1,\n          selling_plan: onetimePlan?.external_plan_id ?? undefined,\n        },\n      ]);\n    } catch (error) {\n      logError(error);\n    }\n  };\n\n  return (\n    <div className=\"grid grid-cols-1 gap-y-4\">\n      <a href={product.url ?? ''}>\n        <img\n          src={createShopifyImageUrl(\n            selectedVariant?.image?.url ?? product.featuredImage?.url ?? '',\n            440\n          )}\n          alt={product.title}\n          className=\"aspect-7/10 max-h-80 w-full object-contain\"\n        />\n      </a>\n      <div className=\"md:min-h-16\">\n        <h6 className=\"text-deep-ocean-blue\">{product.title}</h6>\n      </div>\n      <span className=\"text-lg font-bold text-dark-blue-gray\">\n        {formatCurrency(price, currency)}\n      </span>\n      <div className=\"flex flex-col gap-y-3\">\n        <div\n          className={classNames({\n            'pointer-events-none hidden opacity-0 md:block':\n              product.variants.length <= 1,\n          })}\n        >\n          {product.variants.length > 0 && (\n            <select\n              aria-label={`${product.title} Variants`}\n              className=\"w-full\"\n              id={`${handleize(product.title)}-variants`}\n              name={`${product.title} Variants`}\n              onChange={handleChange}\n            >\n              {product.variants.map(({id, title}) => (\n                <option key={id} value={id}>\n                  {title}\n                </option>\n              ))}\n            </select>\n          )}\n        </div>\n        <button\n          className=\"btn btn-square btn-secondary btn-sm w-full uppercase\"\n          onClick={() => void handleClick()}\n        >\n          {buttonLabel}\n        </button>\n      </div>\n    </div>\n  );\n}\n","import {optimisticCacheProduct} from '@/cart/optimistic-updates/optimistic-cache-product';\nimport CollectionBuyStack from '@/components/collection/CollectionBuyStack';\nimport {productSchema} from '@/product/types';\nimport {setProductSellingPlans} from '@/selling-plan/selling-plan-store';\nimport {createShopifyImageUrl} from '@/utilities/create-shopify-image-url';\nimport {logError, logInfo} from '@/utilities/log';\nimport {preloadImage} from '@/utilities/preload-image';\nimport {Plan} from '@rechargeapps/storefront-client';\nimport register from 'preact-custom-element';\n\n/**\n * Props for the CollectionBuyStackLoader component\n */\ntype CollectionBuyStackLoaderProps = {\n  /**\n   * The JSON stringified product data, passed in via liquid\n   */\n  product: string;\n};\n\n/**\n * Custom element that renders the CollectionBuyStack component\n * @param product - The JSON stringified product data, passed in via liquid\n *\n * @returns A CollectionBuyStack component\n */\nfunction CollectionBuyStackLoader({\n  product: productJson,\n}: CollectionBuyStackLoaderProps) {\n  const product = loadProductData(productJson);\n  if (!product) return <></>;\n\n  return <CollectionBuyStack product={product} />;\n}\n\nfunction loadProductData(productJson: string) {\n  try {\n    const product = productSchema.parse(JSON.parse(productJson));\n    // Use the product metafield data to set the selling plans\n    // This saves us a GET request to Recharge\n    const plans = product.rechargePlans;\n    if (plans) {\n      setProductSellingPlans(product.id, plans as Plan[]);\n    }\n\n    // Cache the product data so we can display faster in the cart\n    optimisticCacheProduct(product);\n\n    // Preload the variant images for smoother transitionss\n    product.variants.forEach(\n      ({image}) =>\n        !!image && preloadImage(createShopifyImageUrl(image.url, 440))\n    );\n\n    logInfo('CollectionProductLoaded', {productJson, product});\n\n    return product;\n  } catch (error) {\n    logError(error, {\n      message: 'ErrorLoadingProductData',\n      productJson,\n    });\n    return null;\n  }\n}\nregister(CollectionBuyStackLoader, 'collection-buy-stack', ['product']);\n"],"names":["CollectionBuyStack","product","selectedVariant","setSelectedVariant","useState","selectedOrFirstAvailableVariant","cart","getCart","currency","price","buttonLabel","getLocalizedStrings","collectionCtaButtonLabel","plans","getProductSellingPlans","id","onetimePlan","getDefaultOnetimePlan","handleChange","event","newVariant","variants","find","currentTarget","value","handleClick","endDrawer","open","addLineItems","parseInt","quantity","selling_plan","external_plan_id","undefined","error","logError","_jsxs","className","children","_jsx","href","url","src","createShopifyImageUrl","image","featuredImage","alt","title","formatCurrency","classNames","length","handleize","name","onChange","map","onClick","CollectionBuyStackLoader","productJson","loadProductData","_Fragment","productSchema","parse","JSON","rechargePlans","optimisticCacheProduct","forEach","preloadImage","logInfo","message","register"],"mappings":"q6BA6BA,SAAwBA,EAAmB,CAACC,QAAAA,CAAgC,EAAG,SAC7E,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAC5CH,EAAQI,+BACV,EACMC,EAAOC,IACPC,GAAWF,GAAAA,YAAAA,EAAME,WAAY,MAC7BC,GAAQP,GAAAA,YAAAA,EAAiBO,QAAS,EAClCC,EACJC,IAAsBC,0BAA4B,cAC9CC,EAAQC,EAAuBb,EAAQc,EAAE,EACzCC,EAAcC,EAAsBJ,CAAK,EAMzCK,EAAgBC,GAA0C,CAC9D,MAAMC,EAAanB,EAAQoB,SAASC,KAClC,CAAC,CAACP,GAAAA,CAAQA,IAAAA,OAAAA,OAAAA,MAAOI,EAAAA,EAAMI,gBAANJ,YAAAA,EAAqBK,OACxC,EACKJ,GAELjB,EAAmBiB,CAAU,CAAA,EASzBK,EAAc,SAAY,CAC9B,GAAKvB,EAED,GAAA,CACFwB,EAAUC,KAAK,EACf,MAAMC,EAAa,CACjB,CACEb,GAAIc,SAAS3B,EAAgBa,EAAE,EAC/Be,SAAU,EACVC,cAAcf,GAAAA,YAAAA,EAAagB,mBAAoBC,MAChD,CAAA,CACF,QACMC,EAAO,CACdC,EAASD,CAAK,CAChB,CAAA,EAGF,OACEE,EAAA,MAAA,CAAKC,UAAU,2BAA0BC,UACvCC,EAAA,IAAA,CAAGC,KAAMvC,EAAQwC,KAAO,GAAGH,SACzBC,EAAA,MAAA,CACEG,IAAKC,IACHzC,EAAAA,GAAAA,YAAAA,EAAiB0C,QAAjB1C,YAAAA,EAAwBuC,QAAOxC,EAAAA,EAAQ4C,gBAAR5C,YAAAA,EAAuBwC,MAAO,GAC7D,GACF,EACAK,IAAK7C,EAAQ8C,MACbV,UAAU,4CAAA,CACX,CAAA,CACA,EACHE,EAAA,MAAA,CAAKF,UAAU,cAAaC,SAC1BC,EAAA,KAAA,CAAIF,UAAU,uBAAsBC,SAAErC,EAAQ8C,KAAAA,CAAU,CAAA,CACrD,EACLR,EAAA,OAAA,CAAMF,UAAU,wCAAuCC,SACpDU,EAAevC,EAAOD,CAAQ,CAAA,CAC3B,EACN4B,EAAA,MAAA,CAAKC,UAAU,wBAAuBC,UACpCC,EAAA,MAAA,CACEF,UAAWY,EAAW,CACpB,gDACEhD,EAAQoB,SAAS6B,QAAU,CAAA,CAC9B,EAAEZ,SAEFrC,EAAQoB,SAAS6B,OAAS,GACzBX,EAAA,SAAA,CACE,aAAa,GAAEtC,EAAQ8C,KAAM,YAC7BV,UAAU,SACVtB,GAAK,GAAEoC,EAAUlD,EAAQ8C,KAAK,CAAE,YAChCK,KAAO,GAAEnD,EAAQ8C,KAAM,YACvBM,SAAUnC,EAAaoB,SAEtBrC,EAAQoB,SAASiC,IAAI,CAAC,CAACvC,GAAAA,EAAIgC,MAAAA,CAAAA,IAC1BR,EAAA,SAAA,CAAiBf,MAAOT,EAAGuB,SACxBS,CAAK,EADKhC,CAEL,CACT,CAAA,CACK,CAAA,CAEP,EACLwB,EAAA,SAAA,CACEF,UAAU,uDACVkB,QAASA,IAAM,KAAK9B,EAAY,EAAEa,SAEjC5B,CAAAA,CACK,CAAC,CAAA,CACN,CAAC,CAAA,CACH,CAET,CCrGA,SAAS8C,EAAyB,CAChCvD,QAASwD,CACoB,EAAG,CAC1BxD,MAAAA,EAAUyD,EAAgBD,CAAW,EAC3C,OAAKxD,EAEEsC,EAACvC,EAAkB,CAACC,QAAAA,CAAAA,CAAmB,EAFzBsC,EAAAoB,IAAI,CAG3B,CAEA,SAASD,EAAgBD,EAAqB,CACxC,GAAA,CACF,MAAMxD,EAAU2D,EAAcC,MAAMC,KAAKD,MAAMJ,CAAW,CAAC,EAGrD5C,EAAQZ,EAAQ8D,cACtB,OAAIlD,GACqBZ,EAAAA,EAAQc,GAAIF,CAAgB,EAIrDmD,EAAuB/D,CAAO,EAGtBoB,EAAAA,SAAS4C,QACf,CAAC,CAACrB,MAAAA,CAAAA,IACA,CAAC,CAACA,GAASsB,EAAavB,EAAsBC,EAAMH,IAAK,GAAG,CAAC,CACjE,EAEA0B,EAAQ,0BAA2B,CAACV,YAAAA,EAAaxD,QAAAA,CAAAA,CAAQ,EAElDA,QACAiC,EAAO,CACdC,OAAAA,EAASD,EAAO,CACdkC,QAAS,0BACTX,YAAAA,CAAAA,CACD,EACM,IACT,CACF,CACAY,EAASb,EAA0B,uBAAwB,CAAC,SAAS,CAAC"}