cloudcommerce 0.0.96 → 0.0.98

package/packages/storefront/dist/server/manifest.webmanifest

@@ -1 +1 @@
-{"name":"My Shop","short_name":"MyShop","start_url":"/","display":"standalone","background_color":"#f5f6fa","lang":"en","scope":"/","description":"My PWA Shop","theme_color":"#20c997","crossorigin":"use-credentials","icons":[{"src":"/img/icon.png","sizes":"192x192","type":"image/png"},{"src":"/img/large-icon.png","sizes":"512x512","type":"image/png"},{"src":"/img/large-icon.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}]}
+{"name":"My Shop","short_name":"MyShop","start_url":"/","display":"standalone","background_color":"#f5f6fa","lang":"en","scope":"/","description":"My PWA Shop","theme_color":"#137c5c","crossorigin":"use-credentials","icons":[{"src":"/img/icon.png","sizes":"192x192","type":"image/png"},{"src":"/img/large-icon.png","sizes":"512x512","type":"image/png"},{"src":"/img/large-icon.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}]}

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -17,7 +17,7 @@
   "homepage": "https://github.com/ecomplus/cloud-commerce/tree/main/packages/storefront#readme",
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
+    "start": "astro dev --host",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
@@ -32,12 +32,13 @@
     "@astrojs/vue": "^1.0.2",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
+    "@ecomplus/i18n": "^1.32.0",
     "@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",
-    "@unocss/preset-icons": "^0.45.22",
+    "@unocss/preset-icons": "^0.45.23",
     "astro": "^1.3.0",
     "color": "^4.2.3",
     "dotenv": "^16.0.2",
@@ -45,9 +46,9 @@
     "image-size": "^1.0.2",
     "nanostores": "^0.7.0",
     "rollup": "^2.79.1",
-    "unocss": "^0.45.22",
+    "unocss": "^0.45.23",
     "vite": "^3.1.3",
-    "vite-plugin-pwa": "^0.12.8",
+    "vite-plugin-pwa": "^0.13.1",
     "vue": "^3.2.39"
   }
 }

package/packages/storefront/src/assets/pico.css

@@ -558,7 +558,6 @@ a:is([aria-current], :hover, :active, :focus),
   --color: var(--primary-hover);
   --text-decoration: underline;
 }
-a:focus,
 [role=link]:focus {
   --background-color: var(--primary-focus);
 }

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

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

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

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import {
+  toRef,
+  ref,
+  computed,
+  watch,
+} from 'vue';
+import { i19close } from '@i18n';
+
+export interface Props {
+  modelValue?: boolean;
+  placement?: 'start' | 'end';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  placement: 'end',
+});
+const emit = defineEmits(['update:modelValue']);
+const close = () => emit('update:modelValue', false);
+const article = ref(null);
+const outsideClickListener = (ev: MouseEvent) => {
+  if (!article.value?.contains(ev.target)) {
+    close();
+  }
+};
+const escClickListener = (ev: KeyboardEvent) => {
+  if (ev.key === 'Escape') {
+    close();
+  }
+};
+watch(toRef(props, 'modelValue'), async (isOpen) => {
+  if (isOpen) {
+    document.body.style.maxWidth = `${document.body.offsetWidth}px`;
+    document.body.style.overflow = 'hidden';
+    setTimeout(() => {
+      document.addEventListener('click', outsideClickListener, { passive: true });
+      document.addEventListener('keydown', escClickListener, { passive: true });
+    }, 500);
+  } else {
+    document.removeEventListener('click', outsideClickListener);
+    document.removeEventListener('keydown', escClickListener);
+  }
+});
+const transition3dTx = computed(() => {
+  return props.placement === 'end' ? '100%' : '-100%';
+});
+</script>
+
+<template>
+  <Transition>
+    <dialog
+      v-if="modelValue"
+      class="offcanvas p-0"
+      :class="placement === 'end' ? 'justify-end' : 'justify-start'"
+      :open="modelValue"
+    >
+      <article
+        ref="article"
+        class="rounded-none h-full max-h-screen m-0"
+      >
+        <a
+          href="#close"
+          :aria-label="i19close"
+          class="close"
+          data-target="modal-example"
+          @click.prevent="close"
+        ></a>
+        <slot />
+      </article>
+    </dialog>
+  </Transition>
+</template>
+
+<style>
+.offcanvas.v-enter-active,
+.offcanvas.v-leave-active {
+  transition: opacity 0.25s linear;
+}
+.offcanvas.v-enter-from,
+.offcanvas.v-leave-to {
+  opacity: 0;
+}
+.offcanvas.v-enter-active article,
+.offcanvas.v-leave-active article {
+  transition: transform 0.3s ease-out;
+}
+.offcanvas.v-enter-from article,
+.offcanvas.v-leave-to article {
+  transform: translate3d(var(--transition-3d-tx), 0, 0);
+}
+</style>
+
+<style scoped>
+.offcanvas {
+  --transition-3d-tx: v-bind(transition3dTx);
+}
+</style>

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

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import {
+  i19login,
+} from '@i18n';
+import '../scripts/firebase-app';
+// eslint-disable-next-line import/order
+import {
+  getAuth,
+  signInWithEmailAndPassword,
+  // isSignInWithEmailLink,
+  // signInWithEmailLink,
+} from 'firebase/auth';
+
+const auth = getAuth();
+const email = ref('');
+const password = ref('');
+const loginWithPassord = () => {
+  signInWithEmailAndPassword(auth, email.value, password.value)
+    .then((userCredential) => {
+      const { user } = userCredential;
+      console.log(user);
+    })
+    .catch((error) => {
+      console.warn(error.code);
+      console.error(error);
+    });
+};
+</script>
+
+<template>
+  <form @submit.prevent="loginWithPassord">
+    <input
+      ref="input"
+      type="email"
+      placeholder="email@mail.com"
+      v-model="email"
+      required
+    >
+    <input
+      ref="input"
+      type="password"
+      placeholder="***"
+      v-model="password"
+      required
+    >
+    <button
+      type="submit"
+      class="btn btn-block btn-primary"
+    >
+      {{ i19login }}
+    </button>
+  </form>
+</template>

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

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ref, defineAsyncComponent } from 'vue';
+import { i19myAccountAndOrders } from '@i18n';
+import AOffcanvas from './AOffcanvas.vue';
+
+export interface Props {
+  accountUrl?: string;
+  accountIconClass?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  accountUrl: '/app/account',
+  accountIconClass: 'i-user-circle',
+});
+const isVisible = ref(false);
+const loadingLoginForm = !import.meta.env.SSR
+  ? import('./LoginForm.vue')
+  : Promise.resolve() as Promise<any>;
+const LoginForm = defineAsyncComponent(() => loadingLoginForm);
+const toggle = (ev: MouseEvent) => {
+  loadingLoginForm.then(() => {
+    isVisible.value = !isVisible.value;
+    ev.preventDefault();
+  });
+};
+</script>
+
+<template>
+  <div @click="toggle">
+    <slot name="toggle" v-bind="{ isVisible }">
+      <a :href="accountUrl" :title="i19myAccountAndOrders">
+        <div :class="accountIconClass"></div>
+      </a>
+    </slot>
+  </div>
+  <AOffcanvas v-model="isVisible" class="login-offcanvas">
+    <slot name="form">
+      <LoginForm class="max-w-xs" />
+    </slot>
+  </AOffcanvas>
+</template>

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

