@gem-sdk/pages 1.23.0-staging.358 → 1.23.0-staging.387

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

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var core = require('@gem-sdk/core');
 
-const ACTIONS_DATA = [
+const BASE_DATA = [
     {
         title: 'Choose templates',
         content: 'inspired by CRO experts',
@@ -26,6 +26,14 @@ const ACTIONS_DATA = [
         id: 'gps-add-section-bottom-from-image'
     }
 ];
+const POST_PURCHASE_PAGE_DATA = [
+    {
+        title: 'Blank section',
+        content: 'to start from scratch',
+        hasAILogo: false,
+        id: 'gps-add-section-blank'
+    }
+];
 const FOOTER_HEIGHT = 48;
 const defaultPadding = {
     desktop: 'var(--g-ct-p)',
@@ -37,6 +45,14 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
     const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
     const [link, setLink] = react.useState('');
     const [isInput, setIsInput] = react.useState(false);
+    const editingPageType = core.useShopStore((s)=>s.pageType);
+    let ACTIONS_DATA = BASE_DATA;
+    if (editingPageType === 'POST_PURCHASE') {
+        ACTIONS_DATA = [
+            ...POST_PURCHASE_PAGE_DATA,
+            ...BASE_DATA
+        ].filter((item)=>item.id !== 'gps-add-section-bottom-from-url' && item.id !== 'gps-add-section-bottom-from-image');
+    }
     react.useEffect(()=>{
         if (!isInput || totalSection === 0) {
             setLink('');

package/dist/cjs/index.js

@@ -7,11 +7,13 @@ var getPreviewProps = require('./libs/api/get-preview-props.js');
 var getBuilderProps = require('./libs/api/get-builder-props.js');
 var getProductProps = require('./libs/api/get-product-props.js');
 var getStaticPagePropsV2 = require('./libs/api/get-static-page-props-v2.js');
+var getPostPurchasePropsPreview = require('./libs/api/get-post-purchase-props-preview.js');
 var getStaticPagePropsPreview = require('./libs/api/get-static-page-props-preview.js');
 var fetcher = require('./libs/fetcher.js');
 var getLayout = require('./libs/get-layout.js');
 var genCss = require('./libs/helpers/gen-css.js');
 var useTrackingView = require('./libs/hooks/use-tracking-view.js');
+var usePagePreview = require('./libs/hooks/usePagePreview.js');
 var userAgent = require('./libs/helpers/user-agent.js');
 var normalize = require('./libs/helpers/normalize.js');
 var getFallback = require('./libs/helpers/get-fallback.js');
@@ -43,12 +45,15 @@ exports.getPreviewProps = getPreviewProps.getPreviewProps;
 exports.getBuilderProps = getBuilderProps.getBuilderProps;
 exports.getProductProps = getProductProps.getProductProps;
 exports.getStaticPagePropsV2 = getStaticPagePropsV2.getStaticPagePropsV2;
+exports.getPostPurchasePropsPreview = getPostPurchasePropsPreview.getPostPurchasePropsPreview;
 exports.getStaticPagePropsPreview = getStaticPagePropsPreview.getStaticPagePropsPreview;
+exports.createAppAPIFetcher = fetcher.createAppAPIFetcher;
 exports.createFetcher = fetcher.createFetcher;
 exports.createShopifyFetcher = fetcher.createShopifyFetcher;
 exports.getLayout = getLayout.getLayout;
 exports.genCSS = genCss.genCSS;
 exports.useTrackingView = useTrackingView.useTrackingView;
+exports.usePagePreview = usePagePreview.usePagePreview;
 exports.isBot = userAgent.isBot;
 exports.normalizePageSectionResponseV2 = normalize.normalizePageSectionResponseV2;
 exports.parseBuilderTemplateV2 = normalize.parseBuilderTemplateV2;

package/dist/cjs/libs/api/get-post-purchase-props-preview.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var nextjs = require('@sentry/nextjs');
+var googleFonts = require('../google-fonts.js');
+var getFallback = require('../helpers/get-fallback.js');
+var normalize = require('../helpers/normalize.js');
+var usePagePreview = require('../hooks/usePagePreview.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const fetchThemePageDataByID = async (themePageId, fetcher, shopifyFetcher)=>{
+    const variables = {
+        themePageId
+    };
+    const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        fetcher([
+            core.ThemePageDocument,
+            variables
+        ]),
+        fetcher([
+            core.StorePropertyDocument
+        ]),
+        shopifyFetcher([
+            adapterShopify.ShopMetaDocument
+        ])
+    ]);
+    if (theme.status === 'rejected') {
+        throw new Error(theme.reason?.[0]);
+    }
+    return {
+        dataBuilder: theme.value.themePage,
+        storeProperty,
+        shopifyMeta
+    };
+};
+const fetchThemePageDataByTemplateID = async (libraryTemplateId, fetcher, shopifyFetcher)=>{
+    const variables = {
+        libraryTemplateId
+    };
+    const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        fetcher([
+            core.LibraryTemplateDocument,
+            variables
+        ]),
+        fetcher([
+            core.StorePropertyDocument
+        ]),
+        shopifyFetcher([
+            adapterShopify.ShopMetaDocument
+        ])
+    ]);
+    if (theme.status === 'rejected') {
+        throw new Error(theme.reason?.[0]);
+    }
+    return {
+        dataBuilder: theme.value.libraryTemplate,
+        storeProperty,
+        shopifyMeta
+    };
+};
+const getPostPurchasePropsPreview = (fetcher, shopifyFetcher, isTemplate)=>async (id)=>{
+        try {
+            const { dataBuilder, storeProperty, shopifyMeta } = isTemplate ? await fetchThemePageDataByTemplateID(id, fetcher, shopifyFetcher) : await fetchThemePageDataByID(id, fetcher, shopifyFetcher);
+            if (!dataBuilder) {
+                throw new Error(`No data builder found for slug: /preview/${id}`);
+            }
+            const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
+            const [elementFontStyle, fallback] = await Promise.all([
+                googleFonts.getFontStyleFromPageTemplate(pageTemplate),
+                getFallback.getFallbackV2(fetcher, pageTemplate)
+            ]);
+            const { seo, pageConfig } = usePagePreview.usePagePreview(dataBuilder, storeProperty, shopifyMeta);
+            return parseJson.serializableJson({
+                seo,
+                ...pageConfig,
+                elementFontStyle,
+                builderData: pageTemplate,
+                pageType: 'POST_PURCHASE',
+                swr: {
+                    fallback
+                }
+            });
+        } catch (err) {
+            nextjs.captureException(err);
+            throw err;
+        }
+    };
+
+exports.fetchThemePageDataByID = fetchThemePageDataByID;
+exports.fetchThemePageDataByTemplateID = fetchThemePageDataByTemplateID;
+exports.getPostPurchasePropsPreview = getPostPurchasePropsPreview;

package/dist/cjs/libs/fetcher.js

@@ -32,6 +32,38 @@ const createFetcher = (token)=>{
         });
     };
 };
