cloudcommerce 0.0.83 → 0.0.85

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -25,7 +25,7 @@
     "prerelease": "sh scripts/prerelease.sh"
   },
   "dependencies": {
-    "@astrojs/image": "^0.7.0",
+    "@astrojs/image": "^0.7.1",
     "@astrojs/node": "^1.0.1",
     "@astrojs/partytown": "^1.0.0",
     "@astrojs/prefetch": "^0.0.7",
@@ -34,19 +34,20 @@
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@ecomplus/utils": "^1.4.1",
+    "@iconify-json/bxl": "^1.1.4",
     "@iconify-json/heroicons": "^1.1.4",
     "@iconify-json/logos": "^1.1.16",
     "@nanostores/vue": "^0.6.0",
     "@picocss/pico": "^1.5.5",
-    "@unocss/preset-attributify": "^0.45.21",
-    "@unocss/preset-icons": "^0.45.21",
-    "astro": "^1.2.6",
+    "@unocss/preset-icons": "^0.45.22",
+    "astro": "^1.3.0",
     "color": "^4.2.3",
     "dotenv": "^16.0.2",
     "firebase": "^9.10.0",
+    "image-size": "^1.0.2",
     "nanostores": "^0.7.0",
-    "rollup": "^2.79.0",
-    "unocss": "^0.45.21",
+    "rollup": "^2.79.1",
+    "unocss": "^0.45.22",
     "vite": "^3.1.3",
     "vite-plugin-pwa": "^0.12.8",
     "vue": "^3.2.39"

package/packages/storefront/src/env.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />
 /// <reference types="vite-plugin-pwa/client" />
 /// <reference types="../client" />

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

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+export interface Props {
+}
+</script>
+
+<template>
+  <header class="header bg-surface bg-opacity-70 sticky py-1 sm:py-2">
+    <div class="container">
+      <div class="grid items-center">
+        <div class="i-bars-3-bottom-left md:hidden"></div>
+        <slot name="logo"></slot>
+      </div>
+    </div>
+  </header>
+</template>

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

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import type CmsHeader from '../../types/cms-header';
+import type CmsContacts from '../../types/cms-contacts';
+
+export interface Props {
+  marketingStripe: CmsHeader['marketing_stripe'];
+  hasNavbar?: boolean;
+  pageLinks: CmsHeader['contacts_stripe']['pages'];
+  contacts: CmsContacts;
+  hasPhoneLinks?: boolean;
+  hasNetworkLinks?: boolean;
+  socialNetworks?: string[];
+  countdownClass?: string;
+  pageLinksClass?: string;
+  contactLinksClass?: string;
+  socialNetworksClass?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  hasNavbar: true,
+  hasPhoneLinks: true,
+  hasNetworksLinks: true,
+  socialNetworks() {
+    return ['facebook', 'twitter', 'youtube', 'pinterest', 'instagram', 'tiktok'];
+  },
+});
+</script>
+
+<template>
+  <div class="top-bar w-full bg-surface">
+    <slot
+      name="countdown"
+      v-bind="{ marketingStripe, countdownClass }"
+    >
+      <template v-if="marketingStripe && marketingStripe.text">
+        <component
+          :is="marketingStripe.link ? 'a' : 'div'"
+          class="top-bar__countdown block text-sm text-center p-1
+            whitespace-nowrap overflow-x-auto"
+          :class="[countdownClass, marketingStripe.link ? 'primary' : 'secondary']"
+          :href="marketingStripe.link"
+        >
+          {{ marketingStripe.text }}
+        </component>
+      </template>
+    </slot>
+
+    <div
+      v-if="hasNavbar"
+      class="top-bar__nav hidden md:block py-2"
+    >
+      <div class="container">
+        <div class="flex items-center lg:px-2 xl:px-4">
+          <div class="grow text-xs">
+            <slot
+              name="contacts-container"
+              v-bind="{ pageLinks, pageLinksClass }"
+            >
+              <nav
+                v-if="pageLinks"
+                class="top-bar__page-links inline-block mr-4 font-semibold"
+                :class="pageLinksClass"
+              >
+                <a
+                  v-for="({ link, title }, i) in pageLinks"
+                  class="mr-2 lg:mr-3"
+                  :key="i"
+                  :href="link"
+                >
+                  {{ title }}
+                </a>
+              </nav>
+            </slot>
+
+            <slot
+              name="contact-links"
+              v-bind="{ contacts, hasPhoneLinks, contactLinksClass }"
+            >
+              <div
+                v-if="hasPhoneLinks"
+                class="top-bar__contact-links inline-block"
+                :class="contactLinksClass"
+              >
+                <a
+                  v-if="contacts.whatsapp"
+                  href="javascript:;"
+                  target="_blank"
+                  rel="noopener"
+                  :data-whatsapp-tel="contacts.whatsapp.replace(/\D/g, '')"
+                  class="mr-2"
+                >
+                  <i class="i-whatsapp"></i>
+                  {{ contacts.whatsapp }}
+                </a>
+                <a
+                  v-if="contacts.phone"
+                  :href="`tel:+${contacts.phone.replace(/\D/g, '')}`"
+                  target="_blank"
+                  rel="noopener"
+                  class="mr-2"
+                >
+                  <i class="i-phone"></i>
+                  {{ contacts.phone }}
+                </a>
+              </div>
+            </slot>
+          </div>
+
+          <slot
+            name="social-networks"
+            v-bind="{ contacts, hasNetworkLinks, socialNetworksClass }"
+          >
+            <div
+              v-if="hasNetworkLinks"
+              class="top-bar__social-networks leading-none"
+            >
+              <template v-for="network in socialNetworks">
+                <template v-if="contacts[network]">
+                  <a
+                    :key="network"
+                    :href="contacts[network]"
+                    target="_blank"
+                    rel="noopener"
+                    class="ml-1"
+                  >
+                    <i v-if="network === 'facebook'" class="i-facebook"></i>
+                    <i v-else-if="network === 'youtube'" class="i-youtube"></i>
+                    <i v-else-if="network === 'twitter'" class="i-twitter"></i>
+                    <i v-else-if="network === 'pinterest'" class="i-pinterest"></i>
+                    <i v-else-if="network === 'instagram'" class="i-instagram"></i>
+                    <i v-else-if="network === 'tiktok'" class="i-tiktok"></i>
+                  </a>
+                </template>
+              </template>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/packages/storefront/src/lib/helpers/image.ts

