cloudcommerce 2.4.2 → 2.5.0

package/packages/storefront/src/decap-cms/get-cms-config.ts

@@ -1,27 +1,69 @@
+import Deepmerge from '@fastify/deepmerge';
+import { i18n as _i18n } from '@ecomplus/utils';
+
 export const getCmsConfig = () => {
-  const baseDir = window.CMS_REPO_BASE_DIR || 'functions/ssr/';
+  const {
+    CMS_REPO_BASE_DIR,
+    CMS_LANG,
+    CMS_MAX_FILE_SIZE,
+    CMS,
+  } = window;
+  if (!CMS) throw Error('Missing global CMS');
+  const { domain } = window.$storefront?.settings || {};
+  const baseDir = CMS_REPO_BASE_DIR || 'functions/ssr/';
+  const locale = CMS_LANG || 'pt';
+  const i18n = (d: any) => _i18n(d, locale);
+  const deepmerge = Deepmerge();
+  CMS.registerLocale(locale, deepmerge(CMS.getLocale(locale), {
+    editor: {
+      editorControl: { field: { optional: '?' } },
+      editorWidgets: {
+        image: {
+          chooseDifferent: i18n({ en: 'Change image', pt: 'Mudar imagem' }),
+          remove: i18n({ en: 'Remove', pt: 'Remover' }),
+        },
+      },
+    },
+  }));
+  const maxFileSize = Math.max(CMS_MAX_FILE_SIZE || 0, 1000000);
   const config: Record<string, any> = {
+    locale,
     load_config_file: false,
-    media_folder: `${baseDir}template/public/img/uploads`,
+    publish_mode: 'editorial_workflow',
+    media_folder: `${baseDir}public/img/uploads`,
     public_folder: '/img/uploads',
+    site_url: `https://${domain}/~preview`,
+    display_url: `https://${domain}`,
+    logo_url: 'https://ecom.nyc3.digitaloceanspaces.com/storefront/cms.png',
+    show_preview_links: true,
+    search: false,
     slug: {
       encoding: 'ascii',
       clean_accents: true,
       sanitize_replacement: '-',
     },
-    collections: [
+    collections: i18n([
       {
-        name: 'settings',
-        label: 'Configurações',
-        description: 'Configurações gerais para identidade e metadados do site',
+        name: 'config',
+        label: {
+          en: 'Settings',
+          pt: 'Configurações',
+        },
+        description: {
+          en: 'General settings for site identity and metadata',
+          pt: 'Configurações gerais para identidade e metadados do site',
+        },
         delete: false,
         editor: {
           preview: false,
         },
         files: [
           {
-            name: 'general',
-            label: 'Configurações gerais',
+            name: 'settings',
+            label: {
+              en: 'General config',
+              pt: 'Configurações gerais',
+            },
             file: `${baseDir}content/settings.json`,
             editor: {
               preview: true,
@@ -33,25 +75,291 @@ export const getCmsConfig = () => {
                 widget: 'hidden',
               },
               {
-                label: 'Repositório',
+                label: 'Repository',
                 name: 'repository',
                 widget: 'hidden',
               },
               {
-                label: 'Domínio',
+                label: {
+                  en: 'Domain name',
+                  pt: 'Domínio',
+                },
                 name: 'domain',
                 widget: 'string',
               },
               {
-                label: 'Nome da loja',
+                label: {
+                  en: 'Store name',
+                  pt: 'Nome da loja',
+                },
                 name: 'name',
                 widget: 'string',
               },
+              {
+                label: {
+                  en: 'Short description',
+                  pt: 'Descrição curta',
+                },
+                name: 'description',
+                widget: 'text',
+              },
+              {
+                label: {
+                  en: 'Logo',
+                  pt: 'Logomarca',
+                },
+                name: 'logo',
+                widget: 'image',
+                media_library: {
+                  config: {
+                    max_file_size: maxFileSize,
+                  },
+                },
+              },
+              {
+                label: {
+                  en: 'Icon',
+                  pt: 'Ícone',
+                },
+                name: 'icon',
+                widget: 'image',
+                media_library: {
+                  config: {
+                    max_file_size: maxFileSize,
+                  },
+                },
+              },
+              {
+                label: {
+                  en: 'Primary color',
+                  pt: 'Cor primária',
+                },
+                name: 'primaryColor',
+                widget: 'color',
+              },
+              {
+                label: {
+                  en: 'Secondary color',
+                  pt: 'Cor secundária',
+                },
+                name: 'secondaryColor',
+                widget: 'color',
+                required: false,
+              },
+              {
+                label: {
+                  en: 'Contact email',
+                  pt: 'E-mail de contato',
+                },
+                name: 'email',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: {
+                  en: 'Service telephone',
+                  pt: 'Telefone de atendimento',
+                },
+                name: 'phone',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: {
+                  en: 'Store address',
+                  pt: 'Endereço da loja',
+                },
+                name: 'address',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: {
+                  en: 'Corporate name',
+                  pt: 'Razão social da empresa',
+                },
+                name: 'corporateName',
+                widget: 'string',
+              },
+              {
+                label: {
+                  en: 'Store document number',
+                  pt: 'CNPJ',
+                },
+                name: 'docNumber',
+                widget: 'string',
+              },
+              {
+                label: {
+                  en: 'Service links',
+                  pt: 'Links de atendimento',
+                },
+                name: 'serviceLinks',
+                widget: 'list',
+                summary: '{{fields.title}}',
+                fields: [
+                  {
+                    label: {
+                      en: 'Title',
+                      pt: 'Título',
+                    },
+                    name: 'title',
+                    widget: 'string',
+                  },
+                  {
+                    label: 'Link',
+                    name: 'href',
+                    widget: 'string',
+                  },
+                ],
+              },
+              {
+                label: {
+                  en: 'Payment methods',
+                  pt: 'Formas de pagamento',
+                },
+                name: 'paymentMethods',
+                widget: 'select',
+                multiple: true,
+                options: [
+                  'pix',
+                  'visa',
+                  'mastercard',
+                  'elo',
+                  'amex',
+                  'hipercard',
+                  'boleto',
+                  'diners',
+                  'discover',
+                ],
+              },
+              {
+                label: 'WhatsApp',
+                name: 'whatsapp',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'Instagram',
+                name: 'instagram',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'Facebook',
+                name: 'facebook',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'X / Twitter',
+                name: 'twitter',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'YouTube',
+                name: 'youtube',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'TikTok',
+                name: 'tiktok',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'Pinterest',
+                name: 'pinterest',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: 'Threads',
+                name: 'threads',
+                widget: 'string',
+                required: false,
+              },
+              {
+                label: {
+                  en: 'Default locale',
+                  pt: 'Língua padrão',
+                },
+                name: 'lang',
+                widget: 'select',
+                options: [
+                  {
+                    label: 'Português',
+                    value: 'pt_br',
+                  },
+                  {
+                    label: 'Inglês',
+                    value: 'en_us',
+                  },
+                ],
+                default: 'pt_br',
+              },
+              {
+                label: {
+                  en: 'Currency code',
+                  pt: 'Código da moeda',
+                },
+                name: 'currency',
+                widget: 'hidden',
+                default: 'BRL',
+              },
+              {
+                label: {
+                  en: 'Currency symbol',
+                  pt: 'Símbolo da moeda',
+                },
+                name: 'currencySymbol',
+                widget: 'hidden',
+                default: 'R$',
+              },
+              {
+                label: {
+                  en: 'Country code',
+                  pt: 'Código do país',
+                },
+                name: 'countryCode',
+                widget: 'hidden',
+                default: 'BR',
+              },
+              {
+                name: 'modules',
+                widget: 'hidden',
+              },
+              {
+                name: 'cartUrl',
+                widget: 'hidden',
+              },
+              {
+                name: 'checkoutUrl',
+                widget: 'hidden',
+              },
+              {
+                name: 'accountUrl',
+                widget: 'hidden',
+              },
+              {
+                name: 'ordersUrl',
+                widget: 'hidden',
+              },
+              {
+                name: 'favoritesUrl',
+                widget: 'hidden',
+              },
+              {
+                name: 'metafields',
+                widget: 'hidden',
+              },
             ],
           },
         ],
       },
-    ],
+    ]),
   };
   return config;
 };

