@shopify/hydrogen-react 2023.1.7 → 2023.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser-dev/CartProvider.mjs.map +1 -1
- package/dist/browser-dev/Image.mjs +336 -90
- package/dist/browser-dev/Image.mjs.map +1 -1
- package/dist/browser-dev/MediaFile.mjs.map +1 -1
- package/dist/browser-dev/ModelViewer.mjs.map +1 -1
- package/dist/browser-dev/Money.mjs.map +1 -1
- package/dist/browser-dev/ProductProvider.mjs +2 -2
- package/dist/browser-dev/ProductProvider.mjs.map +1 -1
- package/dist/browser-dev/Video.mjs +2 -2
- package/dist/browser-dev/Video.mjs.map +1 -1
- package/dist/browser-dev/analytics-utils.mjs +1 -1
- package/dist/browser-dev/analytics-utils.mjs.map +1 -1
- package/dist/browser-dev/index.mjs +2 -3
- package/dist/browser-dev/index.mjs.map +1 -1
- package/dist/browser-dev/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/browser-dev/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/browser-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/browser-dev/storefront-api-constants.mjs +1 -1
- package/dist/browser-dev/storefront-api-constants.mjs.map +1 -1
- package/dist/browser-dev/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/browser-dev/useCartActions.mjs.map +1 -1
- package/dist/browser-prod/CartProvider.mjs.map +1 -1
- package/dist/browser-prod/Image.mjs +302 -82
- package/dist/browser-prod/Image.mjs.map +1 -1
- package/dist/browser-prod/MediaFile.mjs.map +1 -1
- package/dist/browser-prod/ModelViewer.mjs.map +1 -1
- package/dist/browser-prod/Money.mjs.map +1 -1
- package/dist/browser-prod/ProductProvider.mjs +2 -2
- package/dist/browser-prod/ProductProvider.mjs.map +1 -1
- package/dist/browser-prod/Video.mjs +2 -2
- package/dist/browser-prod/Video.mjs.map +1 -1
- package/dist/browser-prod/analytics-utils.mjs +1 -1
- package/dist/browser-prod/analytics-utils.mjs.map +1 -1
- package/dist/browser-prod/index.mjs +2 -3
- package/dist/browser-prod/index.mjs.map +1 -1
- package/dist/browser-prod/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/browser-prod/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/browser-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/browser-prod/storefront-api-constants.mjs +1 -1
- package/dist/browser-prod/storefront-api-constants.mjs.map +1 -1
- package/dist/browser-prod/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/browser-prod/useCartActions.mjs.map +1 -1
- package/dist/node-dev/AddToCartButton.js +4 -4
- package/dist/node-dev/AddToCartButton.js.map +1 -1
- package/dist/node-dev/BaseButton.js +2 -2
- package/dist/node-dev/BaseButton.js.map +1 -1
- package/dist/node-dev/BuyNowButton.js +4 -4
- package/dist/node-dev/BuyNowButton.js.map +1 -1
- package/dist/node-dev/CartCheckoutButton.js +3 -3
- package/dist/node-dev/CartCheckoutButton.js.map +1 -1
- package/dist/node-dev/CartLineProvider.js +3 -3
- package/dist/node-dev/CartLineProvider.js.map +1 -1
- package/dist/node-dev/CartLineQuantityAdjustButton.js +2 -2
- package/dist/node-dev/CartLineQuantityAdjustButton.js.map +1 -1
- package/dist/node-dev/CartProvider.js +20 -20
- package/dist/node-dev/CartProvider.js.map +1 -1
- package/dist/node-dev/CartProvider.mjs.map +1 -1
- package/dist/node-dev/Image.js +350 -87
- package/dist/node-dev/Image.js.map +1 -1
- package/dist/node-dev/Image.mjs +336 -90
- package/dist/node-dev/Image.mjs.map +1 -1
- package/dist/node-dev/MediaFile.js.map +1 -1
- package/dist/node-dev/MediaFile.mjs.map +1 -1
- package/dist/node-dev/ModelViewer.js +4 -4
- package/dist/node-dev/ModelViewer.js.map +1 -1
- package/dist/node-dev/ModelViewer.mjs.map +1 -1
- package/dist/node-dev/Money.js.map +1 -1
- package/dist/node-dev/Money.mjs.map +1 -1
- package/dist/node-dev/ProductProvider.js +16 -16
- package/dist/node-dev/ProductProvider.js.map +1 -1
- package/dist/node-dev/ProductProvider.mjs +2 -2
- package/dist/node-dev/ProductProvider.mjs.map +1 -1
- package/dist/node-dev/ShopifyProvider.js +4 -4
- package/dist/node-dev/ShopifyProvider.js.map +1 -1
- package/dist/node-dev/Video.js +4 -4
- package/dist/node-dev/Video.js.map +1 -1
- package/dist/node-dev/Video.mjs +2 -2
- package/dist/node-dev/Video.mjs.map +1 -1
- package/dist/node-dev/analytics-utils.js +1 -1
- package/dist/node-dev/analytics-utils.js.map +1 -1
- package/dist/node-dev/analytics-utils.mjs +1 -1
- package/dist/node-dev/analytics-utils.mjs.map +1 -1
- package/dist/node-dev/cart-hooks.js +2 -2
- package/dist/node-dev/cart-hooks.js.map +1 -1
- package/dist/node-dev/index.js +1 -2
- package/dist/node-dev/index.js.map +1 -1
- package/dist/node-dev/index.mjs +2 -3
- package/dist/node-dev/index.mjs.map +1 -1
- package/dist/node-dev/load-script.js +3 -3
- package/dist/node-dev/load-script.js.map +1 -1
- package/dist/node-dev/node_modules/@xstate/react/es/fsm.js +6 -6
- package/dist/node-dev/node_modules/@xstate/react/es/fsm.js.map +1 -1
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.js +3 -3
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.js.map +1 -1
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/node-dev/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/node-dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js +2 -2
- package/dist/node-dev/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +3 -3
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +6 -6
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +2 -2
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/node-dev/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/node-dev/storefront-api-constants.js +1 -1
- package/dist/node-dev/storefront-api-constants.js.map +1 -1
- package/dist/node-dev/storefront-api-constants.mjs +1 -1
- package/dist/node-dev/storefront-api-constants.mjs.map +1 -1
- package/dist/node-dev/useCartAPIStateMachine.js +3 -3
- package/dist/node-dev/useCartAPIStateMachine.js.map +1 -1
- package/dist/node-dev/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/node-dev/useCartActions.js +11 -11
- package/dist/node-dev/useCartActions.js.map +1 -1
- package/dist/node-dev/useCartActions.mjs.map +1 -1
- package/dist/node-dev/useMoney.js +5 -5
- package/dist/node-dev/useMoney.js.map +1 -1
- package/dist/node-dev/useShopifyCookies.js +2 -2
- package/dist/node-dev/useShopifyCookies.js.map +1 -1
- package/dist/node-prod/AddToCartButton.js +4 -4
- package/dist/node-prod/AddToCartButton.js.map +1 -1
- package/dist/node-prod/BaseButton.js +2 -2
- package/dist/node-prod/BaseButton.js.map +1 -1
- package/dist/node-prod/BuyNowButton.js +4 -4
- package/dist/node-prod/BuyNowButton.js.map +1 -1
- package/dist/node-prod/CartCheckoutButton.js +3 -3
- package/dist/node-prod/CartCheckoutButton.js.map +1 -1
- package/dist/node-prod/CartLineProvider.js +3 -3
- package/dist/node-prod/CartLineProvider.js.map +1 -1
- package/dist/node-prod/CartLineQuantityAdjustButton.js +2 -2
- package/dist/node-prod/CartLineQuantityAdjustButton.js.map +1 -1
- package/dist/node-prod/CartProvider.js +20 -20
- package/dist/node-prod/CartProvider.js.map +1 -1
- package/dist/node-prod/CartProvider.mjs.map +1 -1
- package/dist/node-prod/Image.js +317 -80
- package/dist/node-prod/Image.js.map +1 -1
- package/dist/node-prod/Image.mjs +302 -82
- package/dist/node-prod/Image.mjs.map +1 -1
- package/dist/node-prod/MediaFile.js.map +1 -1
- package/dist/node-prod/MediaFile.mjs.map +1 -1
- package/dist/node-prod/ModelViewer.js +4 -4
- package/dist/node-prod/ModelViewer.js.map +1 -1
- package/dist/node-prod/ModelViewer.mjs.map +1 -1
- package/dist/node-prod/Money.js.map +1 -1
- package/dist/node-prod/Money.mjs.map +1 -1
- package/dist/node-prod/ProductProvider.js +16 -16
- package/dist/node-prod/ProductProvider.js.map +1 -1
- package/dist/node-prod/ProductProvider.mjs +2 -2
- package/dist/node-prod/ProductProvider.mjs.map +1 -1
- package/dist/node-prod/ShopifyProvider.js +4 -4
- package/dist/node-prod/ShopifyProvider.js.map +1 -1
- package/dist/node-prod/Video.js +4 -4
- package/dist/node-prod/Video.js.map +1 -1
- package/dist/node-prod/Video.mjs +2 -2
- package/dist/node-prod/Video.mjs.map +1 -1
- package/dist/node-prod/analytics-utils.js +1 -1
- package/dist/node-prod/analytics-utils.js.map +1 -1
- package/dist/node-prod/analytics-utils.mjs +1 -1
- package/dist/node-prod/analytics-utils.mjs.map +1 -1
- package/dist/node-prod/cart-hooks.js +2 -2
- package/dist/node-prod/cart-hooks.js.map +1 -1
- package/dist/node-prod/index.js +1 -2
- package/dist/node-prod/index.js.map +1 -1
- package/dist/node-prod/index.mjs +2 -3
- package/dist/node-prod/index.mjs.map +1 -1
- package/dist/node-prod/load-script.js +3 -3
- package/dist/node-prod/load-script.js.map +1 -1
- package/dist/node-prod/node_modules/@xstate/react/es/fsm.js +6 -6
- package/dist/node-prod/node_modules/@xstate/react/es/fsm.js.map +1 -1
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.js +3 -3
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.js.map +1 -1
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.mjs +2 -2
- package/dist/node-prod/node_modules/@xstate/react/es/useConstant.mjs.map +1 -1
- package/dist/node-prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js +2 -2
- package/dist/node-prod/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +3 -3
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.mjs +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.mjs.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +6 -6
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.mjs +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js +2 -2
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js.map +1 -1
- package/dist/node-prod/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.mjs +2 -2
- package/dist/node-prod/storefront-api-constants.js +1 -1
- package/dist/node-prod/storefront-api-constants.js.map +1 -1
- package/dist/node-prod/storefront-api-constants.mjs +1 -1
- package/dist/node-prod/storefront-api-constants.mjs.map +1 -1
- package/dist/node-prod/useCartAPIStateMachine.js +3 -3
- package/dist/node-prod/useCartAPIStateMachine.js.map +1 -1
- package/dist/node-prod/useCartAPIStateMachine.mjs.map +1 -1
- package/dist/node-prod/useCartActions.js +11 -11
- package/dist/node-prod/useCartActions.js.map +1 -1
- package/dist/node-prod/useCartActions.mjs.map +1 -1
- package/dist/node-prod/useMoney.js +5 -5
- package/dist/node-prod/useMoney.js.map +1 -1
- package/dist/node-prod/useShopifyCookies.js +2 -2
- package/dist/node-prod/useShopifyCookies.js.map +1 -1
- package/dist/types/CartProvider.d.ts +4 -2
- package/dist/types/Image.d.ts +235 -38
- package/dist/types/MediaFile.d.ts +2 -2
- package/dist/types/ModelViewer.d.ts +1 -1
- package/dist/types/Money.d.ts +1 -1
- package/dist/types/ProductProvider.d.ts +8 -4
- package/dist/types/Video.d.ts +3 -3
- package/dist/types/index.d.cts +1 -2
- package/dist/types/index.d.ts +1 -2
- package/dist/types/storefront-api-constants.d.ts +1 -1
- package/dist/types/storefront-api-types.d.ts +862 -118
- package/dist/types/useCartAPIStateMachine.d.ts +2 -2
- package/dist/types/useCartActions.d.ts +2 -2
- package/dist/umd/hydrogen-react.dev.js +334 -182
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +22 -15
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +2 -2
- package/storefront.schema.json +1 -1
- package/dist/browser-dev/CartLinePrice.mjs +0 -21
- package/dist/browser-dev/CartLinePrice.mjs.map +0 -1
- package/dist/browser-dev/image-size.mjs +0 -80
- package/dist/browser-dev/image-size.mjs.map +0 -1
- package/dist/browser-prod/CartLinePrice.mjs +0 -18
- package/dist/browser-prod/CartLinePrice.mjs.map +0 -1
- package/dist/browser-prod/image-size.mjs +0 -80
- package/dist/browser-prod/image-size.mjs.map +0 -1
- package/dist/node-dev/CartLinePrice.js +0 -21
- package/dist/node-dev/CartLinePrice.js.map +0 -1
- package/dist/node-dev/CartLinePrice.mjs +0 -21
- package/dist/node-dev/CartLinePrice.mjs.map +0 -1
- package/dist/node-dev/image-size.js +0 -80
- package/dist/node-dev/image-size.js.map +0 -1
- package/dist/node-dev/image-size.mjs +0 -80
- package/dist/node-dev/image-size.mjs.map +0 -1
- package/dist/node-prod/CartLinePrice.js +0 -18
- package/dist/node-prod/CartLinePrice.js.map +0 -1
- package/dist/node-prod/CartLinePrice.mjs +0 -18
- package/dist/node-prod/CartLinePrice.mjs.map +0 -1
- package/dist/node-prod/image-size.js +0 -80
- package/dist/node-prod/image-size.js.map +0 -1
- package/dist/node-prod/image-size.mjs +0 -80
- package/dist/node-prod/image-size.mjs.map +0 -1
- package/dist/types/CartLinePrice.d.ts +0 -31
- package/dist/types/image-size.d.ts +0 -36
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCartActions.mjs","sources":["../../src/useCartActions.tsx"],"sourcesContent":["import {useCallback, useMemo} from 'react';\nimport {\n AttributeInput,\n CartBuyerIdentityInput,\n CartInput,\n CartLineInput,\n CartLineUpdateInput,\n CountryCode,\n Cart as CartType,\n MutationCartDiscountCodesUpdateArgs,\n MutationCartNoteUpdateArgs,\n} from './storefront-api-types.js';\nimport {\n CartAttributesUpdate,\n CartBuyerIdentityUpdate,\n CartCreate,\n CartDiscountCodesUpdate,\n CartLineAdd,\n CartLineRemove,\n CartLineUpdate,\n CartNoteUpdate,\n CartQuery,\n} from './cart-queries.js';\nimport {useCartFetch} from './cart-hooks.js';\nimport {PartialDeep} from 'type-fest';\n\ntype CartResponse = PartialDeep<CartType, {recurseIntoArrays: true}>;\n\n/**\n * The `useCartActions` hook returns helper graphql functions for Storefront Cart API\n *\n * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-
|
|
1
|
+
{"version":3,"file":"useCartActions.mjs","sources":["../../src/useCartActions.tsx"],"sourcesContent":["import {useCallback, useMemo} from 'react';\nimport {\n AttributeInput,\n CartBuyerIdentityInput,\n CartInput,\n CartLineInput,\n CartLineUpdateInput,\n CountryCode,\n Cart as CartType,\n MutationCartDiscountCodesUpdateArgs,\n MutationCartNoteUpdateArgs,\n} from './storefront-api-types.js';\nimport {\n CartAttributesUpdate,\n CartBuyerIdentityUpdate,\n CartCreate,\n CartDiscountCodesUpdate,\n CartLineAdd,\n CartLineRemove,\n CartLineUpdate,\n CartNoteUpdate,\n CartQuery,\n} from './cart-queries.js';\nimport {useCartFetch} from './cart-hooks.js';\nimport {PartialDeep} from 'type-fest';\n\ntype CartResponse = PartialDeep<CartType, {recurseIntoArrays: true}>;\n\n/**\n * The `useCartActions` hook returns helper graphql functions for Storefront Cart API\n *\n * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-04/objects/Cart)\n */\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport function useCartActions({\n numCartLines,\n cartFragment,\n countryCode = 'US',\n}: {\n /** Maximum number of cart lines to fetch. Defaults to 250 cart lines. */\n numCartLines?: number;\n /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */\n cartFragment: string;\n /** The ISO country code for i18n. */\n countryCode?: CountryCode;\n}) {\n const fetchCart = useCartFetch();\n\n const cartFetch = useCallback(\n (cartId: string) => {\n return fetchCart<{cart: CartResponse}>({\n query: CartQuery(cartFragment),\n variables: {\n id: cartId,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [fetchCart, cartFragment, numCartLines, countryCode],\n );\n\n const cartCreate = useCallback(\n (cart: CartInput) => {\n return fetchCart<{cartCreate: {cart: CartResponse}}>({\n query: CartCreate(cartFragment),\n variables: {\n input: cart,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartLineAdd = useCallback(\n (cartId: string, lines: CartLineInput[]) => {\n return fetchCart<{cartLinesAdd: {cart: CartResponse}}>({\n query: CartLineAdd(cartFragment),\n variables: {\n cartId,\n lines,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartLineUpdate = useCallback(\n (cartId: string, lines: CartLineUpdateInput[]) => {\n return fetchCart<{cartLinesUpdate: {cart: CartResponse}}>({\n query: CartLineUpdate(cartFragment),\n variables: {\n cartId,\n lines,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartLineRemove = useCallback(\n (cartId: string, lines: string[]) => {\n return fetchCart<{cartLinesRemove: {cart: CartResponse}}>({\n query: CartLineRemove(cartFragment),\n variables: {\n cartId,\n lines,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const noteUpdate = useCallback(\n (cartId: string, note: MutationCartNoteUpdateArgs['note']) => {\n return fetchCart<{cartNoteUpdate: {cart: CartResponse}}>({\n query: CartNoteUpdate(cartFragment),\n variables: {\n cartId,\n note,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [fetchCart, cartFragment, numCartLines, countryCode],\n );\n\n const buyerIdentityUpdate = useCallback(\n (cartId: string, buyerIdentity: CartBuyerIdentityInput) => {\n return fetchCart<{cartBuyerIdentityUpdate: {cart: CartResponse}}>({\n query: CartBuyerIdentityUpdate(cartFragment),\n variables: {\n cartId,\n buyerIdentity,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const cartAttributesUpdate = useCallback(\n (cartId: string, attributes: AttributeInput[]) => {\n return fetchCart<{cartAttributesUpdate: {cart: CartResponse}}>({\n query: CartAttributesUpdate(cartFragment),\n variables: {\n cartId,\n attributes,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n const discountCodesUpdate = useCallback(\n (\n cartId: string,\n discountCodes: MutationCartDiscountCodesUpdateArgs['discountCodes'],\n ) => {\n return fetchCart<{cartDiscountCodesUpdate: {cart: CartResponse}}>({\n query: CartDiscountCodesUpdate(cartFragment),\n variables: {\n cartId,\n discountCodes,\n numCartLines,\n country: countryCode,\n },\n });\n },\n [cartFragment, countryCode, fetchCart, numCartLines],\n );\n\n return useMemo(\n () => ({\n cartFetch,\n cartCreate,\n cartLineAdd,\n cartLineUpdate,\n cartLineRemove,\n noteUpdate,\n buyerIdentityUpdate,\n cartAttributesUpdate,\n discountCodesUpdate,\n cartFragment,\n }),\n [\n cartFetch,\n cartCreate,\n cartLineAdd,\n cartLineUpdate,\n cartLineRemove,\n noteUpdate,\n buyerIdentityUpdate,\n cartAttributesUpdate,\n discountCodesUpdate,\n cartFragment,\n ],\n );\n}\n"],"names":[],"mappings":";;;AAkCO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAOG;AACD,QAAM,YAAY;AAElB,QAAM,YAAY;AAAA,IAChB,CAAC,WAAmB;AAClB,aAAO,UAAgC;AAAA,QACrC,OAAO,UAAU,YAAY;AAAA,QAC7B,WAAW;AAAA,UACT,IAAI;AAAA,UACJ;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,WAAW,cAAc,cAAc,WAAW;AAAA,EAAA;AAGrD,QAAM,aAAa;AAAA,IACjB,CAAC,SAAoB;AACnB,aAAO,UAA8C;AAAA,QACnD,OAAO,WAAW,YAAY;AAAA,QAC9B,WAAW;AAAA,UACT,OAAO;AAAA,UACP;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,cAAc;AAAA,IAClB,CAAC,QAAgB,UAA2B;AAC1C,aAAO,UAAgD;AAAA,QACrD,OAAO,YAAY,YAAY;AAAA,QAC/B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,iBAAiB;AAAA,IACrB,CAAC,QAAgB,UAAiC;AAChD,aAAO,UAAmD;AAAA,QACxD,OAAO,eAAe,YAAY;AAAA,QAClC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,iBAAiB;AAAA,IACrB,CAAC,QAAgB,UAAoB;AACnC,aAAO,UAAmD;AAAA,QACxD,OAAO,eAAe,YAAY;AAAA,QAClC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,aAAa;AAAA,IACjB,CAAC,QAAgB,SAA6C;AAC5D,aAAO,UAAkD;AAAA,QACvD,OAAO,eAAe,YAAY;AAAA,QAClC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,WAAW,cAAc,cAAc,WAAW;AAAA,EAAA;AAGrD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,QAAgB,kBAA0C;AACzD,aAAO,UAA2D;AAAA,QAChE,OAAO,wBAAwB,YAAY;AAAA,QAC3C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,QAAgB,eAAiC;AAChD,aAAO,UAAwD;AAAA,QAC7D,OAAO,qBAAqB,YAAY;AAAA,QACxC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAGrD,QAAM,sBAAsB;AAAA,IAC1B,CACE,QACA,kBACG;AACH,aAAO,UAA2D;AAAA,QAChE,OAAO,wBAAwB,YAAY;AAAA,QAC3C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,cAAc,aAAa,WAAW,YAAY;AAAA,EAAA;AAG9C,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const React = require("react");
|
|
4
4
|
const ShopifyProvider = require("./ShopifyProvider.js");
|
|
5
5
|
function useMoney(money) {
|
|
6
6
|
const { countryIsoCode, languageIsoCode } = ShopifyProvider.useShop();
|
|
@@ -11,7 +11,7 @@ function useMoney(money) {
|
|
|
11
11
|
);
|
|
12
12
|
}
|
|
13
13
|
const amount = parseFloat(money.amount);
|
|
14
|
-
const options =
|
|
14
|
+
const options = React.useMemo(
|
|
15
15
|
() => ({
|
|
16
16
|
style: "currency",
|
|
17
17
|
currency: money.currencyCode
|
|
@@ -38,7 +38,7 @@ function useMoney(money) {
|
|
|
38
38
|
maximumFractionDigits: 0
|
|
39
39
|
});
|
|
40
40
|
const isPartCurrency = (part) => part.type === "currency";
|
|
41
|
-
const lazyFormatters =
|
|
41
|
+
const lazyFormatters = React.useMemo(
|
|
42
42
|
() => ({
|
|
43
43
|
original: () => money,
|
|
44
44
|
currencyCode: () => money.currencyCode,
|
|
@@ -78,7 +78,7 @@ function useMoney(money) {
|
|
|
78
78
|
withoutTrailingZerosOrCurrencyFormatter
|
|
79
79
|
]
|
|
80
80
|
);
|
|
81
|
-
return
|
|
81
|
+
return React.useMemo(
|
|
82
82
|
() => new Proxy(lazyFormatters, {
|
|
83
83
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
|
|
84
84
|
get: (target, key) => {
|
|
@@ -90,7 +90,7 @@ function useMoney(money) {
|
|
|
90
90
|
);
|
|
91
91
|
}
|
|
92
92
|
function useLazyFormatter(locale, options) {
|
|
93
|
-
return
|
|
93
|
+
return React.useMemo(() => {
|
|
94
94
|
let memoized;
|
|
95
95
|
return () => memoized ?? (memoized = new Intl.NumberFormat(locale, options));
|
|
96
96
|
}, [locale, options]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n const options = useMemo(\n () => ({\n style: 'currency',\n currency: money.currencyCode,\n }),\n [money.currencyCode],\n );\n\n const defaultFormatter = useLazyFormatter(locale, options);\n\n const nameFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n });\n\n const narrowSymbolFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n });\n\n const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: () => money,\n currencyCode: () => money.currencyCode,\n\n localizedString: () => defaultFormatter().format(amount),\n\n parts: () => defaultFormatter().formatToParts(amount),\n\n withoutTrailingZeros: () =>\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount),\n\n withoutTrailingZerosAndCurrency: () =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: () =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: () =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: () =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: () =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nfunction useLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n return useMemo(() => {\n let memoized: Intl.NumberFormat;\n return () => (memoized ??= new Intl.NumberFormat(locale, options));\n }, [locale, options]);\n}\n"],"names":["useShop","useMemo"],"mappings":";;;;AA0DO,SAAS,SAAS,OAA+B;AACtD,QAAM,EAAC,gBAAgB,gBAAe,IAAIA,gBAAQ,QAAA;AAC5C,QAAA,SAAS,GAAG,mBAAmB;AAErC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,SAAS,WAAW,MAAM,MAAM;AAEtC,QAAM,UAAUC,
|
|
1
|
+
{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {CurrencyCode, MoneyV2} from './storefront-api-types.js';\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n const options = useMemo(\n () => ({\n style: 'currency',\n currency: money.currencyCode,\n }),\n [money.currencyCode],\n );\n\n const defaultFormatter = useLazyFormatter(locale, options);\n\n const nameFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n });\n\n const narrowSymbolFormatter = useLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n });\n\n const withoutTrailingZerosFormatter = useLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const withoutCurrencyFormatter = useLazyFormatter(locale);\n\n const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: () => money,\n currencyCode: () => money.currencyCode,\n\n localizedString: () => defaultFormatter().format(amount),\n\n parts: () => defaultFormatter().formatToParts(amount),\n\n withoutTrailingZeros: () =>\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount),\n\n withoutTrailingZerosAndCurrency: () =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: () =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: () =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: () =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: () =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nfunction useLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n return useMemo(() => {\n let memoized: Intl.NumberFormat;\n return () => (memoized ??= new Intl.NumberFormat(locale, options));\n }, [locale, options]);\n}\n"],"names":["useShop","useMemo"],"mappings":";;;;AA0DO,SAAS,SAAS,OAA+B;AACtD,QAAM,EAAC,gBAAgB,gBAAe,IAAIA,gBAAQ,QAAA;AAC5C,QAAA,SAAS,GAAG,mBAAmB;AAErC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,SAAS,WAAW,MAAM,MAAM;AAEtC,QAAM,UAAUC,MAAA;AAAA,IACd,OAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU,MAAM;AAAA,IAAA;AAAA,IAElB,CAAC,MAAM,YAAY;AAAA,EAAA;AAGf,QAAA,mBAAmB,iBAAiB,QAAQ,OAAO;AAEnD,QAAA,gBAAgB,iBAAiB,QAAQ;AAAA,IAC7C,GAAG;AAAA,IACH,iBAAiB;AAAA,EAAA,CAClB;AAEK,QAAA,wBAAwB,iBAAiB,QAAQ;AAAA,IACrD,GAAG;AAAA,IACH,iBAAiB;AAAA,EAAA,CAClB;AAEK,QAAA,gCAAgC,iBAAiB,QAAQ;AAAA,IAC7D,GAAG;AAAA,IACH,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EAAA,CACxB;AAEK,QAAA,2BAA2B,iBAAiB,MAAM;AAElD,QAAA,0CAA0C,iBAAiB,QAAQ;AAAA,IACvE,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EAAA,CACxB;AAED,QAAM,iBAAiB,CAAC,SACtB,KAAK,SAAS;AAIhB,QAAM,iBAAiBA,MAAA;AAAA,IACrB,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,MAE1B,iBAAiB,MAAM,mBAAmB,OAAO,MAAM;AAAA,MAEvD,OAAO,MAAM,mBAAmB,cAAc,MAAM;AAAA,MAEpD,sBAAsB,MACpB,SAAS,MAAM,IACX,8BAAA,EAAgC,OAAO,MAAM,IAC7C,mBAAmB,OAAO,MAAM;AAAA,MAEtC,iCAAiC,MAC/B,SAAS,MAAM,IACX,wCAAA,EAA0C,OAAO,MAAM,IACvD,2BAA2B,OAAO,MAAM;AAAA,MAE9C,cAAc,MACZ;;AAAA,sCAAgB,cAAc,MAAM,EAAE,KAAK,cAAc,MAAzD,mBAA4D,UAC5D,MAAM;AAAA;AAAA;AAAA,MAER,gBAAgB,MACd;;AAAA,yCAAmB,cAAc,MAAM,EAAE,KAAK,cAAc,MAA5D,mBAA+D,UAC/D,MAAM;AAAA;AAAA;AAAA,MAER,sBAAsB,MAAA;;AACpB,4CAAwB,EAAA,cAAc,MAAM,EAAE,KAAK,cAAc,MAAjE,mBACI,UAAS;AAAA;AAAA;AAAA,MAEf,QAAQ,MACN,iBAAA,EACG,cAAc,MAAM,EACpB;AAAA,QAAO,CAAC,SACP,CAAC,WAAW,YAAY,SAAS,WAAW,SAAS,EAAE;AAAA,UACrD,KAAK;AAAA,QACP;AAAA,MAAA,EAED,IAAI,CAAC,SAAS,KAAK,KAAK,EACxB,KAAK,EAAE;AAAA,IAAA;AAAA,IAEd;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAKK,SAAAA,MAAA;AAAA,IACL,MACE,IAAI,MAAM,gBAA4C;AAAA;AAAA,MAEpD,KAAK,CAAC,QAAQ;;AAAQ,6BAAQ,IAAI,QAAQ,GAAG,MAAvB,mBAA0B,KAAK;AAAA;AAAA,IAAI,CAC1D;AAAA,IACH,CAAC,cAAc;AAAA,EAAA;AAEnB;AAEA,SAAS,iBACP,QACA,SACyB;AACzB,SAAOA,cAAQ,MAAM;AACf,QAAA;AACJ,WAAO,MAAO,wBAAa,IAAI,KAAK,aAAa,QAAQ,OAAO;AAAA,EAAA,GAC/D,CAAC,QAAQ,OAAO,CAAC;AACtB;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const React = require("react");
|
|
4
4
|
const cookie = require("worktop/cookie");
|
|
5
5
|
const cartConstants = require("./cart-constants.js");
|
|
6
6
|
const cookiesUtils = require("./cookies-utils.js");
|
|
@@ -8,7 +8,7 @@ const longTermLength = 60 * 60 * 24 * 360 * 1;
|
|
|
8
8
|
const shortTermLength = 60 * 30;
|
|
9
9
|
function useShopifyCookies(options) {
|
|
10
10
|
const { hasUserConsent = false, domain = "" } = options || {};
|
|
11
|
-
|
|
11
|
+
React.useEffect(() => {
|
|
12
12
|
const cookies = cookiesUtils.getShopifyCookies(document.cookie);
|
|
13
13
|
if (hasUserConsent) {
|
|
14
14
|
setCookie(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n const {hasUserConsent = false, domain = ''} = options || {};\n useEffect(() => {\n const cookies = getShopifyCookies(document.cookie);\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n setCookie(\n SHOPIFY_Y,\n cookies[SHOPIFY_Y] || buildUUID(),\n longTermLength,\n domain,\n );\n setCookie(\n SHOPIFY_S,\n cookies[SHOPIFY_S] || buildUUID(),\n shortTermLength,\n domain,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domain);\n setCookie(SHOPIFY_S, '', 0, domain);\n }\n });\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n"],"names":["useEffect","getShopifyCookies","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAetB,SAAS,kBAAkB,SAA0C;AAC1E,QAAM,EAAC,iBAAiB,OAAO,SAAS,GAAE,IAAI,WAAW;AACzDA,
|
|
1
|
+
{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n const {hasUserConsent = false, domain = ''} = options || {};\n useEffect(() => {\n const cookies = getShopifyCookies(document.cookie);\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n setCookie(\n SHOPIFY_Y,\n cookies[SHOPIFY_Y] || buildUUID(),\n longTermLength,\n domain,\n );\n setCookie(\n SHOPIFY_S,\n cookies[SHOPIFY_S] || buildUUID(),\n shortTermLength,\n domain,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domain);\n setCookie(SHOPIFY_S, '', 0, domain);\n }\n });\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n"],"names":["useEffect","getShopifyCookies","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAetB,SAAS,kBAAkB,SAA0C;AAC1E,QAAM,EAAC,iBAAiB,OAAO,SAAS,GAAE,IAAI,WAAW;AACzDA,QAAAA,UAAU,MAAM;AACR,UAAA,UAAUC,aAAAA,kBAAkB,SAAS,MAAM;AAKjD,QAAI,gBAAgB;AAClB;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKC,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKD,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAAA,IACF,OACK;AACK,gBAAAD,cAAAA,WAAW,IAAI,GAAG,MAAM;AACxB,gBAAAE,cAAAA,WAAW,IAAI,GAAG,MAAM;AAAA,IACpC;AAAA,EAAA,CACD;AACH;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAASC,iBAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
5
|
const CartProvider = require("./CartProvider.js");
|
|
6
6
|
const ProductProvider = require("./ProductProvider.js");
|
|
7
7
|
const BaseButton = require("./BaseButton.js");
|
|
8
8
|
function AddToCartButton(props) {
|
|
9
|
-
const [addingItem, setAddingItem] =
|
|
9
|
+
const [addingItem, setAddingItem] = React.useState(false);
|
|
10
10
|
const {
|
|
11
11
|
variantId: explicitVariantId,
|
|
12
12
|
quantity = 1,
|
|
@@ -21,12 +21,12 @@ function AddToCartButton(props) {
|
|
|
21
21
|
const { selectedVariant } = ProductProvider.useProduct();
|
|
22
22
|
const variantId = explicitVariantId ?? (selectedVariant == null ? void 0 : selectedVariant.id) ?? "";
|
|
23
23
|
const disabled = explicitVariantId === null || variantId === "" || selectedVariant === null || addingItem || passthroughProps.disabled;
|
|
24
|
-
|
|
24
|
+
React.useEffect(() => {
|
|
25
25
|
if (addingItem && status === "idle") {
|
|
26
26
|
setAddingItem(false);
|
|
27
27
|
}
|
|
28
28
|
}, [status, addingItem]);
|
|
29
|
-
const handleAddItem =
|
|
29
|
+
const handleAddItem = React.useCallback(() => {
|
|
30
30
|
setAddingItem(true);
|
|
31
31
|
linesAdd([
|
|
32
32
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {\n BaseButton,\n type CustomBaseButtonProps,\n type BaseButtonProps,\n} from './BaseButton.js';\nimport * as React from 'react';\n\nexport interface AddToCartButtonPropsBase {\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 /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\nexport type AddToCartButtonProps<AsType extends React.ElementType = 'button'> =\n AddToCartButtonPropsBase & BaseButtonProps<AsType>;\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps<AsType>,\n): JSX.Element {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n\n// This is only for documenation purposes, and it is not used in the code.\nexport interface AddToCartButtonPropsForDocs<\n AsType extends React.ElementType = 'button',\n> extends AddToCartButtonPropsBase,\n CustomBaseButtonProps<AsType> {}\n"],"names":["useState","useCart","useProduct","useEffect","useCallback","jsxs","Fragment","jsx","BaseButton"],"mappings":";;;;;;;AAiCO,SAAS,gBACd,OACa;AACb,QAAM,CAAC,YAAY,aAAa,IAAIA,
|
|
1
|
+
{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {\n BaseButton,\n type CustomBaseButtonProps,\n type BaseButtonProps,\n} from './BaseButton.js';\nimport * as React from 'react';\n\nexport interface AddToCartButtonPropsBase {\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 /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\nexport type AddToCartButtonProps<AsType extends React.ElementType = 'button'> =\n AddToCartButtonPropsBase & BaseButtonProps<AsType>;\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps<AsType>,\n): JSX.Element {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n\n// This is only for documenation purposes, and it is not used in the code.\nexport interface AddToCartButtonPropsForDocs<\n AsType extends React.ElementType = 'button',\n> extends AddToCartButtonPropsBase,\n CustomBaseButtonProps<AsType> {}\n"],"names":["useState","useCart","useProduct","useEffect","useCallback","jsxs","Fragment","jsx","BaseButton"],"mappings":";;;;;;;AAiCO,SAAS,gBACd,OACa;AACb,QAAM,CAAC,YAAY,aAAa,IAAIA,eAAkB,KAAK;AACrD,QAAA;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAC,QAAQ,SAAQ,IAAIC,aAAQ,QAAA;AAC7B,QAAA,EAAC,oBAAmBC,gBAAAA;AACpB,QAAA,YAAY,sBAAqB,mDAAiB,OAAM;AACxD,QAAA,WACJ,sBAAsB,QACtB,cAAc,MACd,oBAAoB,QACpB,cACA,iBAAiB;AAEnBC,QAAAA,UAAU,MAAM;AACV,QAAA,cAAc,WAAW,QAAQ;AACnC,oBAAc,KAAK;AAAA,IACrB;AAAA,EAAA,GACC,CAAC,QAAQ,UAAU,CAAC;AAEjB,QAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtC,kBAAc,IAAI;AACT,aAAA;AAAA,MACP;AAAA,QACE;AAAA,QACA,eAAe,aAAa;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EAAA,GACA,CAAC,UAAU,UAAU,WAAW,YAAY,aAAa,CAAC;AAE7D,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAEf;AAAA,MAAA;AAAA,IACH;AAAA,IACC,8BACCD,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,MAAM;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,aAAU;AAAA,QAET,uBAAa,8BAA8B;AAAA,MAAA;AAAA,IAAA,IAE5C;AAAA,EACN,EAAA,CAAA;AAEJ;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
5
|
function BaseButton(props) {
|
|
6
6
|
const {
|
|
7
7
|
as,
|
|
@@ -11,7 +11,7 @@ function BaseButton(props) {
|
|
|
11
11
|
buttonRef,
|
|
12
12
|
...passthroughProps
|
|
13
13
|
} = props;
|
|
14
|
-
const handleOnClick =
|
|
14
|
+
const handleOnClick = React.useCallback(
|
|
15
15
|
(event) => {
|
|
16
16
|
if (onClick) {
|
|
17
17
|
const clickShouldContinue = onClick(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => void | boolean;\n /** A default `onClick` behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => void | boolean;\n /** A `ref` to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>,\n): JSX.Element {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick],\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["useCallback","jsx"],"mappings":";;;;AA0BO,SAAS,WACd,OACa;AACP,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,gBAAgBA,
|
|
1
|
+
{"version":3,"file":"BaseButton.js","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => void | boolean;\n /** A default `onClick` behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => void | boolean;\n /** A `ref` to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>,\n): JSX.Element {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick],\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["useCallback","jsx"],"mappings":";;;;AA0BO,SAAS,WACd,OACa;AACP,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,gBAAgBA,MAAA;AAAA,IACpB,CAAC,UAA4D;AAC3D,UAAI,SAAS;AACL,cAAA,sBAAsB,QAAQ,KAAK;AACzC,YACG,OAAO,wBAAwB,aAC9B,wBAAwB,UAC1B,+BAAO;AAEP;AAAA,MACJ;AAEA,uDAAiB;AAAA,IACnB;AAAA,IACA,CAAC,gBAAgB,OAAO;AAAA,EAAA;AAG1B,QAAM,YAAY,MAAM;AAGtB,SAAAC,+BAAC,aAAU,KAAK,WAAW,SAAS,eAAgB,GAAG,kBACpD,SACH,CAAA;AAEJ;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
5
|
const CartProvider = require("./CartProvider.js");
|
|
6
6
|
const BaseButton = require("./BaseButton.js");
|
|
7
7
|
function BuyNowButton(props) {
|
|
8
8
|
const { cartCreate, checkoutUrl } = CartProvider.useCart();
|
|
9
|
-
const [loading, setLoading] =
|
|
9
|
+
const [loading, setLoading] = React.useState(false);
|
|
10
10
|
const {
|
|
11
11
|
quantity,
|
|
12
12
|
variantId,
|
|
@@ -15,12 +15,12 @@ function BuyNowButton(props) {
|
|
|
15
15
|
children,
|
|
16
16
|
...passthroughProps
|
|
17
17
|
} = props;
|
|
18
|
-
|
|
18
|
+
React.useEffect(() => {
|
|
19
19
|
if (checkoutUrl) {
|
|
20
20
|
window.location.href = checkoutUrl;
|
|
21
21
|
}
|
|
22
22
|
}, [checkoutUrl]);
|
|
23
|
-
const handleBuyNow =
|
|
23
|
+
const handleBuyNow = React.useCallback(() => {
|
|
24
24
|
setLoading(true);
|
|
25
25
|
cartCreate({
|
|
26
26
|
lines: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuyNowButton.js","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 /** 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 onClick,\n attributes,\n children,\n ...passthroughProps\n } = props;\n\n useEffect(() => {\n if (checkoutUrl) {\n window.location.href = checkoutUrl;\n }\n }, [checkoutUrl]);\n\n const handleBuyNow = useCallback(() => {\n setLoading(true);\n cartCreate({\n lines: [\n {\n quantity: quantity ?? 1,\n merchandiseId: variantId,\n attributes,\n },\n ],\n });\n }, [cartCreate, quantity, variantId, attributes]);\n\n return (\n <BaseButton\n disabled={loading ?? passthroughProps.disabled}\n {...passthroughProps}\n onClick={onClick}\n defaultOnClick={handleBuyNow}\n >\n {children}\n </BaseButton>\n );\n}\n\n// This is only for documenation purposes, and it is not used in the code.\nexport interface BuyNowButtonPropsForDocs<\n AsType extends React.ElementType = 'button',\n> extends BuyNowButtonPropsBase,\n CustomBaseButtonProps<AsType> {}\n"],"names":["useCart","useState","useEffect","useCallback","jsx","BaseButton"],"mappings":";;;;;;AA2BO,SAAS,aACd,OACa;AACb,QAAM,EAAC,YAAY,YAAW,IAAIA,aAAQ,QAAA;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAIC,
|
|
1
|
+
{"version":3,"file":"BuyNowButton.js","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 /** 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 onClick,\n attributes,\n children,\n ...passthroughProps\n } = props;\n\n useEffect(() => {\n if (checkoutUrl) {\n window.location.href = checkoutUrl;\n }\n }, [checkoutUrl]);\n\n const handleBuyNow = useCallback(() => {\n setLoading(true);\n cartCreate({\n lines: [\n {\n quantity: quantity ?? 1,\n merchandiseId: variantId,\n attributes,\n },\n ],\n });\n }, [cartCreate, quantity, variantId, attributes]);\n\n return (\n <BaseButton\n disabled={loading ?? passthroughProps.disabled}\n {...passthroughProps}\n onClick={onClick}\n defaultOnClick={handleBuyNow}\n >\n {children}\n </BaseButton>\n );\n}\n\n// This is only for documenation purposes, and it is not used in the code.\nexport interface BuyNowButtonPropsForDocs<\n AsType extends React.ElementType = 'button',\n> extends BuyNowButtonPropsBase,\n CustomBaseButtonProps<AsType> {}\n"],"names":["useCart","useState","useEffect","useCallback","jsx","BaseButton"],"mappings":";;;;;;AA2BO,SAAS,aACd,OACa;AACb,QAAM,EAAC,YAAY,YAAW,IAAIA,aAAQ,QAAA;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAIC,eAAkB,KAAK;AAE/C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJC,QAAAA,UAAU,MAAM;AACd,QAAI,aAAa;AACf,aAAO,SAAS,OAAO;AAAA,IACzB;AAAA,EAAA,GACC,CAAC,WAAW,CAAC;AAEV,QAAA,eAAeC,MAAAA,YAAY,MAAM;AACrC,eAAW,IAAI;AACJ,eAAA;AAAA,MACT,OAAO;AAAA,QACL;AAAA,UACE,UAAU,YAAY;AAAA,UACtB,eAAe;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IAAA,CACD;AAAA,KACA,CAAC,YAAY,UAAU,WAAW,UAAU,CAAC;AAG9C,SAAAC,2BAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,UAAU,WAAW,iBAAiB;AAAA,MACrC,GAAG;AAAA,MACJ;AAAA,MACA,gBAAgB;AAAA,MAEf;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
5
|
const CartProvider = require("./CartProvider.js");
|
|
6
6
|
const BaseButton = require("./BaseButton.js");
|
|
7
7
|
function CartCheckoutButton(props) {
|
|
8
|
-
const [requestedCheckout, setRequestedCheckout] =
|
|
8
|
+
const [requestedCheckout, setRequestedCheckout] = React.useState(false);
|
|
9
9
|
const { status, checkoutUrl } = CartProvider.useCart();
|
|
10
10
|
const { children, ...passthroughProps } = props;
|
|
11
|
-
|
|
11
|
+
React.useEffect(() => {
|
|
12
12
|
if (requestedCheckout && checkoutUrl && status === "idle") {
|
|
13
13
|
window.location.href = checkoutUrl;
|
|
14
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCheckoutButton.js","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {\n BaseButton,\n type BaseButtonProps,\n type CustomBaseButtonProps,\n} from './BaseButton.js';\n\ntype ChildrenProps = {\n /** A `ReactNode` element. */\n children: ReactNode;\n};\ntype CartCheckoutButtonProps = Omit<BaseButtonProps<'button'>, 'onClick'> &\n ChildrenProps;\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n props: CartCheckoutButtonProps,\n): JSX.Element {\n const [requestedCheckout, setRequestedCheckout] = useState(false);\n const {status, checkoutUrl} = useCart();\n const {children, ...passthroughProps} = props;\n\n useEffect(() => {\n if (requestedCheckout && checkoutUrl && status === 'idle') {\n window.location.href = checkoutUrl;\n }\n }, [requestedCheckout, status, checkoutUrl]);\n\n return (\n <BaseButton\n {...passthroughProps}\n disabled={requestedCheckout || passthroughProps.disabled}\n onClick={(): void => setRequestedCheckout(true)}\n >\n {children}\n </BaseButton>\n );\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n// we ignore this issue because it makes the documentation look better than the equivalent `type` that it wants us to convert to\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CartCheckoutButtonPropsForDocs<\n AsType extends React.ElementType = 'button',\n> extends Omit<CustomBaseButtonProps<AsType>, 'onClick'> {}\n"],"names":["useState","useCart","useEffect","jsx","BaseButton"],"mappings":";;;;;;AAmBO,SAAS,mBACd,OACa;AACb,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,
|
|
1
|
+
{"version":3,"file":"CartCheckoutButton.js","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {\n BaseButton,\n type BaseButtonProps,\n type CustomBaseButtonProps,\n} from './BaseButton.js';\n\ntype ChildrenProps = {\n /** A `ReactNode` element. */\n children: ReactNode;\n};\ntype CartCheckoutButtonProps = Omit<BaseButtonProps<'button'>, 'onClick'> &\n ChildrenProps;\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n props: CartCheckoutButtonProps,\n): JSX.Element {\n const [requestedCheckout, setRequestedCheckout] = useState(false);\n const {status, checkoutUrl} = useCart();\n const {children, ...passthroughProps} = props;\n\n useEffect(() => {\n if (requestedCheckout && checkoutUrl && status === 'idle') {\n window.location.href = checkoutUrl;\n }\n }, [requestedCheckout, status, checkoutUrl]);\n\n return (\n <BaseButton\n {...passthroughProps}\n disabled={requestedCheckout || passthroughProps.disabled}\n onClick={(): void => setRequestedCheckout(true)}\n >\n {children}\n </BaseButton>\n );\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n// we ignore this issue because it makes the documentation look better than the equivalent `type` that it wants us to convert to\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CartCheckoutButtonPropsForDocs<\n AsType extends React.ElementType = 'button',\n> extends Omit<CustomBaseButtonProps<AsType>, 'onClick'> {}\n"],"names":["useState","useCart","useEffect","jsx","BaseButton"],"mappings":";;;;;;AAmBO,SAAS,mBACd,OACa;AACb,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,eAAS,KAAK;AAChE,QAAM,EAAC,QAAQ,YAAW,IAAIC,aAAQ,QAAA;AACtC,QAAM,EAAC,UAAU,GAAG,iBAAA,IAAoB;AAExCC,QAAAA,UAAU,MAAM;AACV,QAAA,qBAAqB,eAAe,WAAW,QAAQ;AACzD,aAAO,SAAS,OAAO;AAAA,IACzB;AAAA,EACC,GAAA,CAAC,mBAAmB,QAAQ,WAAW,CAAC;AAGzC,SAAAC,2BAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,qBAAqB,iBAAiB;AAAA,MAChD,SAAS,MAAY,qBAAqB,IAAI;AAAA,MAE7C;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
5
|
-
const CartLineContext =
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const CartLineContext = React.createContext(null);
|
|
6
6
|
function useCartLine() {
|
|
7
|
-
const context =
|
|
7
|
+
const context = React.useContext(CartLineContext);
|
|
8
8
|
if (context == null) {
|
|
9
9
|
throw new Error("Expected a cart line context but none was found");
|
|
10
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartLineProvider.js","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAMa,MAAA,kBAAkBA,
|
|
1
|
+
{"version":3,"file":"CartLineProvider.js","sources":["../../src/CartLineProvider.tsx"],"sourcesContent":["import {useContext, createContext, type ReactNode} from 'react';\nimport type {CartLine} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ntype CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;\n\nexport const CartLineContext = createContext<CartLinePartialDeep | null>(null);\n\n/**\n * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.\n */\nexport function useCartLine(): CartLinePartialDeep {\n const context = useContext(CartLineContext);\n\n if (context == null) {\n throw new Error('Expected a cart line context but none was found');\n }\n\n return context;\n}\n\ntype CartLineProviderProps = {\n /** Any `ReactNode` elements. */\n children: ReactNode;\n /** A cart line object. */\n line: CartLinePartialDeep;\n};\n\n/**\n * The `CartLineProvider` component creates a context for using a cart line.\n */\nexport function CartLineProvider({\n children,\n line,\n}: CartLineProviderProps): JSX.Element {\n return (\n <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>\n );\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAMa,MAAA,kBAAkBA,oBAA0C,IAAI;AAKtE,SAAS,cAAmC;AAC3C,QAAA,UAAUC,iBAAW,eAAe;AAE1C,MAAI,WAAW,MAAM;AACb,UAAA,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEO,SAAA;AACT;AAYO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAAuC;AACrC,wCACG,gBAAgB,UAAhB,EAAyB,OAAO,MAAO,SAAS,CAAA;AAErD;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
5
|
const CartProvider = require("./CartProvider.js");
|
|
6
6
|
const CartLineProvider = require("./CartLineProvider.js");
|
|
7
7
|
const BaseButton = require("./BaseButton.js");
|
|
@@ -9,7 +9,7 @@ function CartLineQuantityAdjustButton(props) {
|
|
|
9
9
|
const { status, linesRemove, linesUpdate } = CartProvider.useCart();
|
|
10
10
|
const cartLine = CartLineProvider.useCartLine();
|
|
11
11
|
const { children, adjust, onClick, ...passthroughProps } = props;
|
|
12
|
-
const handleAdjust =
|
|
12
|
+
const handleAdjust = React.useCallback(() => {
|
|
13
13
|
if (adjust === "remove") {
|
|
14
14
|
linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
|
|
15
15
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartLineQuantityAdjustButton.js","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button',\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button',\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n {...passthroughProps}\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":["useCart","useCartLine","useCallback","jsx","BaseButton"],"mappings":";;;;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAeA,aAAQ,QAAA;AACnD,QAAM,WAAWC,iBAAAA;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAeC,
|
|
1
|
+
{"version":3,"file":"CartLineQuantityAdjustButton.js","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n AsType extends React.ElementType = 'button',\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n AsType extends React.ElementType = 'button',\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n const {status, linesRemove, linesUpdate} = useCart();\n const cartLine = useCartLine();\n const {children, adjust, onClick, ...passthroughProps} = props;\n\n const handleAdjust = useCallback(() => {\n if (adjust === 'remove') {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const quantity =\n adjust === 'decrease'\n ? (cartLine?.quantity ?? 0) - 1\n : (cartLine?.quantity ?? 0) + 1;\n\n if (quantity <= 0) {\n linesRemove([cartLine?.id ?? '']);\n return;\n }\n\n const lineUpdate = {\n id: cartLine?.id ?? '',\n quantity,\n attributes: (cartLine?.attributes ??\n []) as CartLineUpdateInput['attributes'],\n } satisfies CartLineUpdateInput;\n\n linesUpdate([lineUpdate]);\n }, [\n adjust,\n cartLine?.attributes,\n cartLine?.id,\n cartLine?.quantity,\n linesRemove,\n linesUpdate,\n ]);\n\n return (\n <BaseButton\n {...passthroughProps}\n onClick={onClick}\n defaultOnClick={handleAdjust}\n disabled={\n typeof passthroughProps.disabled !== 'undefined'\n ? passthroughProps.disabled\n : status !== 'idle'\n }\n >\n {children}\n </BaseButton>\n );\n}\n"],"names":["useCart","useCartLine","useCallback","jsx","BaseButton"],"mappings":";;;;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAeA,aAAQ,QAAA;AACnD,QAAM,WAAWC,iBAAAA;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAeC,MAAAA,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAGhB;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
5
|
const useCartAPIStateMachine = require("./useCartAPIStateMachine.js");
|
|
6
6
|
const cartConstants = require("./cart-constants.js");
|
|
7
7
|
const cartQueries = require("./cart-queries.js");
|
|
8
|
-
const CartContext =
|
|
8
|
+
const CartContext = React.createContext(null);
|
|
9
9
|
function useCart() {
|
|
10
|
-
const context =
|
|
10
|
+
const context = React.useContext(CartContext);
|
|
11
11
|
if (!context) {
|
|
12
12
|
throw new Error("Expected a Cart Context, but no Cart Context was found");
|
|
13
13
|
}
|
|
@@ -40,9 +40,9 @@ function CartProvider({
|
|
|
40
40
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
41
41
|
if (countryCode)
|
|
42
42
|
countryCode = countryCode.toUpperCase();
|
|
43
|
-
const [prevCountryCode, setPrevCountryCode] =
|
|
44
|
-
const [prevCustomerAccessToken, setPrevCustomerAccessToken] =
|
|
45
|
-
const customerOverridesCountryCode =
|
|
43
|
+
const [prevCountryCode, setPrevCountryCode] = React.useState(countryCode);
|
|
44
|
+
const [prevCustomerAccessToken, setPrevCustomerAccessToken] = React.useState(customerAccessToken);
|
|
45
|
+
const customerOverridesCountryCode = React.useRef(false);
|
|
46
46
|
if (prevCountryCode !== countryCode || prevCustomerAccessToken !== customerAccessToken) {
|
|
47
47
|
setPrevCountryCode(countryCode);
|
|
48
48
|
setPrevCustomerAccessToken(customerAccessToken);
|
|
@@ -146,11 +146,11 @@ function CartProvider({
|
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
});
|
|
149
|
-
const cartReady =
|
|
149
|
+
const cartReady = React.useRef(false);
|
|
150
150
|
const cartCompleted = cartState.matches("cartCompleted");
|
|
151
151
|
const countryChanged = (cartState.value === "idle" || cartState.value === "error" || cartState.value === "cartCompleted") && countryCode !== ((_c = (_b = (_a = cartState == null ? void 0 : cartState.context) == null ? void 0 : _a.cart) == null ? void 0 : _b.buyerIdentity) == null ? void 0 : _c.countryCode) && !cartState.context.errors;
|
|
152
|
-
const fetchingFromStorage =
|
|
153
|
-
|
|
152
|
+
const fetchingFromStorage = React.useRef(false);
|
|
153
|
+
React.useEffect(() => {
|
|
154
154
|
if (!cartReady.current && !fetchingFromStorage.current) {
|
|
155
155
|
if (!cart && storageAvailable("localStorage")) {
|
|
156
156
|
fetchingFromStorage.current = true;
|
|
@@ -167,7 +167,7 @@ function CartProvider({
|
|
|
167
167
|
cartReady.current = true;
|
|
168
168
|
}
|
|
169
169
|
}, [cart, cartReady, cartSend]);
|
|
170
|
-
|
|
170
|
+
React.useEffect(() => {
|
|
171
171
|
if (!countryChanged || customerOverridesCountryCode.current)
|
|
172
172
|
return;
|
|
173
173
|
cartSend({
|
|
@@ -181,7 +181,7 @@ function CartProvider({
|
|
|
181
181
|
customerOverridesCountryCode,
|
|
182
182
|
cartSend
|
|
183
183
|
]);
|
|
184
|
-
const onCartReadySend =
|
|
184
|
+
const onCartReadySend = React.useCallback(
|
|
185
185
|
(cartEvent) => {
|
|
186
186
|
if (!cartReady.current) {
|
|
187
187
|
return console.warn("Cart isn't ready yet");
|
|
@@ -190,7 +190,7 @@ function CartProvider({
|
|
|
190
190
|
},
|
|
191
191
|
[cartSend]
|
|
192
192
|
);
|
|
193
|
-
|
|
193
|
+
React.useEffect(() => {
|
|
194
194
|
var _a2, _b2, _c2;
|
|
195
195
|
if (((_b2 = (_a2 = cartState == null ? void 0 : cartState.context) == null ? void 0 : _a2.cart) == null ? void 0 : _b2.id) && storageAvailable("localStorage")) {
|
|
196
196
|
try {
|
|
@@ -203,7 +203,7 @@ function CartProvider({
|
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
}, [(_e = (_d = cartState == null ? void 0 : cartState.context) == null ? void 0 : _d.cart) == null ? void 0 : _e.id]);
|
|
206
|
-
|
|
206
|
+
React.useEffect(() => {
|
|
207
207
|
if (cartCompleted && storageAvailable("localStorage")) {
|
|
208
208
|
try {
|
|
209
209
|
window.localStorage.removeItem(cartConstants.CART_ID_STORAGE_KEY);
|
|
@@ -212,7 +212,7 @@ function CartProvider({
|
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
}, [cartCompleted]);
|
|
215
|
-
const cartCreate =
|
|
215
|
+
const cartCreate = React.useCallback(
|
|
216
216
|
(cartInput) => {
|
|
217
217
|
var _a2, _b2;
|
|
218
218
|
if (countryCode && !((_a2 = cartInput.buyerIdentity) == null ? void 0 : _a2.countryCode)) {
|
|
@@ -235,7 +235,7 @@ function CartProvider({
|
|
|
235
235
|
[countryCode, customerAccessToken, onCartReadySend]
|
|
236
236
|
);
|
|
237
237
|
const cartDisplayState = useDelayedStateUntilHydration(cartState);
|
|
238
|
-
const cartContextValue =
|
|
238
|
+
const cartContextValue = React.useMemo(() => {
|
|
239
239
|
var _a2, _b2, _c2, _d2;
|
|
240
240
|
return {
|
|
241
241
|
...((_a2 = cartDisplayState == null ? void 0 : cartDisplayState.context) == null ? void 0 : _a2.cart) ?? { lines: [], attributes: [] },
|
|
@@ -338,17 +338,17 @@ function transposeStatus(status) {
|
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
340
|
function useDelayedStateUntilHydration(state) {
|
|
341
|
-
const [isPending, startTransition] =
|
|
342
|
-
const [delayedState, setDelayedState] =
|
|
343
|
-
const firstTimePending =
|
|
341
|
+
const [isPending, startTransition] = React.useTransition();
|
|
342
|
+
const [delayedState, setDelayedState] = React.useState(state);
|
|
343
|
+
const firstTimePending = React.useRef(false);
|
|
344
344
|
if (isPending) {
|
|
345
345
|
firstTimePending.current = true;
|
|
346
346
|
}
|
|
347
|
-
const firstTimePendingFinished =
|
|
347
|
+
const firstTimePendingFinished = React.useRef(false);
|
|
348
348
|
if (!isPending && firstTimePending.current) {
|
|
349
349
|
firstTimePendingFinished.current = true;
|
|
350
350
|
}
|
|
351
|
-
|
|
351
|
+
React.useEffect(() => {
|
|
352
352
|
startTransition(() => {
|
|
353
353
|
if (!firstTimePendingFinished.current) {
|
|
354
354
|
setDelayedState(state);
|