@gem-sdk/core 1.63.17 → 2.0.0-dev.157

package/dist/esm/hooks/animation/useAnimationTarget.js

@@ -1,3 +1,4 @@
+'use client';
 import { useRef, useCallback } from 'react';
 import { useAnimationConfig } from './useAnimationConfig.js';
 

package/dist/esm/hooks/animation/useApplyAnimation.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect } from 'react';
 import { useAnimations } from '../useAnimations.js';
 import { useAnimationTarget } from './useAnimationTarget.js';

package/dist/esm/hooks/articles/useArticlesQuery.js

@@ -1,3 +1,4 @@
+'use client';
 import { ArticlesDocument } from '../../graphql/queries/articles.generated.js';
 import { useFetchHandle } from '../useFetchHandle.js';
 import useSWR from 'swr';

package/dist/esm/hooks/cart/use-add-to-cart.js

@@ -1,3 +1,4 @@
+'use client';
 import { addToCartOperation } from '@gem-sdk/adapter-shopify';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';

package/dist/esm/hooks/cart/use-cart-data.js

@@ -1,3 +1,4 @@
+'use client';
 import { getCartOperation } from '@gem-sdk/adapter-shopify';
 import useSWR from 'swr';
 import { useStoreFront } from '../shop.js';

package/dist/esm/hooks/cart/use-cart-discount-codes-update.js

@@ -1,3 +1,4 @@
+'use client';
 import { cartDiscountCodesUpdateOperation } from '@gem-sdk/adapter-shopify';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';

package/dist/esm/hooks/cart/use-cart-note-update.js

@@ -1,3 +1,4 @@
+'use client';
 import { cartNoteUpdateOperation } from '@gem-sdk/adapter-shopify';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';

package/dist/esm/hooks/cart/use-create-cart.js

@@ -1,3 +1,4 @@
+'use client';
 import { createCartOperation } from '@gem-sdk/adapter-shopify';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';

package/dist/esm/hooks/cart/use-remove-cart-item.js

@@ -1,3 +1,4 @@
+'use client';
 import { removeCartItemOperation } from '@gem-sdk/adapter-shopify';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';

package/dist/esm/hooks/cart/use-update-cart-item.js

@@ -1,3 +1,4 @@
+'use client';
 import { updateCartLineOperation } from '@gem-sdk/adapter-shopify';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';

package/dist/esm/hooks/shop/use-collection-query.js

@@ -1,3 +1,4 @@
+'use client';
 import useSWR from 'swr';
 import { getCollection } from '../../helpers/queries/get-collection.js';
 import { useIsSampleProduct, useIsStorefrontProduct } from '../shop.js';

package/dist/esm/hooks/shop/use-collections-query.js

@@ -1,3 +1,4 @@
+'use client';
 import useSWR from 'swr';
 import { getCollections } from '../../helpers/queries/get-collections.js';
 import { useFetchHandle } from '../useFetchHandle.js';

package/dist/esm/hooks/shop/use-product-query.js

@@ -1,3 +1,4 @@
+'use client';
 import useSWR from 'swr';
 import { getProduct } from '../../helpers/queries/get-product.js';
 import { useIsSampleProduct, useIsStorefrontProduct } from '../shop.js';

package/dist/esm/hooks/shop/use-products-query.js

@@ -1,3 +1,4 @@
+'use client';
 import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
 import { getProducts, getProductQueryAll, getListProductByVariables } from '../../helpers/queries/get-products.js';

package/dist/esm/hooks/shop/useShopifyLink.js