@@ -1,15 +1,49 @@
 <script lang="ts" setup>
+import { toRefs, ImgHTMLAttributes } from 'vue';
+
 export interface Props {
+  logo?: ImgHTMLAttributes;
+  gridClass?: string;
+  actionsGridClass?: string;
 }
+
+const props = withDefaults(defineProps<Props>(), {
+  gridClass: 'grid grid-flow-col auto-cols-max justify-between items-center',
+  actionsGridClass: 'grid items-center text-2xl',
+});
+const { logo } = toRefs(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 :class="gridClass">
+        <slot name="aside">
+          <div class="header__aside md:hidden">
+            <div class="i-bars-3-bottom-left"></div>
+          </div>
+        </slot>
+        <slot name="logo" v-bind="{ logo }">
+          <a v-if="logo" href="/" class="header__logo">
+            <component :is="logo.alt ? 'h1' : 'span'" class="m-0">
+              <img v-bind="logo" />
+            </component>
+          </a>
+        </slot>
+        <slot name="actions-grid">
+          <div :class="actionsGridClass">
+            <slot name="nav" />
+            <slot name="search" />
+            <slot name="buttons" />
+          </div>
+        </slot>
       </div>
     </div>
   </header>
 </template>
+
+<style>
+.header a:not(:hover) {
+  color: var(--gray-accent);
+}
+</style>

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

@@ -10,10 +10,6 @@ export interface Props {
   hasPhoneLinks?: boolean;
   hasNetworkLinks?: boolean;
   socialNetworks?: string[];
-  countdownClass?: string;
-  pageLinksClass?: string;
-  contactLinksClass?: string;
-  socialNetworksClass?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -28,23 +24,19 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="top-bar w-full bg-surface">
-    <slot
-      name="countdown"
-      v-bind="{ marketingStripe, countdownClass }"
-    >
+    <slot name="countdown" v-bind="{ marketingStripe }">
       <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']"
+          :class="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"
@@ -52,14 +44,10 @@ withDefaults(defineProps<Props>(), {
       <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 }"
-            >
+            <slot name="page-links" v-bind="{ pageLinks }">
               <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"
@@ -71,15 +59,13 @@ withDefaults(defineProps<Props>(), {
                 </a>
               </nav>
             </slot>
-
             <slot
               name="contact-links"
-              v-bind="{ contacts, hasPhoneLinks, contactLinksClass }"
+              v-bind="{ contacts, hasPhoneLinks }"
             >
               <div
                 v-if="hasPhoneLinks"
                 class="top-bar__contact-links inline-block"
-                :class="contactLinksClass"
               >
                 <a
                   v-if="contacts.whatsapp"
@@ -93,7 +79,7 @@ withDefaults(defineProps<Props>(), {
                   {{ contacts.whatsapp }}
                 </a>
                 <a
-                  v-if="contacts.phone"
+                  v-if="contacts.phone && contacts.phone !== contacts.whatsapp"
                   :href="`tel:+${contacts.phone.replace(/\D/g, '')}`"
                   target="_blank"
                   rel="noopener"
@@ -105,10 +91,9 @@ withDefaults(defineProps<Props>(), {
               </div>
             </slot>
           </div>
-
           <slot
             name="social-networks"
-            v-bind="{ contacts, hasNetworkLinks, socialNetworksClass }"
+            v-bind="{ contacts, hasNetworkLinks }"
           >
             <div
               v-if="hasNetworkLinks"
@@ -122,6 +107,7 @@ withDefaults(defineProps<Props>(), {
                     target="_blank"
                     rel="noopener"
                     class="ml-1"
+                    :aria-label="`Follow on ${network}`"
                   >
                     <i v-if="network === 'facebook'" class="i-facebook"></i>
                     <i v-else-if="network === 'youtube'" class="i-youtube"></i>
@@ -139,3 +125,9 @@ withDefaults(defineProps<Props>(), {
     </div>
   </div>
 </template>
+
+<style>
+.top-bar__nav a:not(:hover) {
+  color: var(--gray);
+}
+</style>

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

@@ -9,7 +9,6 @@ export interface Props {
 
 const { pageContext } = Astro.props as Props;
 const { primaryColor, secondaryColor } = pageContext;
-
 const brandColors = {
   primary: primaryColor,
   secondary: secondaryColor,
@@ -65,44 +64,48 @@ Object.keys(brandColors).forEach((colorName) => {
 </body>
 
 <style is:global define:vars={colorCSSVars}>
-  :root {
-    --content-max-width: 80rem;
-    --white: #fff;
-    --gray-50: #f9fafb;
-    --gray-200: #e5e7eb;
-    --gray-700: #374151;
-    --gray-800: #1f2937;
-    --gray-900: #111827;
-    --surface-color: var(--gray-50);
-    --surface-border-color: var(--gray-200);
-    --yiq-text-light: var(--white);
-    --yiq-text-dark: var(--gray-900);
+:root {
+  --content-max-width: 80rem;
+  --white: #fff;
+  --gray-50: #f9fafb;
+  --gray-200: #e5e7eb;
+  --gray-400: #94a3b8;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --gray: var(--gray-600);
+  --gray-accent: var(--gray-800);
+  --surface-color: var(--gray-50);
+  --surface-border-color: var(--gray-200);
+  --yiq-text-light: var(--white);
+  --yiq-text-dark: var(--gray-900);
+}
+body {
+  --primary: var(--primary-500);
+  --primary-hover: var(--primary-700);
+  --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: 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]) {
+    --gray: var(--gray-400);
+    --gray-accent: var(--gray-200);
+    --surface-color: var(--gray-800);
+    --surface-border-color: var(--gray-700);
   }
-  body,
-  body [data-theme=light],
-  body [data-theme=dark] {
-    --primary: var(--primary-500);
-    --primary-hover: var(--primary-700);
-    --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: rgba(var(--secondary-200-rgb), 0.2);
-    --secondary-inverse: var(--secondary-500-yiq);
+  :root:not([data-theme=light]) a:not([role=button]) {
+    --color: var(--primary-100);
   }
-  @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);
-    }
-    :root:not([data-theme=light]) a:is([aria-current], :hover, :active, :focus) {
-      --color: var(--primary-400);
-    }
-  }
-  body {
-    overflow-x: hidden;
+  :root:not([data-theme=light]) a:not([role=button]):is([aria-current], :hover, :active, :focus) {
+    --color: var(--primary-300);
   }
+}
+body {
+  overflow-x: hidden;
+}
 </style>

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

@@ -21,7 +21,6 @@ const {
 const state = apiDoc || cmsContent || {};
 const title = state.meta_title || state.name || state.title || Astro.props.title || settings.name;
 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 CmsSocial;
 const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
@@ -53,7 +52,6 @@ if (!ogImage) {
 <link rel="apple-touch-icon" href={settings.icon} />
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="default">
-
 <meta property="og:site_name" content={settings.name}>
 <meta property="og:url" content={canonicalUrl}>
 <meta property="og:title" content={title}>
@@ -64,7 +62,4 @@ if (!ogImage) {
 {cmsSocial.fb_app_id && <meta property="fb:app_id" content={cmsSocial.fb_app_id} />}
 <meta name="twitter:card" content="summary">
 {cmsSocial.twitter_username && <meta name="twitter:site" content={cmsSocial.twitter_username} />}
-
-<link rel="preconnect" href="https://ecomplus.io/" crossorigin />
-<link rel="dns-prefetch" href="https://ecomplus.io/" />
 <meta name="ecom-store-id" content={String(storeId)}>

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

@@ -6,18 +6,19 @@ export interface Props {
   pageContext: PageContext;
 }
 
-const { pageContext } = Astro.props as Props;
 const {
-  storeId,
-  apiResource,
-  apiDoc,
-  lang,
-  countryCode,
-  currency,
-  currencySymbol,
-  domain,
-  settings,
-} = pageContext;
+  pageContext: {
+    storeId,
+    apiResource,
+    apiDoc,
+    lang,
+    countryCode,
+    currency,
+    currencySymbol,
+    domain,
+    settings,
+  },
+} = Astro.props as Props;
 
 let inlineClientJS = `
 window.storefront = ${JSON.stringify({

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

@@ -3,22 +3,16 @@ 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 { getImageAttrs } from '../helpers/image';
+import { getImageAttrs } from '../ssr/image';
 import TopBar, { Props as TopBarProps } from '../components/TopBar.vue';
-import TheHeader from '../components/TheHeader.vue';
+import TheHeader, { Props as TheHeaderProps } from '../components/TheHeader.vue';
+import LoginOffcanvas, { Props as LoginOffcanvasProps } from '../components/LoginOffcanvas.vue';
 
 export interface Props {
   pageContext: PageContext;
   topBarProps?: Partial<TopBarProps>;
-  logoTransform?: {
-    width?: number;
-    height?: number;
-    quality?: number;
-  };
-}
-
-declare global {
-  var TopBarProps: TopBarProps;
+  theHeaderProps?: Partial<TheHeaderProps>;
+  loginOffcanvasProps?: Partial<LoginOffcanvasProps>;
 }
 
 const {
@@ -28,12 +22,12 @@ const {
     cms,
   },
   topBarProps,
-  logoTransform,
+  theHeaderProps,
+  loginOffcanvasProps,
 } = 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) {
@@ -64,6 +58,11 @@ const hasMegamenu: boolean | undefined = header.desktop_megamenu;
 const isAlphabeticalOrderSubmenu: boolean | undefined = header.alphabetical_order_submenu;
 const isFullWidthSubmenu: boolean | undefined = header.full_width_submenu;
 
+declare global {
+  var TopBarProps: TopBarProps;
+  var TheHeaderProps: TheHeaderProps;
+  var LoginOffcanvasProps: LoginOffcanvasProps;
+}
 globalThis.TopBarProps = {
   marketingStripe: header.marketing_stripe,
   pageLinks: header.contacts_stripe.pages,
@@ -72,18 +71,28 @@ globalThis.TopBarProps = {
   contacts,
   ...topBarProps,
 };
-
-const logoWebpAttrs = await getImageAttrs({
-  src: settings.logo,
-  width: 150,
-});
+globalThis.TheHeaderProps = {
+  logo: {
+    ...getImageAttrs({
+      src: settings.logo,
+      width: 150,
+    }),
+    alt: settings.name,
+  },
+  ...theHeaderProps,
+};
+globalThis.LoginOffcanvasProps = {
+  ...loginOffcanvasProps,
+};
 ---
 
 <slot name="top-bar">
   <TopBar {...globalThis.TopBarProps} />
 </slot>
 <slot name="header">
-  <TheHeader>
-    <img slot="logo" {...logoWebpAttrs} alt={`${settings.name} (logo)`} />
+  <TheHeader {...globalThis.TheHeaderProps}>
+    <Fragment slot="buttons">
+      <LoginOffcanvas client:idle {...globalThis.LoginOffcanvasProps} />
+    </Fragment>
   </TheHeader>
 </slot>

package/packages/storefront/src/lib/scripts/firebase-app.ts

@@ -0,0 +1,16 @@
+import { initializeApp } from 'firebase/app';
+
+const firebaseConfig = window.firebaseConfig || {
+  apiKey: 'AIzaSyCrVzemDgpyp9i6ni7Yc5ZuEVfXYwl-4J0',
+  authDomain: 'ecom2-002.firebaseapp.com',
+  projectId: 'ecom2-002',
+  storageBucket: 'ecom2-002.appspot.com',
+  messagingSenderId: '402807248219',
+  appId: '1:402807248219:web:cf7d57759751e74776367e',
+  measurementId: 'G-SC592CE0GB',
+};
+const app = initializeApp(firebaseConfig);
+
+export default app;
+
+export const firebaseApp = app;