@gem-sdk/pages 1.11.0 → 1.12.0-next.3

package/dist/cjs/components/Footer.js

@@ -6,6 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var react = require('react');
 
+const paddingX = {
+    desktop: '220px',
+    tablet: '16px',
+    mobile: '16px'
+};
 const Footer = ()=>{
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
     const [shouldFixed, setShouldFixed] = react.useState(false);
@@ -28,10 +33,14 @@ const Footer = ()=>{
         };
     });
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: core.cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] ', {
+        className: core.cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] font-sans', {
             hidden: !layoutSetting?.showFooter,
             'fixed w-full bottom-0 z-50': shouldFixed
         }),
+        style: {
+            ...core.makeStyleResponsive('pl', paddingX),
+            ...core.makeStyleResponsive('pr', paddingX)
+        },
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                 width: "192",

package/dist/cjs/components/Header.js

@@ -5,12 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 
+const paddingX = {
+    desktop: '220px',
+    tablet: '16px',
+    mobile: '16px'
+};
 const Header = ()=>{
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: core.cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative px-[68px]', {
+        className: core.cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative font-sans', {
             hidden: !layoutSetting?.showHeader
         }),
+        style: {
+            ...core.makeStyleResponsive('pl', paddingX),
+            ...core.makeStyleResponsive('pr', paddingX)
+        },
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                 width: "84",

package/dist/cjs/components/ImageToLayout.js

@@ -4,14 +4,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var core = require('@gem-sdk/core');
 var PagesSuggestion = require('./PagesSuggestion.js');
 
-const ImageToLayout = ()=>{
+const HEADER_HEIGHT = 40;
+const FOOTER_HEIGHT = 48;
+const ImageToLayout = ({ editorImageToLayout  })=>{
     const [link, setLink] = react.useState('');
     const [openSuggestion, setOpenSuggestion] = react.useState(false);
+    const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
+    const offset = react.useMemo(()=>{
+        let result = 0;
+        if (layoutSetting?.showFooter) {
+            result += FOOTER_HEIGHT;
+        }
+        if (layoutSetting?.showHeader) {
+            result += HEADER_HEIGHT;
+        }
+        return result;
+    }, [
+        layoutSetting?.showHeader,
+        layoutSetting?.showFooter
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         id: "gp-img-to-layout-wrapper",
-        className: "m-8 flex h-[450px] flex-1 flex-col items-center justify-center",
+        className: core.cls(`sf-add-section-placeholder flex h-[calc(100vh_-_${offset}px)] flex-1 flex-col items-center justify-center`, {
+            hidden: !editorImageToLayout
+        }),
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 className: "mb-[32px] flex items-center",

package/dist/cjs/index.js

@@ -16,6 +16,7 @@ var useTrackingView = require('./libs/hooks/use-tracking-view.js');
 var userAgent = require('./libs/helpers/user-agent.js');
 var normalize = require('./libs/helpers/normalize.js');
 var getFallback = require('./libs/helpers/get-fallback.js');
+var common = require('./libs/helpers/common.js');
 var collectionDetail = require('./pages/collection-detail.js');
 var preview = require('./pages/preview.js');
 var productDetail = require('./pages/product-detail.js');
@@ -53,6 +54,7 @@ exports.isBot = userAgent.isBot;
 exports.normalizePageSectionResponseV2 = normalize.normalizePageSectionResponseV2;
 exports.parseBuilderTemplateV2 = normalize.parseBuilderTemplateV2;
 exports.getFallbackV2 = getFallback.getFallbackV2;
+exports.retryWithDelay = common.retryWithDelay;
 exports.CollectionDetailPage = collectionDetail.default;
 exports.PreviewPage = preview.PreviewPage;
 exports.ProductDetailPage = productDetail.default;

package/dist/cjs/libs/helpers/common.js

@@ -0,0 +1,27 @@
+'use strict';
+
+async function wait(ms) {
+    return new Promise((resolve)=>setTimeout(resolve, ms));
+}
+const retryWithDelay = async (fn, config)=>{
+    const retries = config?.retries ?? 3;
+    const delay = config?.delay ?? 1000;
+    try {
+        return await fn();
+    } catch (err) {
+        if (retries <= 0 || config?.retryIf && !config.retryIf(err)) {
+            return Promise.reject(err);
+        }
+        //delay the next call
+        await wait(delay);
+        //recursively call the same func
+        return retryWithDelay(fn, {
+            ...config,
+            retries: retries - 1,
+            delay
+        });
+    }
+};
+
+exports.retryWithDelay = retryWithDelay;
+exports.wait = wait;

package/dist/cjs/pages/builder.js

@@ -71,7 +71,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
                                             uid: "ROOT"
                                         })
                                     }),
-                                    editorImageToLayout && /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {}),
+                                    /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
+                                        editorImageToLayout: editorImageToLayout || false
+                                    }),
                                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                                         id: "visual-content"
                                     }),

package/dist/esm/components/Footer.js

@@ -1,7 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useShopStore, cls } from '@gem-sdk/core';
+import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 import { useState, useEffect } from 'react';
 
+const paddingX = {
+    desktop: '220px',
+    tablet: '16px',
+    mobile: '16px'
+};
 const Footer = ()=>{
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
     const [shouldFixed, setShouldFixed] = useState(false);
@@ -24,10 +29,14 @@ const Footer = ()=>{
         };
     });
     return /*#__PURE__*/ jsxs("div", {
-        className: cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] ', {
+        className: cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] font-sans', {
             hidden: !layoutSetting?.showFooter,
             'fixed w-full bottom-0 z-50': shouldFixed
         }),