@@ -0,0 +1,45 @@
+'use client';
+import { useMemo } from 'react';
+import { useShopStore } from '../../contexts/ShopContext.js';
+
+const useShopifyLink = ({ productId, articleId })=>{
+    const storefrontUrl = useShopStore((s)=>s.storefrontUrl);
+    //
+    // const productId = useMemo(() => {
+    //   const ele = document.querySelector(`[data-uid="${parentProductUid}"]`);
+    //   return ele?.getAttribute('data-product-id');
+    // }, [parentProductUid]);
+    const shopName = useMemo(()=>{
+        const pattern = /^(?:https?:\/\/)?([^/]+)\.myshopify\.com/;
+        if (storefrontUrl) {
+            return storefrontUrl.match(pattern)?.[1];
+        }
+        return '';
+    }, [
+        storefrontUrl
+    ]);
+    const linkShopDefault = useMemo(()=>{
+        return `https://admin.shopify.com/store/${shopName}`;
+    }, [
+        shopName
+    ]);
+    const linkEditProduct = useMemo(()=>{
+        return productId ? `${linkShopDefault}/products/${productId}` : '';
+    }, [
+        linkShopDefault,
+        productId
+    ]);
+    const linkEditArticle = useMemo(()=>{
+        return articleId ? `${linkShopDefault}/articles/${articleId}` : '';
+    }, [
+        articleId,
+        linkShopDefault
+    ]);
+    return {
+        linkShopDefault,
+        linkEditProduct,
+        linkEditArticle
+    };
+};
+
+export { useShopifyLink };

package/dist/esm/hooks/shop.js

@@ -1,3 +1,4 @@
+'use client';
 import { useMemo } from 'react';
 import { useSWRConfig } from 'swr';
 import { useShopStore } from '../contexts/ShopContext.js';
@@ -24,6 +25,14 @@ const useCurrency = ()=>{
         changeCurrency
     ]);
 };
+const useTimezone = ()=>{
+    const timezone = useShopStore((state)=>state.timezone);
+    return useMemo(()=>({
+            timezone
+        }), [
+        timezone
+    ]);
+};
 const useMoneyFormat = ()=>{
     const moneyFormat = useShopStore((state)=>state.moneyFormat);
     const moneyWithCurrencyFormat = useShopStore((state)=>state.moneyWithCurrencyFormat);
@@ -108,4 +117,4 @@ function useCheckoutUrl(url) {
     return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
 }
 
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches };
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches, useTimezone };

package/dist/esm/hooks/use-current-device.js

@@ -1,3 +1,4 @@
+'use client';
 import { useSyncExternalStore } from 'react';
 
 // Hàm debounce với TypeScript
