cloudcommerce 0.0.96 → 0.0.97

package/packages/firebase/lib/helpers/update-app-data.js

@@ -2,44 +2,44 @@ import { PubSub } from '@google-cloud/pubsub';
 import logger from 'firebase-functions/lib/logger';
 import api from '@cloudcommerce/api';
 import { EVENT_SKIP_FLAG, GET_PUBSUB_TOPIC } from '../const.js';
-
 export default async (application, data, { isHiddenData = false, canSendPubSub = true } = {}) => {
-  const applicationId = typeof application === 'string'
-    ? application : application._id;
-  const subresource = isHiddenData ? 'hidden_data' : 'data';
-  if (application && typeof application === 'object' && canSendPubSub) {
-    // eslint-disable-next-line no-param-reassign
-    application[subresource] = data;
-    const json = {
-      evName: 'applications-dataSet',
-      apiEvent: {
-        timestamp: new Date().toISOString(),
-        resource_id: applicationId,
-        action: 'update',
-        modified_fields: [subresource],
-        authentication_id: null,
-      },
-      apiDoc: application,
-      app: {
-        _id: applicationId,
-        app_id: application.app_id,
-        data: application.data,
-        hidden_data: application.hidden_data,
-      },
-      isInternal: true,
-    };
-    try {
-      await new PubSub()
-        .topic(GET_PUBSUB_TOPIC(application.app_id))
-        .publishMessage({ json });
-    } catch (err) {
-      logger.error(err);
+    const applicationId = typeof application === 'string'
+        ? application : application._id;
+    const subresource = isHiddenData ? 'hidden_data' : 'data';
+    if (application && typeof application === 'object' && canSendPubSub) {
+        // eslint-disable-next-line no-param-reassign
+        application[subresource] = data;
+        const json = {
+            evName: 'applications-dataSet',
+            apiEvent: {
+                timestamp: new Date().toISOString(),
+                resource_id: applicationId,
+                action: 'update',
+                modified_fields: [subresource],
+                authentication_id: null,
+            },
+            apiDoc: application,
+            app: {
+                _id: applicationId,
+                app_id: application.app_id,
+                data: application.data,
+                hidden_data: application.hidden_data,
+            },
+            isInternal: true,
+        };
+        try {
+            await new PubSub()
+                .topic(GET_PUBSUB_TOPIC(application.app_id))
+                .publishMessage({ json });
+        }
+        catch (err) {
+            logger.error(err);
+        }
     }
-  }
-  return api.patch(`applications/${applicationId}/${subresource}`, data, {
-    headers: {
-      'X-Event-Flag': EVENT_SKIP_FLAG,
-    },
-  });
+    return api.patch(`applications/${applicationId}/${subresource}`, data, {
+        headers: {
+            'X-Event-Flag': EVENT_SKIP_FLAG,
+        },
+    });
 };
-// # sourceMappingURL=update-app-data.js.map
+//# sourceMappingURL=update-app-data.js.map

package/packages/firebase/lib/index.js

@@ -3,18 +3,16 @@ import './init.js';
 import functions from 'firebase-functions';
 import config from './config.js';
 import checkStoreEvents from './handlers/check-store-events.js';
-
 const { httpsFunctionOptions: { region } } = config.get();
 const functionBuilder = functions
-  .region(region)
-  .runWith({
+    .region(region)
+    .runWith({
     timeoutSeconds: 300,
     memory: '128MB',
-  });
-
+});
 export const cronStoreEvents = functionBuilder.pubsub
-  .schedule('* * * * *')
-  .onRun(() => {
+    .schedule('* * * * *')
+    .onRun(() => {
     return checkStoreEvents();
-  });
-// # sourceMappingURL=index.js.map
+});
+//# sourceMappingURL=index.js.map

package/packages/firebase/lib/init.js

@@ -4,6 +4,5 @@ import '@cloudcommerce/api/fetch-polyfill';
 // https://github.com/import-js/eslint-plugin-import/issues/1810
 // eslint-disable-next-line import/no-unresolved
 import { initializeApp } from 'firebase-admin/app';
-
 initializeApp();
-// # sourceMappingURL=init.js.map
+//# sourceMappingURL=init.js.map

package/packages/firebase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/firebase",
   "type": "module",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "E-Com Plus Cloud Commerce on Firebase",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
-    "@google-cloud/pubsub": "^3.1.1",
+    "@google-cloud/pubsub": "^3.2.0",
     "firebase-admin": "^11.0.1",
-    "firebase-functions": "^3.23.0",
+    "firebase-functions": "^3.24.0",
     "node-fetch": "^3.2.10",
     "source-map-support": "^0.5.21"
   },

package/packages/modules/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/modules",
   "type": "module",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "E-Com Plus Cloud Commerce modules API",
   "main": "lib/index.cjs",
   "exports": {
@@ -34,7 +34,7 @@
     "ajv-formats": "^2.1.1",
     "axios": "^0.27.2",
     "firebase-admin": "^11.0.1",
-    "firebase-functions": "^3.23.0",
+    "firebase-functions": "^3.24.0",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {

package/packages/passport/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/passport",
   "type": "module",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "E-Com Plus Cloud Commerce customers authentication (passport) API",
   "main": "lib/index.js",
   "exports": {
@@ -26,7 +26,7 @@
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
     "firebase-admin": "^11.0.1",
-    "firebase-functions": "^3.23.0",
+    "firebase-functions": "^3.24.0",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {

package/packages/ssr/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/ssr",
   "type": "module",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "E-Com Plus Cloud Commerce storefront SSR",
   "main": "lib/index.js",
   "exports": {
@@ -30,7 +30,7 @@
     "color": "^4.2.3",
     "compression": "^1.7.4",
     "firebase-admin": "^11.0.1",
-    "firebase-functions": "^3.23.0",
+    "firebase-functions": "^3.24.0",
     "html-escaper": "^3.0.3",
     "image-size": "^1.0.2",
     "kleur": "^4.1.5",

package/packages/storefront/.eslintrc.cjs

@@ -2,5 +2,6 @@ module.exports = {
   extends: '../../.eslintrc.cjs',
   rules: {
     'no-console': 'off',
+    'import/no-unresolved': 'off',
   },
 };

package/packages/storefront/astro.config.mjs

@@ -13,7 +13,12 @@ import getConfig from './storefront.config.mjs';
 
 dotenv.config();
 
-const { domain, primaryColor, settings } = getConfig();
+const {
+  lang,
+  domain,
+  primaryColor,
+  settings,
+} = getConfig();
 
 const _vitePWAOptions = {
   manifest: {
@@ -136,6 +141,11 @@ const genAstroConfig = ({
     plugins: [
       VitePWA(vitePWAOptions),
     ],
+    resolve: {
+      alias: {
+        '@i18n': `@ecomplus/i18n/src/${lang}/index.js`,
+      },
+    },
   },
 });
 

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "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>