@gem-sdk/components 3.0.0-pre-production.14 → 3.0.1

package/dist/cjs/product/components/ProductButton.js

@@ -1,486 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var Button = require('../../button/components/Button.js');
-var Text = require('../../text/components/Text.js');
-var tracking = require('../helpers/tracking.js');
-var React = require('react');
-var useNotification = require('../../notification/hooks/use-notification.js');
-require('../../notification/components/Notice.js');
-var ProductPrice = require('./ProductPrice.js');
-
-const NODE_PRICE_EMPTY = null;
-const minusIcon = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 10C16 10.2486 15.9241 10.4871 15.7891 10.6629C15.6541 10.8387 15.471 10.9375 15.28 10.9375H4.72C4.52904 10.9375 4.34591 10.8387 4.21088 10.6629C4.07586 10.4871 4 10.2486 4 10C4 9.75136 4.07586 9.5129 4.21088 9.33709C4.34591 9.16127 4.52904 9.0625 4.72 9.0625H15.28C15.471 9.0625 15.6541 9.16127 15.7891 9.33709C15.9241 9.5129 16 9.75136 16 10Z" fill="currentColor"/>
-</svg>`;
-const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, advanced, children })=>{
-    const { successColor, successTypo, errorColor, errorTypo, isCustomOutOfStock, oosBackground, oosTextColor, oosBorder, oosEnableShadow, oosShadow, oosRounded, oosIconColor, ...buttonStyles } = styles ?? {};
-    const { storefrontToken } = core.useStoreFront();
-    const { currency } = core.useCurrency();
-    const mode = core.useEditorMode();
-    const { cartId, updateCartId } = core.useCartId();
-    const { openCart } = core.useCartUI();
-    const [noti, notiComponent] = useNotification.default({
-        closable: true,
-        maxCount: 3
-    });
-    const { trigger } = core.useInteraction();
-    const getErrorMessage = (customMessage)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
-            children: /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
-                setting: {
-                    text: customMessage || setting?.errorMessage,
-                    excludeFlex: true
-                },
-                styles: {
-                    typo: styles?.errorTypo,
-                    color: {
-                        normal: styles?.errorColor
-                    }
-                }
-            })
-        });
-    const dispatchEventAddToCart = ()=>{
-        const element = document.querySelector(`[data-id="${builderProps?.uid}"]`);
-        if (!element) return;
-        const gpInteractionAfterSubmit = JSON.parse(element?.getAttribute('gp-interaction-after-submit') ?? '{}');
-        if (Object.keys(gpInteractionAfterSubmit).length <= 0) return;
-        Object.entries(gpInteractionAfterSubmit).map(([value])=>{
-            trigger({
-                event: 'gp:after-submit',
-                selector: `[data-id="${builderProps?.uid}"]`,
-                data: Number(value),
-                element
-            });
-        });
-    };
-    const onSuccess = React.useCallback((result)=>{
-        if (setting?.actionEffect === 'continue-shopping') {
-            if (!setting?.enableSuccessMessage) return;
-            noti.open({
-                content: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
-                        setting: {
-                            text: setting?.successMessage,
-                            excludeFlex: true
-                        },
-                        styles: {
-                            typo: styles?.successTypo,
-                            color: {
-                                normal: styles?.successColor
-                            }
-                        }
-                    })
-                }),
-                placement: 'top'
-            });
-            openCart();
-        }
-        if (setting?.actionEffect !== 'buy-now') {
-            updateCartId(result.id);
-        }
-        if (setting?.actionEffect === 'buy-now') {
-            if (result.checkoutUrl) {
-                window.location.href = storefrontToken ? `${result.checkoutUrl}?access_token=${storefrontToken}` : result.checkoutUrl;
-            }
-        } else if (setting?.actionEffect === 'open-cart-drawer') {
-            openCart();
-        } else if (setting?.actionEffect === 'go-to-url' && setting.customURL?.link) {
-            if (setting.customURL?.target === '_blank') {
-                window.open(setting.customURL.link, '_blank');
-            } else {
-                window.location.href = setting.customURL.link;
-            }
-        }
-        dispatchEventAddToCart();
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        setting?.actionEffect,
-        setting?.customURL?.link,
-        setting?.customURL?.target,
-        setting?.enableSuccessMessage,
-        setting?.successMessage,
-        noti,
-        styles?.successTypo,
-        styles?.successColor,
-        openCart,
-        updateCartId,
-        storefrontToken
-    ]);
-    const { isMutating: createCartLoading, trigger: createCart } = core.useCreateCart({
-        onSuccess,
-        onError: ()=>{
-            if (!setting?.enableErrorMessage) return;
-            noti.open({
-                content: getErrorMessage(),
-                placement: 'top'
-            });
-        }
-    });
-    const { isMutating: addToCartLoading, trigger: addToCartAction } = core.useAddToCart({
-        onSuccess,
-        onError: (error)=>{
-            if (!setting?.enableErrorMessage) return;
-            // https://shopify.dev/docs/api/storefront/2024-10/enums/CartErrorCode
-            const firstError = error[0];
-            if (firstError && firstError.code === 'INVALID') {
-                return noti.open({
-                    content: getErrorMessage(firstError.message),
-                    placement: 'top'
-                });
-            }
-            noti.open({
-                content: getErrorMessage(),
-                placement: 'top'
-            });
-        }
-    });
-    const currentVariant = core.useCurrentVariant();
-    const { quantity } = core.useQuantity();
-    const product = core.useProduct();
-    const properties = core.useProductProperties();
-    const updateProductSubmit = core.useProductStore((s)=>s.updateIsSubmit);
-    const { hasPreSelected } = core.useHasPreSelected();
-    const addToCart = React.useCallback(()=>{
-        if (!currentVariant?.baseID || !quantity || !product?.baseID || hasPreSelected !== undefined && hasPreSelected === false || mode === 'edit') return;
-        const checkInvalid = properties?.some((item)=>item.required && !item.value);
-        updateProductSubmit(true);
-        if (checkInvalid) return;
-        const attributes = properties?.filter((v)=>!!v.value)?.map((item)=>({
-                key: item.key,
-                value: item.value
-            }));
-        tracking.addToCartTracking({
-            id: product?.baseID,
-            name: product?.title,
-            sku: currentVariant.sku,
-            quantity,
-            price: currentVariant?.price,
-            variant: currentVariant.title,
-            brand: product?.vendor,
-            currency
-        });
-        if (setting?.actionEffect === 'buy-now') {
-            createCart({
-                items: [
-                    {
-                        quantity,
-                        variantId: currentVariant.baseID,
-                        attributes
-                    }
-                ]
-            });
-        } else {
-            if (cartId) {
-                addToCartAction({
-                    cartId,
-                    lines: [
-                        {
-                            quantity,
-                            variantId: currentVariant.baseID,
-                            attributes
-                        }
-                    ]
-                });
-            } else {
-                createCart({
-                    items: [
-                        {
-                            quantity,
-                            variantId: currentVariant.baseID,
-                            attributes
-                        }
-                    ]
-                });
-            }
-        }
-    }, [
-        currentVariant?.baseID,
-        currentVariant?.price,
-        currentVariant?.title,
-        currentVariant?.sku,
-        quantity,
-        product?.baseID,
-        product?.title,
-        product?.vendor,
-        mode,
-        properties,
-        updateProductSubmit,
-        currency,
-        setting?.actionEffect,
-        createCart,
-        cartId,
-        addToCartAction,
-        hasPreSelected
-    ]);
-    const isInStock = core.useCurrentVariantInStock();
-    const isDisable = !isInStock || createCartLoading || addToCartLoading;
-    const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
-    if (!isInStock && isCustomOutOfStock) {
-        buttonStyles.backgroundColor = {
-            normal: oosBackground
-        };
-        buttonStyles.textColor = {
-            normal: oosTextColor
-        };
-        buttonStyles.borderBtn = oosBorder;
-        buttonStyles.hasBoxShadowBtn = {
-            normal: oosEnableShadow
-        };
-        buttonStyles.boxShadowBtn = {
-            normal: oosShadow
-        };
-        buttonStyles.roundedBtn = {
-            normal: oosRounded
-        };
-    }
-    const generateProductPrice = React.useCallback((priceType, settings)=>{
-        const { lineThrough, typo, hasBoxShadowPrice, boxShadowPrice } = settings;
-        return /*#__PURE__*/ jsxRuntime.jsx(ProductPrice.default, {
-            styles: {
-                priceType,
-                lineThrough,
-                typo,
-                parentTextColor: styles?.textColor
-            },
-            setting: {
-                hasBoxShadowPrice,
-                boxShadowPrice,
-                opacityPrice: settings.opacityPrice
-            },
-            classNames: "gp-button-price gp-transition-colors gp-duration-300"
-        });
-    }, [
-        styles?.textColor
-    ]);
-    const composePriceOnlyLayout = React.useMemo(()=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "gp-product-dot-price gp-transition-colors gp-duration-300",
-                    style: {
-                        ...core.getGlobalColorStateStyle('c', styles?.textColor),
-                        ...core.makeStyle({
-                            mr: '8px',
-                            ml: '8px',
-                            op: `${setting?.opacityPrice?.compareAtPrice}%`
-                        })
-                    },
-                    dangerouslySetInnerHTML: {
-                        __html: minusIcon
-                    }
-                }),
-                generateProductPrice('regular', {
-                    lineThrough: false,
-                    typo: setting?.priceTypo?.price,
-                    hasBoxShadowPrice: setting?.hasShadowPrice?.price,
-                    boxShadowPrice: setting?.shadowPrice?.price,
-                    opacityPrice: 100
-                })
-            ]
-        }), [
-        generateProductPrice,
-        setting?.hasShadowPrice?.price,
-        setting?.opacityPrice?.compareAtPrice,
-        setting?.priceTypo?.price,
-        setting?.shadowPrice?.price,
-        styles?.textColor
-    ]);
-    const composePriceAfter = React.useMemo(()=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "gp-product-dot-price gp-transition-colors gp-duration-300",
-                    style: {
-                        ...core.getGlobalColorStateStyle('c', styles?.textColor),
-                        ...core.makeStyle({
-                            mr: '8px',
-                            ml: '8px',
-                            op: `${setting?.opacityPrice?.compareAtPrice}%`
-                        })
-                    },
-                    dangerouslySetInnerHTML: {
-                        __html: minusIcon
-                    }
-                }),
-                generateProductPrice('compare', {
-                    lineThrough: true,
-                    typo: setting?.priceTypo?.compareAtPrice,
-                    hasBoxShadowPrice: setting?.hasShadowPrice?.compareAtPrice,
-                    boxShadowPrice: setting?.shadowPrice?.compareAtPrice,
-                    opacityPrice: setting?.opacityPrice?.compareAtPrice
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    style: {
-                        '--mr': '2px',
-                        '--ml': '2px'
-                    }
-                }),
-                generateProductPrice('regular', {
-                    lineThrough: false,
-                    typo: setting?.priceTypo?.price,
-                    hasBoxShadowPrice: setting?.hasShadowPrice?.price,
-                    boxShadowPrice: setting?.shadowPrice?.price,
-                    opacityPrice: 100
-                })
-            ]
-        }), [
-        generateProductPrice,
-        setting?.hasShadowPrice?.compareAtPrice,
-        setting?.hasShadowPrice?.price,
-        setting?.opacityPrice?.compareAtPrice,
-        setting?.priceTypo?.compareAtPrice,
-        setting?.priceTypo?.price,
-        setting?.shadowPrice?.compareAtPrice,
-        setting?.shadowPrice?.price,
-        styles?.textColor
-    ]);
-    const composePriceBefore = React.useMemo(()=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "gp-product-dot-price gp-transition-colors gp-duration-300",
-                    style: {
-                        ...core.getGlobalColorStateStyle('c', styles?.textColor),
-                        ...core.makeStyle({
-                            mr: '8px',
-                            ml: '8px',
-                            op: `${setting?.opacityPrice?.compareAtPrice}%`
-                        })
-                    },
-                    dangerouslySetInnerHTML: {
-                        __html: minusIcon
-                    }
-                }),
-                generateProductPrice('regular', {
-                    lineThrough: false,
-                    typo: setting?.priceTypo?.price,
-                    hasBoxShadowPrice: setting?.hasShadowPrice?.price,
-                    boxShadowPrice: setting?.shadowPrice?.price,
-                    opacityPrice: 100
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    style: {
-                        '--mr': '2px',
-                        '--ml': '2px'
-                    }
-                }),
-                generateProductPrice('compare', {
-                    lineThrough: true,
-                    typo: setting?.priceTypo?.compareAtPrice,
-                    hasBoxShadowPrice: setting?.hasShadowPrice?.compareAtPrice,
-                    boxShadowPrice: setting?.shadowPrice?.compareAtPrice,
-                    opacityPrice: setting?.opacityPrice?.compareAtPrice
-                })
-            ]
-        }), [
-        generateProductPrice,
-        setting?.hasShadowPrice?.compareAtPrice,
-        setting?.hasShadowPrice?.price,
-        setting?.opacityPrice?.compareAtPrice,
-        setting?.priceTypo?.compareAtPrice,
-        setting?.priceTypo?.price,
-        setting?.shadowPrice?.compareAtPrice,
-        setting?.shadowPrice?.price,
-        styles?.textColor
-    ]);
-    const composeNodePrice = React.useMemo(()=>{
-        if (!setting?.buttonLayout) return NODE_PRICE_EMPTY;
-        if ([
-            'cart-only',
-            'cart-icon'
-        ].includes(setting?.buttonLayout)) return NODE_PRICE_EMPTY;
-        if (!setting?.priceLayout) {
-            return composePriceOnlyLayout;
-        }
-        switch(setting?.priceLayout){
-            case 'price-only':
-                return composePriceOnlyLayout;
-            case 'price-after':
-                return composePriceAfter;
-            case 'price-before':
-                return composePriceBefore;
-        }
-    }, [
-        composePriceBefore,
-        composePriceAfter,
-        composePriceOnlyLayout,
-        setting?.buttonLayout,
-        setting?.priceLayout
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(Button.default, {
-                className: core.cls({
-                    'gp-cursor-default gp-opacity-30': isDisable
-                }),
-                builderProps: builderProps,
-                builderAttrs: {
-                    ...builderAttrs,
-                    'data-is-in-stock': isInStock
-                },
-                advanced: advanced,
-                setting: {
-                    label,
-                    htmlType: 'button',
-                    loading: addToCartLoading || createCartLoading,
-                    iconAlign: setting?.iconAlign,
-                    iconSvg: setting?.iconSvg,
-                    iconVisible: setting?.buttonLayout === 'cart-price-icon' || setting?.buttonLayout === 'cart-icon',
-                    shouldClearSpace: setting?.shouldClearSpace
-                },
-                style: style,
-                styles: {
-                    ...buttonStyles,
-                    size: {
-                        desktop: '1em',
-                        tablet: '1em',
-                        mobile: '1em'
-                    }
-                },
-                onClick: addToCart,
-                nodePrice: composeNodePrice,
-                children: [
-                    children,
-                    setting?.messageLayout === 'inline' && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: "gp-w-full gp-flex gp-gap-2 gp-items-center gp-justify-center",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: "gp-w-4 gp-h-4",
-                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                                    width: "16",
-                                    height: "16",
-                                    viewBox: "0 0 16 16",
-                                    fill: "none",
-                                    xmlns: "http://www.w3.org/2000/svg",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                        d: "M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM6.4 11.2L3.8 8.6L4.5 7.9L6.4 9.8L11.5 4.8L12.2 5.5L6.4 11.2Z",
-                                        fill: "#00C853"
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: "gp-w-fit",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
-                                    setting: {
-                                        text: setting?.successMessage,
-                                        htmlTag: 'div'
-                                    },
-                                    styles: {
-                                        typo: styles?.successTypo,
-                                        color: {
-                                            normal: styles?.successColor
-                                        }
-                                    }
-                                })
-                            })
-                        ]
-                    })
-                ]
-            }),
-            notiComponent
-        ]
-    });
-};
-
-exports.default = ProductButton;