@gem-sdk/pages 2.0.0-dev.324 → 2.0.0-dev.408

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

@@ -62,7 +62,7 @@ const Footer = (props)=>{
                 })
             })
         }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans', {
+            className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE gp-font-sans', {
                 'gp-fixed gp-bottom-0 gp-w-full': shouldFixed
             }),
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {

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

@@ -13,6 +13,7 @@ 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 nextI18next = require('next-i18next');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -51,6 +52,7 @@ const Toolbox = ()=>{
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
+    const { i18n } = nextI18next.useTranslation();
     const setFontsToHead = (className, fonts)=>{
         // clear fonts
         if (!fonts?.length) {
@@ -393,6 +395,12 @@ const Toolbox = ()=>{
     }, [
         setSidebarMode
     ]);
+    const onChangeLanguage = react.useCallback((e)=>{
+        const mode = e.detail;
+        i18n.changeLanguage(mode.lang ?? 'en');
+    }, [
+        i18n
+    ]);
     const onUpdateInteractionItem = react.useCallback((e)=>{
         const interactionItem = e.detail;
         setInteractionItem(interactionItem);
@@ -433,6 +441,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
         window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         window.addEventListener('update-font-type', onUpdateFontType);
+        window.addEventListener('change-language', onChangeLanguage);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -457,6 +466,7 @@ const Toolbox = ()=>{
             window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
             window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
             window.removeEventListener('update-font-type', onUpdateFontType);
+            window.removeEventListener('change-language', onChangeLanguage);
         };
     }, [
         onAddEntity,
@@ -484,7 +494,8 @@ const Toolbox = ()=>{
         onUpdateInteractionSettingType,
         onUpdateFontType,
         onChangeSidebarMode,
-        onUpdateDynamicDiscountOffer
+        onUpdateDynamicDiscountOffer,
+        onChangeLanguage
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

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

@@ -58,7 +58,7 @@ const Footer = (props)=>{
                 })
             })
         }) : /*#__PURE__*/ jsx("div", {
-            className: cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans', {
+            className: cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE gp-font-sans', {
                 'gp-fixed gp-bottom-0 gp-w-full': shouldFixed
             }),
             children: /*#__PURE__*/ jsxs("div", {

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

@@ -9,6 +9,7 @@ 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 { useTranslation } from 'next-i18next';
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -47,6 +48,7 @@ const Toolbox = ()=>{
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
+    const { i18n } = useTranslation();
     const setFontsToHead = (className, fonts)=>{
         // clear fonts
         if (!fonts?.length) {
@@ -389,6 +391,12 @@ const Toolbox = ()=>{
     }, [
         setSidebarMode
     ]);
+    const onChangeLanguage = useCallback((e)=>{
+        const mode = e.detail;
+        i18n.changeLanguage(mode.lang ?? 'en');
+    }, [
+        i18n
+    ]);
     const onUpdateInteractionItem = useCallback((e)=>{
         const interactionItem = e.detail;
         setInteractionItem(interactionItem);
@@ -429,6 +437,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
         window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         window.addEventListener('update-font-type', onUpdateFontType);
+        window.addEventListener('change-language', onChangeLanguage);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -453,6 +462,7 @@ const Toolbox = ()=>{
             window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
             window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
             window.removeEventListener('update-font-type', onUpdateFontType);
+            window.removeEventListener('change-language', onChangeLanguage);
         };
     }, [
         onAddEntity,
@@ -480,7 +490,8 @@ const Toolbox = ()=>{
         onUpdateInteractionSettingType,
         onUpdateFontType,
         onChangeSidebarMode,
-        onUpdateDynamicDiscountOffer
+        onUpdateDynamicDiscountOffer,
+        onChangeLanguage
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "2.0.0-dev.324",
+  "version": "2.0.0-dev.408",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "14.2.20"
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.0.0-dev.324",
-    "@gem-sdk/plugin-cookie-bar": "2.0.0-dev.324",
-    "@gem-sdk/plugin-quick-view": "2.0.0-dev.324",
-    "@gem-sdk/plugin-sticky-add-to-cart": "2.0.0-dev.324"
+    "@gem-sdk/core": "2.0.0-dev.403",
+    "@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"
   },
   "peerDependencies": {
     "next": ">=13"