@gem-sdk/pages 2.0.0-dev.549 → 2.0.0-dev.576

package/dist/cjs/components/builder/Toolbox.js

@@ -8,11 +8,12 @@ var core = require('@gem-sdk/core');
 var react = require('react');
 var getStorefrontApi = require('../../libs/get-storefront-api.js');
 var googleFonts = require('../../libs/google-fonts.js');
+var checkOptionFont = require('../../libs/helpers/check-option-font.js');
 var genCss = require('../../libs/helpers/gen-css.js');
 var genFonts = require('../../libs/helpers/gen-fonts.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
 var libsStore = require('../../store/libs-store.js');
-var checkOptionFont = require('../../libs/helpers/check-option-font.js');
+var getListFontWeightTypos = require('../composable/getListFontWeightTypos.js');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -137,9 +138,11 @@ const Toolbox = ()=>{
         try {
             if (detail.data) {
                 const themeStyle = genCss.genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
+                const fontWeights = getListFontWeightTypos.getListFontWeightTypos(detail.data?.typography);
+                const font = Object.entries(detail.data?.font).map(([, value])=>({
+                        ...value,
+                        variants: value.variants.filter((variant)=>fontWeights.includes(variant) || variant === 'regular' && fontWeights.includes('400')).map((variant)=>variant === 'regular' ? '400' : variant)
+                    })).map((item)=>{
                     if (item.type == 'custom') {
                         const isGoogleFont = shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
                         if (isGoogleFont) {

package/dist/cjs/components/composable/getListFontWeightTypos.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const getListFontWeightTypos = (font)=>{
+    const fontWeights = new Set();
+    Object.values(font).forEach((fontStyle)=>{
+        // Check desktop fontWeight
+        if (fontStyle.desktop?.fontWeight) {
+            fontWeights.add(fontStyle.desktop.fontWeight);
+        }
+    });
+    return Array.from(fontWeights);
+};
+
+exports.getListFontWeightTypos = getListFontWeightTypos;

package/dist/cjs/components/image-to-layout/DropElement.js

@@ -4,8 +4,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 
+const SALE_FUNNEL_PAGE_TYPES = [
+    'GP_FUNNEL_PAGE',
+    'GP_PRE_SALE_PAGE'
+];
 const DropElement = ()=>{
     const editingPageType = core.useShopStore((s)=>s.pageType);
+    const isFunnelSalesPage = SALE_FUNNEL_PAGE_TYPES.includes(editingPageType || '');
     const dispatchEventBuildWithSectionActiveTab = (value)=>{
         const event = new CustomEvent('editor:sidebar:build-with-section-active-tab', {
             bubbles: true,
@@ -112,7 +117,7 @@ const DropElement = ()=>{
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                         className: "gp-text-16 gp-font-medium gp-mb-4 gp-text-[#212121]",
-                        children: editingPageType === 'GP_FUNNEL_PAGE' ? 'Start building with Sections/Elements or' : 'Start with Sections from sidebar'
+                        children: isFunnelSalesPage ? 'Start building with Sections/Elements or' : 'Start with Sections from sidebar'
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         className: "gp-flex gp-gap-3 gp-justify-between",
@@ -120,22 +125,22 @@ const DropElement = ()=>{
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
                                 "data-button-add-section": true,
                                 onClick: ()=>{
-                                    if (editingPageType === 'GP_FUNNEL_PAGE') {
+                                    if (isFunnelSalesPage) {
                                         dispatchEventBuildWithTemplateActiveTab('funnelExisting');
                                     } else dispatchEventBuildWithSectionActiveTab(true);
                                 },
                                 className: "gp-flex gp-h-[40px] gp-px-6 gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
-                                children: editingPageType === 'GP_FUNNEL_PAGE' ? 'Use existing page designs' : 'Add sections'
+                                children: isFunnelSalesPage ? 'Use existing page designs' : 'Add sections'
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
                                 "data-button-add-elements": true,
                                 onClick: ()=>{
-                                    if (editingPageType === 'GP_FUNNEL_PAGE') {
+                                    if (isFunnelSalesPage) {
                                         dispatchEventBuildWithTemplateActiveTab('templates');
                                     } else dispatchEventBuildWithSectionActiveTab(false);
                                 },
                                 className: "gp-flex gp-h-[40px] gp-px-6 gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
-                                children: editingPageType === 'GP_FUNNEL_PAGE' ? 'Explore templates' : 'Add elements'
+                                children: isFunnelSalesPage ? 'Explore templates' : 'Add elements'
                             })
                         ]
                     }),

package/dist/cjs/libs/google-fonts.js

@@ -36,7 +36,27 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option, fontType)=>{
+const handleGenerateFontParams = (variants, fontType = 'google')=>{
+    const regularWeights = [];
+    if (!variants.length) {
+        return fontType === 'bunny' ? '400' : 'wght@400';
+    }
+    // Get regular weights and remove italic variants
+    variants.forEach((variant)=>{
+        if (variant.includes('italic')) {
+            return;
+        }
+        const weight = variant === 'regular' ? '400' : variant;
+        regularWeights.push(weight);
+    });
+    // Sort weights numerically (ex: [900, 700, 400] -> [400, 700, 900])
+    const sortedRegularWeights = regularWeights.sort((a, b)=>Number(a) - Number(b));
+    // Build the variant string with only regular weights
+    const axisPrefix = 'wght@';
+    const listVariantsGoogleFonts = sortedRegularWeights.map((weight)=>weight);
+    return fontType === 'google' ? `${axisPrefix}${listVariantsGoogleFonts.join(';')}` : sortedRegularWeights.join(',');
+};
+const createFontUrl = (fonts, option, fontType = 'google')=>{
     const mainFonts = fonts.filter((font)=>{
         return !([
             'bunny',
@@ -50,8 +70,8 @@ const createFontUrl = (fonts, option, fontType)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
-        return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
-    }).join('|');
+        return `${font.family.replace(/ /g, '+')}:${handleGenerateFontParams(font.variants, fontType)}`;
+    }).join(fontType === 'google' ? '&family=' : '|');
     params.append('family', family);
     params.append('display', display);
     if (option?.subset) {
@@ -61,7 +81,7 @@ const createFontUrl = (fonts, option, fontType)=>{
         params.append('effect', option.effect);
     }
     const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
-    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css2?${decodeURIComponent(params.toString())}`;
     return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
 // eslint-disable-next-line max-params

package/dist/esm/components/builder/Toolbox.js

@@ -4,11 +4,12 @@ import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, use
 import { memo, useMemo, useCallback, useEffect } from 'react';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { createFontUrl } from '../../libs/google-fonts.js';
+import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
 import { libsStore } from '../../store/libs-store.js';
-import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
+import { getListFontWeightTypos } from '../composable/getListFontWeightTypos.js';
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -133,9 +134,11 @@ const Toolbox = ()=>{
         try {
             if (detail.data) {
                 const themeStyle = genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
+                const fontWeights = getListFontWeightTypos(detail.data?.typography);
+                const font = Object.entries(detail.data?.font).map(([, value])=>({
+                        ...value,
+                        variants: value.variants.filter((variant)=>fontWeights.includes(variant) || variant === 'regular' && fontWeights.includes('400')).map((variant)=>variant === 'regular' ? '400' : variant)
+                    })).map((item)=>{
                     if (item.type == 'custom') {
                         const isGoogleFont = shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
                         if (isGoogleFont) {

package/dist/esm/components/composable/getListFontWeightTypos.js

@@ -0,0 +1,12 @@
+const getListFontWeightTypos = (font)=>{
+    const fontWeights = new Set();
+    Object.values(font).forEach((fontStyle)=>{
+        // Check desktop fontWeight
+        if (fontStyle.desktop?.fontWeight) {
+            fontWeights.add(fontStyle.desktop.fontWeight);
+        }
+    });
+    return Array.from(fontWeights);
+};
+
+export { getListFontWeightTypos };

package/dist/esm/components/image-to-layout/DropElement.js

@@ -2,8 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useShopStore } from '@gem-sdk/core';
 
+const SALE_FUNNEL_PAGE_TYPES = [
+    'GP_FUNNEL_PAGE',
+    'GP_PRE_SALE_PAGE'
+];
 const DropElement = ()=>{
     const editingPageType = useShopStore((s)=>s.pageType);
+    const isFunnelSalesPage = SALE_FUNNEL_PAGE_TYPES.includes(editingPageType || '');
     const dispatchEventBuildWithSectionActiveTab = (value)=>{
         const event = new CustomEvent('editor:sidebar:build-with-section-active-tab', {
             bubbles: true,
@@ -110,7 +115,7 @@ const DropElement = ()=>{
                 children: [
                     /*#__PURE__*/ jsx("div", {
                         className: "gp-text-16 gp-font-medium gp-mb-4 gp-text-[#212121]",
-                        children: editingPageType === 'GP_FUNNEL_PAGE' ? 'Start building with Sections/Elements or' : 'Start with Sections from sidebar'
+                        children: isFunnelSalesPage ? 'Start building with Sections/Elements or' : 'Start with Sections from sidebar'
                     }),
                     /*#__PURE__*/ jsxs("div", {
                         className: "gp-flex gp-gap-3 gp-justify-between",
@@ -118,22 +123,22 @@ const DropElement = ()=>{
                             /*#__PURE__*/ jsx("button", {
                                 "data-button-add-section": true,
                                 onClick: ()=>{
-                                    if (editingPageType === 'GP_FUNNEL_PAGE') {
+                                    if (isFunnelSalesPage) {
                                         dispatchEventBuildWithTemplateActiveTab('funnelExisting');
                                     } else dispatchEventBuildWithSectionActiveTab(true);
                                 },
                                 className: "gp-flex gp-h-[40px] gp-px-6 gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
-                                children: editingPageType === 'GP_FUNNEL_PAGE' ? 'Use existing page designs' : 'Add sections'
+                                children: isFunnelSalesPage ? 'Use existing page designs' : 'Add sections'
                             }),
                             /*#__PURE__*/ jsx("button", {
                                 "data-button-add-elements": true,
                                 onClick: ()=>{
-                                    if (editingPageType === 'GP_FUNNEL_PAGE') {
+                                    if (isFunnelSalesPage) {
                                         dispatchEventBuildWithTemplateActiveTab('templates');
                                     } else dispatchEventBuildWithSectionActiveTab(false);
                                 },
                                 className: "gp-flex gp-h-[40px] gp-px-6 gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
-                                children: editingPageType === 'GP_FUNNEL_PAGE' ? 'Explore templates' : 'Add elements'
+                                children: isFunnelSalesPage ? 'Explore templates' : 'Add elements'
                             })
                         ]
                     }),

package/dist/esm/libs/google-fonts.js

@@ -34,7 +34,27 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option, fontType)=>{
+const handleGenerateFontParams = (variants, fontType = 'google')=>{
+    const regularWeights = [];
+    if (!variants.length) {
+        return fontType === 'bunny' ? '400' : 'wght@400';
+    }
+    // Get regular weights and remove italic variants
+    variants.forEach((variant)=>{
+        if (variant.includes('italic')) {
+            return;
+        }
+        const weight = variant === 'regular' ? '400' : variant;
+        regularWeights.push(weight);
+    });
+    // Sort weights numerically (ex: [900, 700, 400] -> [400, 700, 900])
+    const sortedRegularWeights = regularWeights.sort((a, b)=>Number(a) - Number(b));
+    // Build the variant string with only regular weights
+    const axisPrefix = 'wght@';
+    const listVariantsGoogleFonts = sortedRegularWeights.map((weight)=>weight);
+    return fontType === 'google' ? `${axisPrefix}${listVariantsGoogleFonts.join(';')}` : sortedRegularWeights.join(',');
+};
+const createFontUrl = (fonts, option, fontType = 'google')=>{
     const mainFonts = fonts.filter((font)=>{
         return !([
             'bunny',
@@ -48,8 +68,8 @@ const createFontUrl = (fonts, option, fontType)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
-        return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
-    }).join('|');
+        return `${font.family.replace(/ /g, '+')}:${handleGenerateFontParams(font.variants, fontType)}`;
+    }).join(fontType === 'google' ? '&family=' : '|');
     params.append('family', family);
     params.append('display', display);
     if (option?.subset) {
@@ -59,7 +79,7 @@ const createFontUrl = (fonts, option, fontType)=>{
         params.append('effect', option.effect);
     }
     const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
-    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css2?${decodeURIComponent(params.toString())}`;
     return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
 // eslint-disable-next-line max-params

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "2.0.0-dev.549",
+  "version": "2.0.0-dev.576",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "next": "14.2.20"
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.0.0-dev.540",
+    "@gem-sdk/core": "2.0.0-dev.575",
     "@gem-sdk/plugin-cookie-bar": "2.0.0-dev.348",
     "@gem-sdk/plugin-quick-view": "2.0.0-dev.348",
     "@gem-sdk/plugin-sticky-add-to-cart": "2.0.0-dev.348"