package/packages/storefront/src/lib/assets/decap-cms.css

@@ -0,0 +1,81 @@
+body {
+  [class*="FieldLabel"] {
+    font-size: 13px; 
+    text-transform: none;
+    font-weight: 500;
+    width: calc(100% - 30px);
+    ~ input,
+    ~ textarea {
+      padding: 12px 14px;
+      border-width: 1px;
+    }
+    ~ [class*="ColorSwatch"] ~ input {
+      padding: 16px 70px;
+    }
+    ~ div[class*="83wr9v"] {
+      padding: 14px;
+    }
+    ~ div:not(:has([class*="TopBarContainer"])) {
+      &:has([class$="-control"]) {
+        border-width: 1px;
+        [class$="-control"] {
+          padding-left: 4px;
+        }
+      }
+      &:has([class*="ImageWrapper"]) {
+        border-width: 1px;
+      }
+    }
+  }
+  [class*="1qu85o2-FieldLabel"] {
+    background: none;
+  }
+  [class*="TopBarContainer"] {
+    [class*="ExpandButtonContainer"] {
+      display: none;
+    }
+  }
+  [class*="ControlContainer"]:has([class*="TopBarContainer"]) {
+    > [class*="FieldLabel"] {
+      display: none;
+    }
+    > div {
+      border-radius: 5px;
+    }
+  }
+  [class*="listControlItem"] {
+    [class*="ControlContainer"]:first-of-type {
+      margin-top: 12px;
+    }
+    [class*="DragIconContainer"] [class*="IconWrapper"] {
+      width: 26px;
+      height: 26px;
+    }
+  }
+  [class*="StyledListItemTopBar"] {
+    background-color: rgba(223 223 227 / .6);
+    ~ div {
+      border-color: rgba(223 223 227 / .6);
+      border-width: 1px;
+    }
+  }
+  [class*="NestedObjectLabel"] {
+    background-color: rgba(223 223 227 / .2);
+  }
+  [class*="ControlContainer"] {
+    [class*="ImageWrapper"] {
+      width: 100%;
+      margin: 0 0 12px;
+    }
+    [class*="FileWidgetButton"] {
+      display: inline-block;
+      margin: 0 12px 0 0;
+    }
+    [class*="FileWidgetButton-button"]:not(:first-of-type) {
+      display: none;
+    }
+  }
+  .Pane.Pane1 {
+    max-width: 600px;
+  }
+}