@@ -0,0 +1,36 @@
+import imageSize from 'image-size';
+// eslint-disable-next-line import/no-unresolved
+import { getImage as _getImage } from '@astrojs/image';
+
+const tryImageSize = (src: string) => {
+  let dimensions: { width?: number, height?: number } = {};
+  if (typeof src === 'string' && src.startsWith('/')) {
+    try {
+      dimensions = imageSize(`public${src}`);
+    } catch (e) {
+      dimensions = {};
+    }
+  }
+  return dimensions;
+};
+
+const getImage = (options: Parameters<typeof _getImage>[0]) => {
+  const { src } = options;
+  if (
+    typeof src === 'string'
+    && !options.aspectRatio
+    && (!options.width || !options.height)
+  ) {
+    const { width, height } = tryImageSize(src);
+    return _getImage({
+      width,
+      ...options,
+      aspectRatio: width && height ? width / height : 1,
+    });
+  }
+  return _getImage(options);
+};
+
+export default getImage;
+
+export { tryImageSize, getImage };

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

@@ -1,8 +1,9 @@
 ---
+import type CmsCode from '../../types/cms-code';
 import type { PageContext } from '../ssr-context';
 import Color from 'color';
-import MetaHead from './meta/Head.astro';
-import MetaJson from './meta/Json.astro';
+import BaseHead from './BaseHead.astro';
+import BaseStateJson from './BaseStateJson.astro';
 import '@picocss/pico/css/pico.min.css';
 
 export interface Props {
@@ -17,7 +18,7 @@ const {
   secondaryColor,
   cms,
 } = pageContext;
-const cmsCustomCode = cms('code') as typeof import('../../../content/code.json');
+const cmsCustomCode = cms('code') as CmsCode;
 
 const brandColors = {
   primary: primaryColor,
@@ -44,7 +45,7 @@ Object.keys(brandColors).forEach((colorName) => {
     const colorShift = colorVariants[colorVariant];
     const colorLabel = `${colorName}-${colorVariant}`;
     colorCSSVars[colorLabel] = color.darken(colorShift).hex();
-    if (Number(colorLabel) > 100 && Number(colorLabel) < 900) {
+    if (Number(colorVariant) > 100 && Number(colorVariant) < 900) {
       colorCSSVars[`${colorLabel}-yiq`] = color.isLight()
         ? 'var(--yiq-text-dark)' : 'var(--yiq-text-light)';
       colorCSSVars[`${colorLabel}-rgb`] = `${color.red()}, ${color.green()}, ${color.blue()}`;
@@ -56,8 +57,8 @@ Object.keys(brandColors).forEach((colorName) => {
 <!DOCTYPE html>
 <html lang={lang.replace('_', '-')}>
 <head>
-  <MetaHead pageContext={pageContext} title={title} />
-  <MetaJson pageContext={pageContext} />
+  <BaseHead pageContext={pageContext} title={title} />
+  <BaseStateJson pageContext={pageContext} />
   <slot name="before-head-end">
     {cmsCustomCode.css && <style>{cmsCustomCode.css}</style>}
     {cmsCustomCode.html_head && <Fragment set:html={cmsCustomCode.html_head} />}
@@ -89,25 +90,35 @@ Object.keys(brandColors).forEach((colorName) => {
 
 <style is:global define:vars={colorCSSVars}>
   :root {
+    --content-max-width: 80rem;
     --white: #fff;
-    --gray: #6c757d;
-    --gray-dark: #343a40;
+    --gray-50: theme('colors.gray.50');
+    --gray-200: theme('colors.gray.200');
+    --gray-700: theme('colors.gray.700');
+    --gray-800: theme('colors.gray.800');
+    --gray-900: theme('colors.gray.900');
+    --surface-color: var(--gray-50);
+    --surface-border-color: var(--gray-200);
     --yiq-text-light: var(--white);
-    --yiq-text-dark: var(--gray-dark);
+    --yiq-text-dark: var(--gray-900);
   }
   body,
   body [data-theme=light],
   body [data-theme=dark] {
     --primary: var(--primary-500);
     --primary-hover: var(--primary-700);
-    --primary-focus: var(--primary-50);
+    --primary-focus: rgba(var(--primary-200-rgb), 0.2);
     --primary-inverse: var(--primary-500-yiq);
     --secondary: var(--secondary-500);
     --secondary-hover: var(--secondary-700);
-    --secondary-focus: var(--secondary-50);
+    --secondary-focus: rgba(var(--secondary-200-rgb), 0.2);
     --secondary-inverse: var(--secondary-500-yiq);
   }
   @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme=light]) {
+      --surface-color: var(--gray-800);
+      --surface-border-color: var(--gray-700);
+    }
     :root:not([data-theme=light]) a {
       --color: var(--primary-200);
     }
@@ -115,10 +126,7 @@ Object.keys(brandColors).forEach((colorName) => {
       --color: var(--primary-400);
     }
   }
-  [data-theme=light] a {
-    --color: var(--primary) !important;
-  }
-  [data-theme=light] a:is([aria-current], :hover, :active, :focus) {
-    --color: var(--primary-hover) !important;
+  body {
+    overflow-x: hidden;
   }
 </style>

package/packages/storefront/src/lib/layouts/{meta/Head.astro → BaseHead.astro}

@@ -1,5 +1,6 @@
 ---
-import type { PageContext } from '../../ssr-context';
+import type CmsSocial from '../../types/cms-social';
+import type { PageContext } from '../ssr-context';
 import ecomUtils from '@ecomplus/utils';
 
 export interface Props {
@@ -22,7 +23,7 @@ const title = state.meta_title || state.name || state.title || Astro.props.title
 const description = state.meta_description || state.short_description || settings.description;
 
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site || `https://${domain}`);
-const cmsSocial = cms('social') as typeof import('../../../../content/social.json');
+const cmsSocial = cms('social') as CmsSocial;
 const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
 let ogImage: string | undefined;
 if (apiDoc) {
@@ -47,7 +48,7 @@ if (!ogImage) {
 <title>{title}</title>
 <meta name="description" content={description}>
 <meta name="author" content={settings.name}>
-<meta name="generator" content="E-Com Plus Cloud Commerce">
+<meta name="generator" content={Astro.generator} />
 <link rel="canonical" href={canonicalUrl} />
 <link rel="apple-touch-icon" href={settings.icon} />
 <meta name="apple-mobile-web-app-capable" content="yes">

package/packages/storefront/src/lib/layouts/{meta/Json.astro → BaseStateJson.astro}

@@ -1,5 +1,5 @@
 ---
-import type { PageContext } from '../../ssr-context';
+import type { PageContext } from '../ssr-context';
 import ecomUtils from '@ecomplus/utils';
 
 export interface Props {

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

@@ -1,6 +1,7 @@
 ---
 import type { PageContext } from '../ssr-context';
 import Base from './Base.astro';
+import Header from './PagesHeader.astro';
 
 export interface Props {
   pageContext: PageContext;
@@ -15,13 +16,7 @@ const { pageContext, title } = Astro.props as Props;
     <slot name="before-head-end" />
   </Fragment>
   <slot name="header">
-    <div class="i-shopping-cart" text="sky-400" />
-    <div class="i-google-pay w-32" />
-    <div class="i-logos:apple bg-primary" />
-    <div class="i-heroicons:user bg-primary-300" />
-    <div class="i-user bg-primary-700" />
-    <div class="i-user bg-secondary-hover" />
-    <div class="i-user bg-contrast" />
+    <Header pageContext={pageContext} />
   </slot>
   <slot />
   <Fragment slot="before-body-end">

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

@@ -0,0 +1,92 @@
+---
+import type { Categories } from '@cloudcommerce/api/types';
+import type CmsHeader from '../../types/cms-header';
+import type CmsContacts from '../../types/cms-contacts';
+import type { PageContext } from '../ssr-context';
+import getImage from '../helpers/image';
+import TopBar, { Props as TopBarProps } from '../components/TopBar.vue';
+import TheHeader from '../components/TheHeader.vue';
+
+export interface Props {
+  pageContext: PageContext;
+  topBarProps?: Partial<TopBarProps>;
+  logoTransform?: {
+    width?: number;
+    height?: number;
+    quality?: number;
+  };
+}
+
+declare global {
+  var TopBarProps: TopBarProps;
+}
+
+const {
+  pageContext: {
+    apiState,
+    settings,
+    cms,
+  },
+  topBarProps,
+  logoTransform,
+} = Astro.props as Props;
+const header = cms('header') as CmsHeader;
+const contacts = cms('contacts') as CmsContacts;
+const customThemeName = settings.theme.custom || '';
+
+let headerCategories: Array<{ slug: string, name: string }> = [];
+let isCategoriesNavFull: boolean | undefined;
+if (header.categories_list) {
+  if (header.categories_list.featured.length) {
+    // Selected categories/collections/brands
+    headerCategories = header.categories_list.featured.map((pathAndName) => {
+      const [path, name] = pathAndName.split('?');
+      return { slug: path.slice(1), name };
+    });
+  }
+  if (header.categories_list.random) {
+    const mainCategories: Categories[] | undefined = apiState
+      .categories?.filter(({ parent }) => (!parent || !parent.slug));
+    if (mainCategories) {
+      for (let i = 0; i < header.categories_list.random && i < mainCategories.length; i++) {
+        if (!headerCategories.find(({ slug }) => mainCategories[i].slug === slug)) {
+          headerCategories.push({
+            slug: mainCategories[i].slug,
+            name: mainCategories[i].name,
+          });
+        }
+      }
+    }
+  }
+  isCategoriesNavFull = header.categories_list.full_width;
+}
+const hasMegamenu: boolean | undefined = header.desktop_megamenu;
+const isAlphabeticalOrderSubmenu: boolean | undefined = header.alphabetical_order_submenu;
+const isFullWidthSubmenu: boolean | undefined = header.full_width_submenu;
+
+globalThis.TopBarProps = {
+  marketingStripe: header.marketing_stripe,
+  pageLinks: header.contacts_stripe.pages,
+  hasPhoneLinks: header.contacts_stripe.phone_wpp,
+  hasNetworkLinks: header.contacts_stripe.socials,
+  contacts,
+  ...Astro.props.topBarProps,
+};
+
+const logoWebpAttrs = await getImage({
+  src: settings.logo,
+  width: 150,
+  format: 'webp',
+  quality: 100,
+  ...logoTransform,
+});
+---
+
+<slot name="top-bar">
+  <TopBar {...globalThis.TopBarProps} />
+</slot>
+<slot name="header">
+  <TheHeader>
+    <img slot="logo" {...logoWebpAttrs} alt={`${settings.name} (logo)`} />
+  </TheHeader>
+</slot>

package/packages/storefront/src/lib/ssr-context.ts

@@ -1,10 +1,8 @@
 import type { AstroGlobal } from 'astro';
 import type { BaseConfig } from '@cloudcommerce/config';
+import type CmsSettings from '../types/cms-settings';
 import api, { ApiError, ApiEndpoint } from '@cloudcommerce/api';
 import _getConfig from '../../storefront.config.mjs';
-import settings from '../../content/settings.json';
-
-type CmsSettings = typeof settings;
 
 type StorefrontConfig = {
   storeId: BaseConfig['storeId'],
@@ -24,6 +22,10 @@ type StorefrontConfig = {
 
 const getConfig: () => StorefrontConfig = _getConfig;
 
+declare global {
+  // eslint-disable-next-line
+  var api_prefetch_endpoints: ApiEndpoint[];
+}
 if (!globalThis.api_prefetch_endpoints) {
   globalThis.api_prefetch_endpoints = ['categories'];
 }
@@ -76,7 +78,7 @@ const loadPageContext = async (Astro: AstroGlobal, {
       apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
     }
     prefetchResponses.forEach(({ config: { endpoint }, data }) => {
-      apiState[endpoint] = data;
+      apiState[endpoint] = data.result || data;
     });
   } catch (err: any) {
     const error: ApiError = err;

package/packages/storefront/src/pages/[...slug].astro

@@ -2,6 +2,10 @@
 import ViewWildcard from '../lib/views/[...slug].astro';
 import loadPageContext, { PageContext } from '../lib/ssr-context';
 
+if (String(Astro.params.slug).endsWith('.css.map')) {
+  return new Response(null, { status: 404 });
+}
+
 let pageContext: PageContext;
 let loadError: any;
 try {

package/packages/storefront/src/types/cms-code.d.ts

@@ -0,0 +1,5 @@
+type CmsCode = typeof import('../../content/code.json');
+
+export default CmsCode;
+
+export type { CmsCode };

package/packages/storefront/src/types/cms-contacts.d.ts

@@ -0,0 +1,5 @@
+type CmsContacts = typeof import('../../content/contacts.json');
+
+export default CmsContacts;
+
+export type { CmsContacts };

package/packages/storefront/src/types/cms-header.d.ts

@@ -0,0 +1,5 @@
+type CmsHeader = typeof import('../../content/header.json');
+
+export default CmsHeader;
+
+export type { CmsHeader };

package/packages/storefront/src/types/cms-settings.d.ts

@@ -0,0 +1,5 @@
+type CmsSettings = typeof import('../../content/settings.json');
+
+export default CmsSettings;
+
+export type { CmsSettings };

package/packages/storefront/src/types/cms-social.d.ts

@@ -0,0 +1,5 @@
+type CmsSocial = typeof import('../../content/social.json');
+
+export default CmsSocial;
+
+export type { CmsSocial };

package/packages/storefront/tailwind.config.cjs

@@ -0,0 +1,78 @@
+const genTailwindConfig = ({
+  colorVariants = [
+    '50',
+    ...[...Array(9).keys()].map((i) => String((i + 1) * 100)),
+  ],
+} = {}) => ({
+  theme: {
+    extend: {
+      colors: {
+        // Color vars from Base.astro styles
+        ...['primary', 'secondary', 'contrast'].reduce((colors, color) => {
+          const colorVariations = ['hover', 'focus', 'inverse'];
+          if (color !== 'contrast') {
+            colorVariations.push(...colorVariants);
+          }
+          colors[color] = colorVariations.reduce((colorPalette, variant) => {
+            colorPalette[variant] = `var(--${color}-${variant})`;
+            return colorPalette;
+          }, {
+            DEFAULT: `var(--${color})`,
+          });
+          return colors;
+        }, {}),
+        ...['surface', 'muted'].reduce((colors, color) => ({
+          [color]: {
+            DEFAULT: `var(--${color}-color)`,
+            border: `var(--${color}-border-color)`,
+          },
+          ...colors,
+        }), {}),
+      },
+    },
+  },
+  plugins: [
+    ({ addUtilities }) => {
+      addUtilities({
+        // https://picocss.com/docs/containers.html
+        '.container-fluid': {
+          'max-width': 'var(--content-max-width)',
+        },
+        // https://picocss.com/docs/buttons.html
+        ...['primary', 'secondary', 'contrast'].reduce((utilities, color) => ({
+          ...utilities,
+          [`.${color}`]: {
+            '--background-color': `var(--${color})`,
+            'background-color': 'var(--background-color)',
+            color: `var(--${color}-inverse)`,
+          },
+        }), {}),
+        ...['primary', 'secondary'].reduce((utilities, color) => {
+          colorVariants.forEach((variant) => {
+            const colorLabel = `${color}-${variant}`;
+            let textColor;
+            if (Number(variant) <= 100) {
+              textColor = 'var(--yiq-text-dark)';
+            } else if (Number(variant) >= 900) {
+              textColor = 'var(--yiq-text-light)';
+            } else {
+              textColor = `var(--${colorLabel}-yiq)`;
+            }
+            utilities[`.${colorLabel}`] = {
+              'background-color': `var(--${colorLabel})`,
+              color: textColor,
+            };
+          });
+          return utilities;
+        }, {}),
+      });
+    },
+  ],
+});
+
+const tailwindConfig = genTailwindConfig();
+
+module.exports = { ...tailwindConfig, genTailwindConfig };
+
+exports.genTailwindConfig = genTailwindConfig;
+exports.tailwindConfig = tailwindConfig;