@gem-sdk/core 1.12.0-next.4 → 1.12.0-next.45

package/dist/cjs/components/Render.liquid.js

@@ -16,20 +16,35 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const Render = ({ uid , builder , components , parentId , ...passProps })=>{
+const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
         console.log('Miss component: ', item);
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
     }
-    if (!item) return null;
     if (item?.type === 'section') {
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
     } else {
+        const customProps = {
+            extraFiles: {}
+        };
         const style = composeAdvanceStyle.composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
         if (constant.disableWrap.includes(item.tag)) {
-            return render.RenderIf(item?.childrens?.length, ()=>{
+            liquid = render.RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
                         uid,
@@ -46,17 +61,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                             ...builder[id],
                             uid: id,
                             builder,
-                            components
+                            components,
+                            customProps
                         };
                     }),
-                    children: item.childrens.map((id)=>Render({
+                    children: item.childrens.map((id)=>RenderChildren({
                             uid: id,
                             builder,
                             components,
-                            parentId: uid
+                            customProps
                         })).join('')
                 });
-            }, ()=>Component({
+            }, ()=>{
+                return Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -68,42 +85,74 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
-                }));
+                });
+            });
+        } else {
+            liquid = render.template`<div style="${style}" class="${item.uid}">
+      ${render.RenderIf(item?.childrens?.length, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    rawChildren: item.childrens.map((id)=>{
+                        return {
+                            ...builder[id],
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        };
+                    }),
+                    children: item.childrens.map((id)=>RenderChildren({
+                            uid: id,
+                            builder,
+                            components,
+                            customProps
+                        })).join('')
+                });
+            }, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    isText: componentTexts.includes(item.tag) ? true : null,
+                    ...passProps
+                });
+            })}
+      </div>`;
         }
-        return render.template`<div style="${style}" class="${item.uid}">
-    ${render.RenderIf(item?.childrens?.length, ()=>Component({
-                builderProps: {
-                    uid,
-                    builderData: item
-                },
-                styles: item.styles,
-                setting: item.settings,
-                ...passProps,
-                rawChildren: item.childrens.map((id)=>{
-                    return {
-                        ...builder[id],
-                        uid: id,
-                        builder,
-                        components
-                    };
-                }),
-                children: item.childrens.map((id)=>Render({
-                        uid: id,
-                        builder,
-                        components
-                    })).join('')
-            }), ()=>Component({
-                builderProps: {
-                    uid,
-                    builderData: item
-                },
-                styles: item.styles,
-                setting: item.settings,
-                isText: componentTexts.includes(item.tag) ? true : null,
-                ...passProps
-            }))}
-    </div>`;
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+const RenderChildren = (props)=>{
+    const data = Render(props);
+    // Append to prop parent
+    for(const key in data.extraFiles){
+        if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
+            const value = data.extraFiles[key];
+            props.customProps.extraFiles[key] = value;
+        }
+    }
+    // Fix limit 256kb
+    const textEncoder = new TextEncoder();
+    const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
+    if (Math.ceil(size / 1024) >= 180) {
+        const fileName = `gp-section-snippet-${props.uid}`;
+        props.customProps.extraFiles[fileName] = data.liquid;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id  %}`;
     }
+    return data.liquid;
 };
 
+exports.RenderChildren = RenderChildren;
 exports.default = Render;

package/dist/cjs/helpers/compose-advance-style.js

@@ -117,7 +117,15 @@ function composeAdvanceStyle(data, tag) {
                     }
                 } else {
                     if (attr === 'border') {
-                        Object.assign(styles, borders.getBorderStyle(value));
+                        const borderStyle = value;
+                        if (borderStyle.border === 'none') {
+                            borderStyle.border = 'solid';
+                            borderStyle.color = '#121212';
+                            borderStyle.isCustom = true;
+                            borderStyle.width = '0px';
+                            borderStyle.position = 'all';
+                        }
+                        Object.assign(styles, borders.getBorderStyle(borderStyle));
                     }
                     if (attr === 'rounded') {
                         Object.assign(styles, radius.getCornerCSSFromGlobal(value));

package/dist/cjs/helpers/make-style.js

@@ -2,6 +2,13 @@
 
 var getResonsiveValue = require('./get-resonsive-value.js');
 
+const removeNullUndefined = (obj)=>Object.entries(obj).reduce((a, [k, v])=>{
+        if (v === null || v === undefined) return a;
+        return {
+            ...a,
+            [k]: v
+        };
+    }, {});
 const makeStyleKey = (name)=>{
     return [
         name,
@@ -16,10 +23,10 @@ const makeStyleKey = (name)=>{
     ].map((key)=>`--${key}`);
 };
 const makeStyle = (style)=>{
-    return Object.fromEntries(Object.entries(style).map(([key, value])=>[
+    return removeNullUndefined(Object.fromEntries(Object.entries(style).map(([key, value])=>[
             `--${key}`,
             value
-        ]));
+        ])));
 };
 const makeStyleState = (name, value)=>{
     if (!value) return {};
@@ -118,3 +125,4 @@ exports.makeStyleResponsive = makeStyleResponsive;
 exports.makeStyleResponsiveState = makeStyleResponsiveState;
 exports.makeStyleState = makeStyleState;
 exports.makeWidth = makeWidth;
+exports.removeNullUndefined = removeNullUndefined;

package/dist/cjs/helpers/render.js

@@ -39,6 +39,9 @@ const styles = (strings, ...keys)=>{
     }
     return styleArr.join(';');
 };
+const dataStringify = (obj)=>{
+    return JSON.stringify(obj).replace(/\\"/g, '"');
+};
 const template = (strings, ...keys)=>{
     let str = '';
     strings.forEach((item, index)=>{
@@ -57,8 +60,12 @@ const template = (strings, ...keys)=>{
     });
     return str;
 };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const composeMemo = (fn, _)=>fn();
 
 exports.RenderIf = RenderIf;
+exports.composeMemo = composeMemo;
+exports.dataStringify = dataStringify;
 exports.props = props;
 exports.styles = styles;
 exports.template = template;

package/dist/cjs/helpers/typography.js

@@ -1,5 +1,8 @@
 'use strict';
 
+var colors = require('./colors.js');
+var makeStyle = require('./make-style.js');
+
 const genTypoClass = (name)=>{
     return `g-${name}`;
 };
@@ -15,6 +18,71 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
+function getCustomCSSByDevice(typography, device) {
+    if (!typography || !device) return {};
+    const suffix = device === 'desktop' || !device ? '' : `-${device}`;
+    const { fontFamily  } = typography?.[device] ?? {};
+    return {
+        [`--size${suffix}`]: typography?.[device]?.fontSize,
+        [`--lh${suffix}`]: typography?.[device]?.lineHeight,
+        [`--fs${suffix}`]: typography?.[device]?.fontStyle,
+        [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
+        [`--weight${suffix}`]: typography?.[device]?.fontWeight,
+        [`--ls${suffix}`]: typography?.[device]?.letterSpacing
+    };
+}
+const composeTypography = (typography)=>{
+    if (!typography) return {};
+    return makeStyle.removeNullUndefined({
+        ...getCustomCSSByDevice(typography, 'desktop'),
+        ...getCustomCSSByDevice(typography, 'tablet'),
+        ...getCustomCSSByDevice(typography, 'mobile')
+    });
+};
+const composeTypographyV2 = (value, attrs)=>{
+    if (!value) return {};
+    return makeStyle.removeNullUndefined({
+        ...makeStyle.makeStyle({
+            fs: !attrs?.italic && value?.fontStyle,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily}, ${value.fontFamily})` : undefined,
+            weight: !attrs?.bold && value?.fontWeight,
+            ls: value?.letterSpacing,
+            lh: value?.lineHeight
+        }),
+        ...makeStyle.makeStyleResponsive('size', value?.fontSize)
+    });
+};
+const composeTypographyAttr = (attrs)=>{
+    if (!attrs) return {};
+    return makeStyle.removeNullUndefined({
+        ...makeStyle.makeStyle({
+            fs: attrs?.italic && 'italic',
+            weight: attrs?.bold && 'bold',
+            c: colors.getSingleColorVariable(attrs?.color),
+            tt: attrs?.transform,
+            tdl: attrs?.underline ? 'underline' : undefined
+        })
+    });
+};
+const composeTypographyClassName = (typo, typography)=>{
+    return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
+};
+const composeTypographyStyle = (typo, typography, disableAttr)=>{
+    if (typo) {
+        return {
+            ...composeTypographyV2(typo.custom),
+            ...!disableAttr && composeTypographyAttr(typo.attrs)
+        };
+    }
+    return {
+        ...!typography?.type ? composeTypography(typography?.custom) : {}
+    };
+};
 