+const createAppAPIFetcher = (token, shopID)=>{
+    const shopToken = token;
+    const endPoint = process.env.NEXT_APP_API_URL;
+    return async (args)=>{
+        const [query, variables, operationName] = args;
+        if (!shopToken) {
+            throw new Error('shopToken is not defined');
+        }
+        if (!endPoint) {
+            throw new Error('NEXT_APP_API_URL is not defined');
+        }
+        const headers = {
+            'Content-Type': 'application/json',
+            Authorization: `Token ${shopToken}`,
+            'X-GemX-Shop-ID': shopID || ''
+        };
+        return fetch(endPoint, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                query,
+                variables,
+                operationName
+            })
+        }).then((res)=>res.json()).then((res)=>{
+            if (res.errors) {
+                return Promise.reject(res.errors);
+            }
+            return res.data;
+        });
+    };
+};
 const createShopifyFetcher = (storefrontToken, handle)=>{
     const token = storefrontToken ?? process.env.NEXT_PUBLIC_STOREFRONT_TOKEN;
     const storefrontHandle = handle ?? process.env.NEXT_PUBLIC_STOREFRONT_HANDLE;
@@ -63,5 +95,6 @@ const createShopifyFetcher = (storefrontToken, handle)=>{
     };
 };
 
+exports.createAppAPIFetcher = createAppAPIFetcher;
 exports.createFetcher = createFetcher;
 exports.createShopifyFetcher = createShopifyFetcher;

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