@@ -17,7 +18,7 @@ const useCurrentDevice = ()=>{
     return useSyncExternalStore(subscribe, ()=>{
         if (window.innerWidth < 768) {
             return 'mobile';
-        } else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
+        } else if (window.innerWidth >= 768 && window.innerWidth < 1025) {
             return 'tablet';
         } else {
             return 'desktop';

package/dist/esm/hooks/use-lazy-video.js

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect } from 'react';
 import LazyLoad from 'vanilla-lazyload';
 

package/dist/esm/hooks/useAnimations.js

@@ -1,3 +1,4 @@
+'use client';
 import { animations } from '../helpers/animations.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/esm/hooks/useCartId.js

@@ -1,3 +1,4 @@
+'use client';
 import { useSyncExternalStore, useCallback, useMemo } from 'react';
 
 const cartKey = 'cart-id';

package/dist/esm/hooks/useCartLine.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCartLineStore } from '../contexts/CartLineContext.js';
 
 const useCartLine = ()=>{

package/dist/esm/hooks/useCartUI.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback } from 'react';
 import { create } from 'zustand';
 import { usePluginEnable } from './shop.js';

package/dist/esm/hooks/useCollection.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCollectionStore } from '../contexts/CollectionContext.js';
 
 const useCollection = ()=>{

package/dist/esm/hooks/useFetchHandle.js

@@ -1,3 +1,4 @@
+'use client';
 import { useSWRConfig } from 'swr';
 
 const useFetchHandle = ()=>{

package/dist/esm/hooks/useFormatMoney.js

@@ -1,3 +1,4 @@
+'use client';
 import { useMoneyFormat } from './shop.js';
 
 const shopifyPriceRounding = (amount, precision)=>{

package/dist/esm/hooks/useInitialSwatchesOptions.js

@@ -1,3 +1,4 @@
+'use client';
 import useSWR from 'swr';
 import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
 import { colorPreset } from '../components/src/product/helpers/variant-presets.js';

package/dist/esm/hooks/useInteraction.js

@@ -1,3 +1,4 @@
+'use client';
 import { usePageStore } from '../contexts/PageContext.js';
 
 const useInteraction = ()=>{

package/dist/esm/hooks/useIsomorphicLayoutEffect.js

@@ -1,3 +1,4 @@
+'use client';
 import { useLayoutEffect } from 'react';
 
 // const isBrowser = typeof window !== 'undefined';

package/dist/esm/hooks/useLoadScript.js

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useEffect } from 'react';
 import { loadScript } from '../helpers/load-script.js';
 

package/dist/esm/hooks/useMoney.js

@@ -1,3 +1,4 @@
+'use client';
 import { useMemo } from 'react';
 import { useLocale, useCurrency } from './shop.js';
 

package/dist/esm/hooks/usePrevious.js

@@ -1,3 +1,4 @@
+'use client';
 import { useRef, useEffect } from 'react';
 
 const usePrevious = (value)=>{

package/dist/esm/hooks/useProduct.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useProductStore } from '../contexts/ProductContext.js';
 import 'react/jsx-runtime';
@@ -10,6 +11,7 @@ import 'swr/infinite';
 import 'vanilla-lazyload';
 import './useCartUI.js';
 import { checkInStock } from '../helpers/variant.js';
+import { useShopifyLink } from './shop/useShopifyLink.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
 import 'classnames';
@@ -41,6 +43,21 @@ const useProductBundleDiscount = ()=>{
         seUseProductCompareAtPrice
     };
 };
+const useProductShopifyEditLink = ()=>{
+    const product = useProductStore((s)=>s.product);
+    const productId = product?.baseID?.replace('gid://shopify/Product/', '');
+    const { linkEditProduct } = useShopifyLink({
+        productId
+    });
+    const redirectProductShopifyLink = ()=>{
+        if (!linkEditProduct) return;
+        window.open(linkEditProduct, '_blank');
+    };
+    return {
+        linkEditProduct,
+        redirectProductShopifyLink
+    };
+};
 const useQuantity = ()=>{
     const quantity = useProductStore((s)=>s.quantity);
     const hasUpdatePrice = useProductStore((s)=>s.updatePrice);
@@ -225,4 +242,4 @@ const useProductOfferDiscount = ()=>{
     return currentDiscount || 0;
 };
 
-export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useHasPreSelected, useIsSyncProduct, useProduct, useProductBundleDiscount, useProductOfferDiscount, useProductProperties, useQuantity, useSelectedOption, useUniqProductID, useVariant, useVariantOutStock, useVariants };
+export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useHasPreSelected, useIsSyncProduct, useProduct, useProductBundleDiscount, useProductOfferDiscount, useProductProperties, useProductShopifyEditLink, useQuantity, useSelectedOption, useUniqProductID, useVariant, useVariantOutStock, useVariants };

package/dist/esm/hooks/useProductList.js

@@ -1,3 +1,4 @@
+'use client';
 import { useProductListStore } from '../contexts/ProductListContext.js';
 
 const useProductList = ()=>{

package/dist/esm/hooks/useSuspenseFetch.js

@@ -1,3 +1,4 @@
+'use client';
 const cache = new Map();
 const useSuspenseFetch = (key, promise)=>{
     const value = cache.get(key) || {

package/dist/esm/hooks/useSwatchesOptions.js

@@ -1,3 +1,4 @@
+'use client';
 import { useSwatches } from './shop.js';
 
 const initialSwatchOptionValue = {

package/dist/esm/hooks/useToolbarPostPurchase.js

@@ -1,3 +1,4 @@
+'use client';
 import { postPurchaseRequiredElements, postPurchaseWrapElements } from '../components/constant.js';
 import { useShopStore } from '../contexts/ShopContext.js';
 

package/dist/esm/index.js

@@ -25,12 +25,13 @@ export { PublishedThemePagesDocument } from './graphql/queries/published-theme-p
 export { ProductsDocument } from './graphql/queries/products.generated.js';
 export { StorePropertyDocument } from './graphql/queries/store-property.generated.js';
 export { PreviewThemePageDocument } from './graphql/queries/preview-page.generated.js';
+export { ShopShopifyDocument } from './graphql/queries/shop-shopify.generated.js';
 export { LibraryTemplateDocument } from './graphql-app-api/queries/LibraryTemplate.generated.js';
 export { ThemePageDocument } from './graphql-app-api/queries/ThemePage.generated.js';
 export { SaleFunnelDiscountsDocument } from './graphql-app-api/queries/SaleFunnelDiscounts.generated.js';
 export { LibrarySaleFunnelDocument } from './graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js';
 export { ShopLibraryPageDocument } from './graphql-app-api/queries/ShopLibraryPage.generated.js';
-export { composeBorderCss, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn } from './helpers/borders.js';
+export { composeBorderCss, composeBorderResponsive, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn } from './helpers/borders.js';
 export { getCarouselContainerHeight, makeContainerWidthOrHeight, makeDotGapToCarouselStyle } from './helpers/carousel.js';
 export { cls } from './helpers/cls.js';
 export { animations } from './helpers/animations.js';
@@ -55,23 +56,24 @@ export { gtag };
 import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
 export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment } from './helpers/background.js';
+export { composeBackgroundImageCss, getBgImageSourceByDevice, getStyleBackgroundImageByDevice, getStyleBgImageSource } from './helpers/backgroundImage.js';
 export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
 export { composeAdvanceStyle, composeAdvanceStyleForPostPurchase, filterAttrInStyle, filterCornerInStyle, removeAttrInStyle, removePaddingYInStyle, splitStyle } from './helpers/compose-advance-style.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
 export { convertHTML } from './helpers/covert-entities-html.js';
 export { composePositionLineHeight, composePostionIconList } from './helpers/icon-list.js';
 export { isDefined } from './helpers/is-defined.js';
-export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
+export { composeGridLayout, convertOldLayout, getLayoutClasses, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
-export { convertTextAlignToJustify } from './helpers/align.js';
+export { convertTextAlignToJustify, getAlignmentClasses } from './helpers/align.js';
 export { checkInStock } from './helpers/variant.js';
 export { checkAvailableVariantInStock, getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
 export { composeCornerCss, composeRadius, composeRadiusResponsive, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { RenderIf, composeMemo, dataStringify, props, removeUndefinedValuesFromObject, styles, template } from './helpers/render.js';
-export { composeShadowCss, getResponsiveStyleShadow, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
-export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault } from './helpers/size.js';
-export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
+export { composeShadowCss, getResponsiveStyleShadow, getResponsiveStyleShadowWithoutState, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
+export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getPaddingStyleByDevice, getResponsiveStylePadding, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault } from './helpers/size.js';
+export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTextHoverColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
 export { useArticlesQuery, useBlogsQuery } from './hooks/articles/useArticlesQuery.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';
@@ -80,7 +82,7 @@ export { useCartNoteUpdate } from './hooks/cart/use-cart-note-update.js';
 export { useCreateCart } from './hooks/cart/use-create-cart.js';
 export { useRemoveCartItem } from './hooks/cart/use-remove-cart-item.js';
 export { useUpdateCartItem } from './hooks/cart/use-update-cart-item.js';
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches, useTimezone } from './hooks/shop.js';
 export { useCollectionQuery } from './hooks/shop/use-collection-query.js';
 export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
@@ -98,7 +100,8 @@ export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayou
 export { default as useLoadScript } from './hooks/useLoadScript.js';
 export { default as useMoney } from './hooks/useMoney.js';
 export { usePrevious } from './hooks/usePrevious.js';
-export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useHasPreSelected, useIsSyncProduct, useProduct, useProductBundleDiscount, useProductOfferDiscount, useProductProperties, useQuantity, useSelectedOption, useUniqProductID, useVariant, useVariantOutStock, useVariants } from './hooks/useProduct.js';
+export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantInStock, useFeaturedImageGlobal, useHasPreSelected, useIsSyncProduct, useProduct, useProductBundleDiscount, useProductOfferDiscount, useProductProperties, useProductShopifyEditLink, useQuantity, useSelectedOption, useUniqProductID, useVariant, useVariantOutStock, useVariants } from './hooks/useProduct.js';
+export { useShopifyLink } from './hooks/shop/useShopifyLink.js';
 export { useProductList, useProductListProducts, useProductListSettings, useProductListStyles } from './hooks/useProductList.js';
 export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
 export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';