+exports.composeTypography = composeTypography;
+exports.composeTypographyAttr = composeTypographyAttr;
+exports.composeTypographyClassName = composeTypographyClassName;
 exports.composeTypographyCss = composeTypographyCss;
+exports.composeTypographyStyle = composeTypographyStyle;
+exports.composeTypographyV2 = composeTypographyV2;
 exports.genTypoClass = genTypoClass;

package/dist/cjs/hooks/shop.js

@@ -26,6 +26,17 @@ const useCurrency = ()=>{
         changeCurrency
     ]);
 };
+const useMoneyFormat = ()=>{
+    const moneyFormat = ShopContext.useShopStore((state)=>state.moneyFormat);
+    const moneyWithCurrencyFormat = ShopContext.useShopStore((state)=>state.moneyWithCurrencyFormat);
+    return react.useMemo(()=>({
+            moneyFormat,
+            moneyWithCurrencyFormat
+        }), [
+        moneyFormat,
+        moneyWithCurrencyFormat
+    ]);
+};
 const useSwatches = ()=>{
     const swatches = ShopContext.useShopStore((state)=>state.swatches);
     const changeSwatches = ShopContext.useShopStore((state)=>state.changeSwatches);
@@ -108,6 +119,7 @@ exports.useIsStorefrontProduct = useIsStorefrontProduct;
 exports.useLocale = useLocale;
 exports.useMatchMutate = useMatchMutate;
 exports.useMobileOnly = useMobileOnly;
+exports.useMoneyFormat = useMoneyFormat;
 exports.usePageType = usePageType;
 exports.usePluginEnable = usePluginEnable;
 exports.useStoreFront = useStoreFront;

package/dist/cjs/hooks/useFormatMoney.js

@@ -1,21 +1,61 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
 var shop = require('./shop.js');
 
-const useFormatMoney = ()=>{
-    const { locale  } = shop.useLocale();
-    const formatMoney = react.useCallback((value, options)=>new Intl.NumberFormat(locale, {
-            style: 'currency',
-            ...options
-        }).format(value), [
-        locale
-    ]);
-    return {
-        formatMoney
+const useFormatMoney = (amount, withCurrency)=>{
+    const { moneyFormat , moneyWithCurrencyFormat  } = shop.useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        if (typeof cents == 'string') {
+            cents = cents.replace('.', '');
+        }
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                return 0;
+            }
+            // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
+            number = parseFloat(`${number}`).toFixed(Number(precision) + 1).slice(0, -1);
+            const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
+            return dollars + cents;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
     };
+    return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-exports.default = useFormatMoney;
+exports.useFormatMoney = useFormatMoney;