package/packages/storefront/src/lib/components/Drawer.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  toRef,
   ref,
   computed,
   watch,
@@ -8,7 +7,6 @@ import {
 } from 'vue';
 
 export interface Props {
-  modelValue?: boolean;
   isHidden?: boolean;
   placement?: 'start' | 'end' | 'top' | 'bottom';
   position?: 'fixed' | 'absolute';
@@ -22,7 +20,6 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
   isHidden: false,
   placement: 'start',
   position: 'fixed',
@@ -31,10 +28,8 @@ const props = withDefaults(defineProps<Props>(), {
   backdropTarget: '#teleported-top',
   canLockScroll: true,
 });
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>();
-const close = () => emit('update:modelValue', false);
+const model = defineModel<boolean>({ default: false });
+const close = () => { model.value = false; };
 const drawer = ref<HTMLElement | null>(null);
 const outsideClickListener = (ev: MouseEvent) => {
   if (!drawer.value?.contains(ev.target as Node)) {
@@ -48,7 +43,7 @@ const escClickListener = (ev: KeyboardEvent) => {
   }
 };
 const scrollbarWidth = ref(0);
-watch(toRef(props, 'modelValue'), async (isOpen) => {
+watch(model, async (isOpen) => {
   if (isOpen) {
     if (props.canLockScroll) {
       scrollbarWidth.value = window.innerWidth - document.documentElement.clientWidth;
@@ -79,7 +74,7 @@ const slideTo = computed(() => {
 });
 const animationClassName = ref<string | null>(null);
 if (props.animation === 'scale') {
-  watch(toRef(props, 'modelValue'), (isShown) => {
+  watch(model, (isShown) => {
     if (!isShown) {
       animationClassName.value = 'transition scale-90';
     } else {
@@ -87,7 +82,7 @@ if (props.animation === 'scale') {
         setTimeout(() => {
           animationClassName.value = 'transition';
           setTimeout(() => {
-            if (props.modelValue) animationClassName.value = '';
+            if (model.value) animationClassName.value = '';
           }, 300);
         }, 50);
       });
@@ -109,7 +104,7 @@ const isPlacementX = computed(() => {
 <template>
   <Fade :slide="slideTo" speed="slow" is-floating>
     <dialog
-      v-if="modelValue"
+      v-if="model"
       v-show="!isHidden"
       ref="drawer"
       class="z-40 w-screen p-0"
@@ -129,7 +124,7 @@ const isPlacementX = computed(() => {
           : !isPlacementX
             ? `calc(100vw - ${scrollbarWidth}px)` : undefined,
       }"
-      :open="modelValue"
+      :open="model"
       :data-drawer="placement"
     >
       <div class="relative h-full">
@@ -151,7 +146,7 @@ const isPlacementX = computed(() => {
       <Teleport v-if="backdropTarget" :to="backdropTarget">
         <Fade>
           <div
-            v-if="modelValue && !isHidden"
+            v-if="model && !isHidden"
             class="size-screen fixed left-0 top-0 z-30 bg-black/50"
             data-drawer-backdrop
           ></div>

package/packages/storefront/src/lib/components/QuantitySelector.vue

@@ -22,7 +22,6 @@ export const quantitySelectorKey = Symbol('quantitySelector') as
 
 <script setup lang="ts">
 export interface Props {
-  modelValue?: number;
   min?: number;
   max?: number;
   step?: number;
@@ -31,28 +30,24 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: 1,
   min: 1,
 });
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>();
+const model = defineModel<number>({ default: 1 });
 const input = ref<HTMLInputElement | null>(null);
 const inputId = useId('NInput');
 const value = computed({
   get() {
-    return props.modelValue;
+    return model.value;
   },
   set(_value) {
     if (_value < props.min) {
       _value = props.min;
       (input.value as HTMLInputElement).value = `${_value}`;
-    }
-    if (props.max && _value > props.max) {
+    } else if (props.max && _value > props.max) {
       _value = props.max;
       (input.value as HTMLInputElement).value = `${_value}`;
     }
-    emit('update:modelValue', _value);
+    model.value = _value;
   },
 });
 const isBoundMin = computed(() => {

package/packages/storefront/src/lib/composables/use-pitch-bar.ts

@@ -4,11 +4,7 @@ import { parseShippingPhrase } from '@@sf/state/modules-info';
 import { useCmsPreview } from '@@sf/state/use-cms-preview';
 
 export interface Props {
-  slides: Array<{
-    href?: string;
-    target?: string;
-    html: string;
-  }>;
+  slides: LayoutContent['header']['pitchBar'];
 }
 
 const parseLayoutContent = (layoutContent: LayoutContent) => {
@@ -20,11 +16,9 @@ const parseLayoutContent = (layoutContent: LayoutContent) => {
 };
 
 const usePitchBar = (props: Props) => {
-  const { liveContent } = useCmsPreview('layout');
+  const { liveContent } = useCmsPreview(['layout', 'header', 'pitchBar']);
   const parsedContents = computed(() => {
-    const slides = liveContent.value
-      ? parseLayoutContent(liveContent.value).slides
-      : props.slides;
+    const slides = liveContent.value || props.slides;
     return slides.map(({ html }) => {
       return parseShippingPhrase(html).value
         .replace(/<\/?p>/g, '')

package/packages/storefront/src/lib/composables/use-product-shelf.ts

@@ -1,10 +1,12 @@
 import type { ResourceId, Collections, SearchItem } from '@cloudcommerce/types';
+import type { SectionPreviewProps } from '@@sf/state/use-cms-preview';
 import { ref, shallowReactive } from 'vue';
 import api from '@cloudcommerce/api';
 import { inStock as checkInStock } from '@ecomplus/utils';
 import { i19relatedProducts } from '@@i18n';
+import { useSectionPreview } from '@@sf/state/use-cms-preview';
 
-export interface Props {
+export interface Props extends Partial<SectionPreviewProps> {
   collectionId?: ResourceId | null;
   searchQuery?: `&${string}` | '';
   sort?: '-sales' | '-created_at' | 'price' | '-price' | '-price_discount' | string;
@@ -24,6 +26,7 @@ const useProductShelf = (props: Props) => {
   let fetching: Promise<void> | null = null;
   const fetchError = ref<Error | null>(null);
   const products = shallowReactive<SearchItem[]>(props.products || []);
+  useSectionPreview(props, { title, titleLink, products });
 
   if (!props.products) {
     isFetching.value = true;

package/packages/storefront/src/lib/content.d.ts

@@ -5,14 +5,29 @@ export type SettingsContent = _SettingsContent &
 
 type _LayoutContent = typeof import('content/layout.json');
 
+type _PitchBarSlide = {
+  href?: string;
+  target?: string;
+  html: string;
+};
+
 export type LayoutContent = Omit<_LayoutContent, 'header' | 'footer'> & {
-  header: Record<string, unknown> & _LayoutContent['header'],
-  footer: Record<string, unknown> & Partial<_LayoutContent['footer']>,
+  header: { custom?: Record<string, unknown> } &
+    Omit<_LayoutContent['header'], 'pitchBar'> &
+    {
+      pitchBar: Array<
+        _LayoutContent['header']['pitchBar'][0] extends undefined
+          ? _PitchBarSlide
+          : Partial<_LayoutContent['header']['pitchBar'][0]> & _PitchBarSlide
+      >,
+    },
+  footer: { custom?: Record<string, unknown> } & Partial<_LayoutContent['footer']>,
+  custom?: Record<string, unknown>,
 };
 
 export interface PageContent {
-  meta_title?: string;
-  meta_description?: string;
+  metaTitle?: string;
+  metaDescription?: string;
   hero?: {
     [k: string]: unknown,
     autoplay?: number,

package/packages/storefront/src/lib/layouts/BaseBody.astro

@@ -1,4 +1,7 @@
 ---
+import * as url from 'node:url';
+import { join as joinPath } from 'node:path';
+import { readFileSync } from 'node:fs';
 import '@@sf/assets/reset.css';
 import '@@sf/assets/base.css';
 import '@@sf/assets/forms.css';
@@ -7,6 +10,15 @@ import '@@sf/assets/tooltip.css';
 // import 'uno.css';
 import Picture from '@@sf/components/Picture.astro';
 
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+const pkgJson = readFileSync(joinPath(__dirname, '../../../package.json'), 'utf-8');
+const {
+  name: pkgName,
+  version: pkgVersion,
+} = JSON.parse(pkgJson);
+const getInlineVersionLog = () => {
+  return `console.log('%c${pkgName} v${pkgVersion}', 'font-weight:bold')`;
+};
 const { settings } = Astro.locals.routeContext;
 ---
 
@@ -28,4 +40,5 @@ const { settings } = Astro.locals.routeContext;
       hasImg={false}
     />
   }
+  <script is:inline set:html={getInlineVersionLog()} />
 </body>