@@ -2,20 +2,6 @@
 
 var genFonts = require('./helpers/gen-fonts.js');
 
-const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
-const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
-async function getFontForUA(url, UA) {
-    return fetch(url, {
-        headers: {
-            'User-Agent': UA
-        }
-    }).then((res)=>{
-        if (res.status === 200) {
-            return res.text();
-        }
-        return '';
-    });
-}
 const composeFonts = (fonts)=>{
     const uniqFonts = fonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
@@ -56,31 +42,19 @@ const createFontUrl = (fonts, option)=>{
     }
     return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
 };
-async function getFonts(fonts, option, maxSize) {
+async function getFonts(fonts, option) {
     /**
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
    */ const url = createFontUrl(fonts, option);
     if (!url) return '';
     try {
-        const [ie, chrome] = await Promise.all([
-            getFontForUA(url, IE_UA),
-            getFontForUA(url, CHROME_UA)
-        ]);
-        const value = ie + chrome;
-        if (maxSize) {
-            const textEncoder = new TextEncoder();
-            const size = value ? textEncoder.encode(value).length : 0;
-            if (Math.ceil(size / 1024) >= maxSize) {
-                return `@import url('${url}');`;
-            }
-        }
-        return value;
+        return `@import url('${url}');`;
     } catch (e) {
         return '';
     }
 }
-const getFontFromGlobalStyle = (data, maxSize)=>{
+const getFontFromGlobalStyle = (data)=>{
     if (!data) return '';
     try {
         const globalStyle = JSON.parse(data);
@@ -88,7 +62,7 @@ const getFontFromGlobalStyle = (data, maxSize)=>{
         const fonts = Object.entries(fontData).map(([, value])=>{
             return value;
         });
-        return getFonts(fonts, undefined, maxSize);
+        return getFonts(fonts);
     } catch  {
         return '';
     }

package/dist/cjs/libs/hooks/usePagePreview.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var generateManifres = require('../helpers/generate-manifres.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const usePagePreview = (dataBuilder, storeProperty, shopifyMeta)=>{
+    const mobileOnly = dataBuilder?.isMobile ?? false;
+    const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
+    const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+    const favicon = shopData?.storeProperty?.favicon ?? '/favicon/favicon-32x32.png';
+    const languageIsoCode = shopMeta?.localization.language.isoCode ?? null;
+    const countryIsoCode = shopMeta?.localization.country.isoCode ?? null;
+    const moneyFormat = shopMeta?.shop.moneyFormat ?? null;
+    const currency = shopMeta?.localization.country.currency.isoCode ?? null;
+    const swatches = parseJson.parseJson(shopData?.storeProperty?.swatchesConfig);
+    const locale = !languageIsoCode || !countryIsoCode ? null : `${languageIsoCode}-${countryIsoCode}`;
+    const seo = {
+        defaultTitle: shopMeta?.shop.name,
+        title: dataBuilder?.name,
+        openGraph: {
+            site_name: shopMeta?.shop.name,
+            locale: shopMeta?.localization.country.isoCode,
+            title: dataBuilder?.name ?? shopMeta?.shop.name
+        },
+        nofollow: true,
+        noindex: true,
+        canonical: `/preview/${dataBuilder?.id}`,
+        additionalMetaTags: [
+            {
+                name: 'theme-color',
+                content: '#000000'
+            }
+        ],
+        additionalLinkTags: [
+            {
+                rel: 'icon',
+                sizes: '32x32',
+                href: `${favicon}-/crop/1:1/center/-/smart_resize/32x32/`
+            },
+            {
+                rel: 'icon',
+                sizes: '16x16',
+                href: `${favicon}-/crop/1:1/center/-/smart_resize/16x16/`
+            },
+            {
+                rel: 'apple-touch-icon',
+                sizes: '180x180',
+                href: `${favicon}-/crop/1:1/center/-/smart_resize/180x180/`
+            },
+            {
+                rel: 'manifest',
+                href: generateManifres.generateManifest({
+                    theme_color: '#000000',
+                    background_color: '#ffffff',
+                    display: 'standalone',
+                    scope: '/',
+                    start_url: '/',
+                    name: shopMeta?.shop.name,
+                    short_name: shopMeta?.shop.name,
+                    description: shopMeta?.shop.description,
+                    icons: [
+                        {
+                            src: `${favicon}-/crop/1:1/center/-/smart_resize/192x192/`,
+                            sizes: '192x192',
+                            type: 'image/png',
+                            purpose: 'any maskable'
+                        },
+                        {
+                            src: `${favicon}-/crop/1:1/center/-/smart_resize/512x512/`,
+                            sizes: '512x512',
+                            type: 'image/png'
+                        }
+                    ]
+                })
+            }
+        ]
+    };
+    return {
+        seo,
+        pageConfig: {
+            mobileOnly,
+            locale,
+            languageIsoCode,
+            countryIsoCode,
+            moneyFormat,
+            currency,
+            swatches
+        }
+    };
+};
+
+exports.usePagePreview = usePagePreview;

package/dist/cjs/pages/builder.js

@@ -16,6 +16,9 @@ var Toolbar = require('../components/builder/Toolbar.js');
 
 const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
+    const isDisableHeaderFooter = ()=>{
+        return isThemeSectionEditor;
+    };
     const initState = react.useMemo(()=>({
             ROOT: {
                 uid: 'ROOT',
@@ -65,12 +68,14 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                 loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                     className: "builder gp-z-1 gp-relative",
                                     children: [
-                                        !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                            className: "gp-h-[40px] gp-bg-[#f4f4f4]"
-                                        }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {})),
+                                        !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "h-[40px] bg-[#f4f4f4]"
+                                        }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
+                                            pageType: pageType
+                                        })),
                                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             id: "storefront",
-                                            className: isThemeSectionEditor ? 'theme-section-editor' : '',
+                                            className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
                                             children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
                                                 children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
                                                     uid: "ROOT"
@@ -88,7 +93,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             id: "visual-content"
                                         }),
