@shopify/hydrogen-react/dist/browser-dev/BuyNowButton.mjs.map

React components, hooks, and utilities for creating custom Shopify storefronts

{"version":3,"file":"BuyNowButton.mjs","sources":["../../src/BuyNowButton.tsx"],"sourcesContent":["import {useEffect, useState, useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {\n  BaseButton,\n  type BaseButtonProps,\n  type CustomBaseButtonProps,\n} from './BaseButton.js';\n\ninterface BuyNowButtonPropsBase {\n  /** The item quantity. Defaults to 1. */\n  quantity?: number;\n  /** The ID of the variant. */\n  variantId: string;\n  /** The selling plan ID of the subscription variant */\n  sellingPlanId?: string;\n  /** An array of cart line attributes that belong to the item being added to the cart. */\n  attributes?: {\n    key: string;\n    value: string;\n  }[];\n}\n\ntype BuyNowButtonProps<AsType extends React.ElementType = 'button'> =\n  BuyNowButtonPropsBase & BaseButtonProps<AsType>;\n\n/**\n * The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.\n * Must be a child of a `CartProvider` component.\n */\nexport function BuyNowButton<AsType extends React.ElementType = 'button'>(\n  props: BuyNowButtonProps<AsType>,\n): JSX.Element {\n  const {cartCreate, checkoutUrl} = useCart();\n  const [loading, setLoading] = useState<boolean>(false);\n\n  const {\n    quantity,\n    variantId,\n    sellingPlanId,\n    onClick,\n    attributes,\n    children,\n    ...passthroughProps\n  } = props;\n\n  useEffect(() => {\n    if (loading && checkoutUrl) {\n      window.location.href = checkoutUrl;\n    }\n  }, [loading, checkoutUrl]);\n\n  const handleBuyNow = useCallback(() => {\n    setLoading(true);\n    cartCreate({\n      lines: [\n        {\n          quantity: quantity ?? 1,\n          merchandiseId: variantId,\n          attributes,\n          sellingPlanId,\n        },\n      ],\n    });\n  }, [cartCreate, quantity, variantId, attributes, sellingPlanId]);\n\n  return (\n    <BaseButton\n      // Only certain 'as' types such as 'button' contain `disabled`\n      disabled={loading ?? (passthroughProps as {disabled?: boolean}).disabled}\n      {...passthroughProps}\n      onClick={onClick}\n      defaultOnClick={handleBuyNow}\n    >\n      {children}\n    </BaseButton>\n  );\n}\n\n// This is only for documentation purposes, and it is not used in the code.\nexport interface BuyNowButtonPropsForDocs<\n  AsType extends React.ElementType = 'button',\n>\n  extends BuyNowButtonPropsBase, CustomBaseButtonProps<AsType> {}\n"],"names":[],"mappings":";;;;AA6BO,SAAS,aACd,OACa;AACb,QAAM,EAAC,YAAY,YAAA,IAAe,QAAA;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,KAAK;AAErD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,YAAU,MAAM;AACd,QAAI,WAAW,aAAa;AAC1B,aAAO,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,IAAI;AACf,eAAW;AAAA,MACT,OAAO;AAAA,QACL;AAAA,UACE,UAAU,YAAY;AAAA,UACtB,eAAe;AAAA,UACf;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IACF,CACD;AAAA,EACH,GAAG,CAAC,YAAY,UAAU,WAAW,YAAY,aAAa,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,UAAU,WAAY,iBAA0C;AAAA,MAC/D,GAAG;AAAA,MACJ;AAAA,MACA,gBAAgB;AAAA,MAEf;AAAA,IAAA;AAAA,EAAA;AAGP;"}