+        style: {
+            ...makeStyleResponsive('pl', paddingX),
+            ...makeStyleResponsive('pr', paddingX)
+        },
         children: [
             /*#__PURE__*/ jsxs("svg", {
                 width: "192",

package/dist/esm/components/Header.js

@@ -1,12 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useShopStore, cls } from '@gem-sdk/core';
+import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 
+const paddingX = {
+    desktop: '220px',
+    tablet: '16px',
+    mobile: '16px'
+};
 const Header = ()=>{
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
     return /*#__PURE__*/ jsxs("div", {
-        className: cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative px-[68px]', {
+        className: cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative font-sans', {
             hidden: !layoutSetting?.showHeader
         }),
+        style: {
+            ...makeStyleResponsive('pl', paddingX),
+            ...makeStyleResponsive('pr', paddingX)
+        },
         children: [
             /*#__PURE__*/ jsxs("svg", {
                 width: "84",

package/dist/esm/components/ImageToLayout.js

@@ -1,13 +1,32 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
+import { useShopStore, cls } from '@gem-sdk/core';
 import { PagesSuggestion } from './PagesSuggestion.js';
 
-const ImageToLayout = ()=>{
+const HEADER_HEIGHT = 40;
+const FOOTER_HEIGHT = 48;
+const ImageToLayout = ({ editorImageToLayout  })=>{
     const [link, setLink] = useState('');
     const [openSuggestion, setOpenSuggestion] = useState(false);
+    const layoutSetting = useShopStore((s)=>s.layoutSettings);
+    const offset = useMemo(()=>{
+        let result = 0;
+        if (layoutSetting?.showFooter) {
+            result += FOOTER_HEIGHT;
+        }
+        if (layoutSetting?.showHeader) {
+            result += HEADER_HEIGHT;
+        }
+        return result;
+    }, [
+        layoutSetting?.showHeader,
+        layoutSetting?.showFooter
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         id: "gp-img-to-layout-wrapper",
-        className: "m-8 flex h-[450px] flex-1 flex-col items-center justify-center",
+        className: cls(`sf-add-section-placeholder flex h-[calc(100vh_-_${offset}px)] flex-1 flex-col items-center justify-center`, {
+            hidden: !editorImageToLayout
+        }),
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "mb-[32px] flex items-center",

package/dist/esm/index.js

@@ -14,6 +14,7 @@ export { useTrackingView } from './libs/hooks/use-tracking-view.js';
 export { isBot } from './libs/helpers/user-agent.js';
 export { normalizePageSectionResponseV2, parseBuilderTemplateV2 } from './libs/helpers/normalize.js';
 export { getFallbackV2 } from './libs/helpers/get-fallback.js';
+export { retryWithDelay } from './libs/helpers/common.js';
 export { default as CollectionDetailPage } from './pages/collection-detail.js';
 export { PreviewPage } from './pages/preview.js';
 export { default as ProductDetailPage } from './pages/product-detail.js';

package/dist/esm/libs/helpers/common.js

@@ -0,0 +1,24 @@
+async function wait(ms) {
+    return new Promise((resolve)=>setTimeout(resolve, ms));
+}
+const retryWithDelay = async (fn, config)=>{
+    const retries = config?.retries ?? 3;
+    const delay = config?.delay ?? 1000;
+    try {
+        return await fn();
+    } catch (err) {
+        if (retries <= 0 || config?.retryIf && !config.retryIf(err)) {
+            return Promise.reject(err);
+        }
+        //delay the next call
+        await wait(delay);
+        //recursively call the same func
+        return retryWithDelay(fn, {
+            ...config,
+            retries: retries - 1,
+            delay
+        });
+    }
+};
+
+export { retryWithDelay, wait };

package/dist/esm/pages/builder.js

@@ -69,7 +69,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
                                             uid: "ROOT"
                                         })
                                     }),
-                                    editorImageToLayout && /*#__PURE__*/ jsx(ImageToLayout, {}),
+                                    /*#__PURE__*/ jsx(ImageToLayout, {
+                                        editorImageToLayout: editorImageToLayout || false
+                                    }),
                                     /*#__PURE__*/ jsx("div", {
                                         id: "visual-content"
                                     }),

package/dist/types/index.d.ts

@@ -114,6 +114,13 @@ declare const getFallbackV2: (fetcher: FetchFunc, data: {
     data: any;
 }[]) => Promise<{}>;
 
+type RetryConfig = {
+    retries?: number;
+    delay?: number;
+    retryIf?: (error: any) => boolean;
+};
+declare const retryWithDelay: <T = unknown>(fn: () => T, config?: RetryConfig) => Promise<T>;
+
 type PreviewPageProps = {
     components: Record<string, React.ComponentType<any>>;
     pageType: ShopType.PublishedThemePageType;
@@ -206,4 +213,4 @@ type Props = {
 };
 declare const TikTokPixel: ({ pixelId }: Props) => JSX.Element | null;
 
-export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFallbackV2, getFontFromGlobalStyle, getFonts, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPageProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, normalizePageSectionResponseV2, parseBuilderTemplateV2, useTrackingView };
+export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFallbackV2, getFontFromGlobalStyle, getFonts, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPageProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, normalizePageSectionResponseV2, parseBuilderTemplateV2, retryWithDelay, useTrackingView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.11.0",
+  "version": "1.12.0-next.3",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",