-                                        !isThemeSectionEditor && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
+                                        !isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {
+                                            pageType: pageType
+                                        })
                                     ]
                                 })
                             ]

package/dist/cjs/pages/static-v2.js

@@ -7,8 +7,10 @@ var Head = require('next/head');
 var router = require('next/router');
 var useTrackingView = require('../libs/hooks/use-tracking-view.js');
 var parseHtml = require('../libs/parse-html.js');
+var Header = require('../components/Header.js');
+var FooterForPostPurchase = require('../components/FooterForPostPurchase.js');
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, isPostPurchase, shopName })=>{
     const router$1 = router.useRouter();
     useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
     if (router$1.isFallback) {
@@ -62,19 +64,28 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderComponentProvider, {
                     components: components,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
-                        data: sectionData,
-                        children: builderData?.map((builder)=>/*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
-                                state: builder.data,
-                                lazy: builder.lazy,
-                                priority: builder.priority,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
-                                    uid: builder.uid
-                                })
-                            }, builder.uid))
-                    })
+                    children: [
+                        isPostPurchase && /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
+                            pageType: "POST_PURCHASE"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
+                            data: sectionData,
+                            children: builderData?.map((builder)=>/*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
+                                    state: builder.data,
+                                    lazy: builder.lazy,
+                                    priority: builder.priority,
+                                    isPostPurchase: isPostPurchase,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
+                                        uid: builder.uid
+                                    })
+                                }, builder.uid))
+                        }),
+                        isPostPurchase && /*#__PURE__*/ jsxRuntime.jsx(FooterForPostPurchase.default, {
+                            shopName: shopName || ''
+                        })
+                    ]
                 })
             })
         ]