cloudcommerce 0.37.0 → 0.38.0

package/packages/storefront/src/lib/layouts/use-page-main.ts

@@ -3,7 +3,9 @@ import type { PageContent } from '@@sf/content';
 import type { RouteContext } from '@@sf/ssr-context';
 import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
 import type { Props as UseProductShelfProps } from '@@sf/composables/use-product-shelf';
+import type { Props as UseSearchContainerProps } from '@@sf/composables/use-search-container';
 import { useProductShelf } from '@@sf/composables/use-product-shelf';
+import { useSearchContainer } from '@@sf/composables/use-search-container';
 
 export interface Props {
   routeContext: RouteContext;
@@ -56,6 +58,7 @@ export const usePageSections = async <T extends CustomSection = CustomSection>
     | { type: 'related-products', props: {} }
     | { type: 'doc-description', props: {} }
     | { type: 'product-specifications', props: {} }
+    | { type: 'search-container', props: UseSearchContainerProps }
   > = [];
   if (sectionsContent) {
     await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }, index) => {
@@ -122,6 +125,18 @@ export const usePageSections = async <T extends CustomSection = CustomSection>
         return;
       }
 
+      if (type === 'search-container') {
+        const props: UseSearchContainerProps = { ...sectionContent };
+        if (routeContext.searchPageTerm !== undefined) {
+          props.term = routeContext.searchPageTerm || null;
+          const { searchEngine, fetching } = useSearchContainer(props);
+          await fetching;
+          props.products = searchEngine.products;
+          props.ssrError = searchEngine.fetchError.value?.message;
+        }
+        sections[index] = { type, props };
+        return;
+      }
       if (type === 'banners-grid') {
         sections[index] = {
           type,

package/packages/storefront/src/lib/scripts/firestore.ts

@@ -0,0 +1,27 @@
+import { getFirestore, collection, addDoc } from 'firebase/firestore/lite';
+import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';
+import firebaseApp from './firebase-app';
+
+const firestore = getFirestore(firebaseApp);
+if (window.$reCaptchaSiteKey) {
+  initializeAppCheck(firebaseApp, {
+    provider: new ReCaptchaV3Provider(window.$reCaptchaSiteKey),
+    isTokenAutoRefreshEnabled: true,
+  });
+}
+
+export default firestore;
+
+export {
+  firestore,
+  collection,
+  addDoc,
+};
+
+export const getFormCollRef = (form: string) => {
+  return collection(firestore, `forms/p/${form}`);
+};
+
+export const addFormDoc = (form: string, data: Record<string, any>) => {
+  return addDoc(getFormCollRef(form), data);
+};

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

@@ -5,6 +5,7 @@ import type { ResourceId, CategoriesList, BrandsList } from '@cloudcommerce/api/
 import type { ContentGetter, SettingsContent, PageContent } from '@@sf/content';
 import { EventEmitter } from 'node:events';
 import api from '@cloudcommerce/api';
+import { termify } from '../helpers/sf-utils';
 import _getConfig from '../../config/storefront.config.mjs';
 
 export type StorefrontConfig = {
@@ -87,6 +88,14 @@ const loadRouteContext = async (
     urlPath = urlPath.replace('/~preview', '');
   }
   const isHomepage = urlPath === '/';
+  const isSearchPage = !isHomepage && (urlPath.startsWith('/s/') || urlPath === '/s');
+  let searchPageTerm: string | undefined;
+  if (isSearchPage) {
+    const pathTerm = urlPath.split('/')[2];
+    if (typeof pathTerm === 'string') {
+      searchPageTerm = termify(decodeURIComponent(pathTerm));
+    }
+  }
   const config = getConfig();
   globalThis.$storefront.settings = config.settings;
   let cmsContent: PageContent | null = { sections: [] };
@@ -117,6 +126,8 @@ const loadRouteContext = async (
   const { slug } = Astro.params;
   if (isHomepage) {
     cmsContent = await config.getContent('pages/home');
+  } else if (isSearchPage) {
+    cmsContent = await config.getContent('pages/search');
   } else if (slug && typeof slug === 'string') {
     if (contentCollection) {
       cmsContent = await config.getContent(`${contentCollection}/${slug}`);
@@ -219,11 +230,14 @@ const loadRouteContext = async (
   const routeContext = {
     ...config,
     isHomepage,
+    isSearchPage,
+    searchPageTerm,
     cmsContent,
     fetchingApiContext,
     apiContext,
     apiState,
     isPreview,
+    // Astro,
   };
   Astro.locals.routeContext = routeContext;
   emitter.emit('load', routeContext);

package/packages/storefront/src/lib/state/search-engine.ts

@@ -1,5 +1,10 @@
 import type { SearchItem, SearchResult } from '@cloudcommerce/types';
-import { ref, watch, shallowReactive } from 'vue';
+import {
+  ref,
+  computed,
+  watch,
+  shallowReactive,
+} from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import api from '@cloudcommerce/api';
 import useStorage from '@@sf/state/use-storage';
@@ -8,34 +13,53 @@ const storageKey = 'ecomSeachHistory';
 
 export const searchHistory = useStorage<string[]>(storageKey, []);
 
+for (let i = 0; i < searchHistory.length; i++) {
+  if (typeof searchHistory[i] !== 'string') {
+    searchHistory.splice(i, 1);
+    i -= 1;
+  }
+}
+
 export const search = async ({
   term,
   params,
   fields,
   url = 'search/v1',
 }: {
-  term: string,
+  term: string | null,
   params?: Record<string, any>,
   fields?: readonly string[],
   url?: 'search/v1' | `search/v1?${string}`,
 }) => {
-  term = term.trim();
-  if (term.length < 2) {
-    return { data: { result: [], meta: null } };
+  if (typeof term === 'string') {
+    term = term.trim();
+    if (term.length < 2) {
+      return { data: { result: [], meta: null } };
+    }
   }
   const response = await api.get(url, {
     fields,
-    params: {
+    params: !term ? params : {
       ...params,
       term,
     },
   });
-  if (response.data.result.length) {
-    const termIndex = searchHistory.findIndex((_term) => term.startsWith(_term));
-    if (termIndex > -1) {
-      searchHistory.splice(termIndex, 1);
+  if (term && response.data.result.length) {
+    const termStr = term;
+    const completeTermIndex = searchHistory.findIndex((_term) => {
+      return _term.includes(termStr) && !(_term.replace(termStr, '')).includes(' ');
+    });
+    if (completeTermIndex > -1) {
+      const completeTerm = searchHistory[completeTermIndex];
+      searchHistory.splice(completeTermIndex, 1);
+      searchHistory.unshift(completeTerm);
+    } else {
+      const termIndex = searchHistory.findIndex((_term) => termStr.startsWith(_term));
+      if (termIndex > -1) {
+        searchHistory.splice(termIndex, 1);
+      }
+      searchHistory.unshift(term);
     }
-    searchHistory.unshift(term);
     while (searchHistory.length > 20) {
       searchHistory.pop();
     }
@@ -45,13 +69,21 @@ export const search = async ({
 
 export class SearchEngine {
   fields?: readonly string[];
-  term = ref('');
+  term = ref<string | null>('');
   isWithCount = ref(true);
   isWithBuckets = ref(true);
   params = shallowReactive<Record<string, any>>({});
   pageSize = ref(24);
   pageNumber = ref(1);
-  isFetching = ref(false);
+  #isFetching = ref(false);
+  isFetching = computed(() => this.#isFetching.value);
+  #wasFetched = ref(false);
+  wasFetched = computed(() => this.#wasFetched.value);
+  #fetching = ref<Promise<void> | null>(null);
+  #fulfillFetching: (() => void) | undefined;
+  fetching = computed(() => this.#fetching.value);
+  #fetchError = ref<Error | null>(null);
+  fetchError = computed(() => this.#fetchError.value);
   products = shallowReactive<SearchItem[]>([]);
   meta = shallowReactive<SearchResult<'v1'>['meta']>({
     offset: 0,
@@ -70,12 +102,15 @@ export class SearchEngine {
   } = {}) {
     this.fields = fields;
     this.#search = useDebounceFn((opts) => {
-      this.isFetching.value = true;
+      this.#isFetching.value = true;
       return search(opts);
     }, debounce);
-    watch([this.term, this.params], () => {
+    watch([this.term, this.params, this.pageSize], () => {
       this.pageNumber.value = 1;
     });
+    watch(this.pageNumber, () => {
+      this.#wasFetched.value = false;
+    });
   }
 
   async fetch(term?: string) {
@@ -85,25 +120,43 @@ export class SearchEngine {
     }
     const limit = this.pageSize.value;
     const offset = limit * (this.pageNumber.value - 1);
-    const response = await this.#search({
-      term: this.term.value,
-      params: {
-        ...this.params,
-        limit,
-        offset,
-        count: this.isWithCount.value || undefined,
-        buckets: this.isWithBuckets.value || undefined,
-      },
-      fields: this.fields,
-    });
+    if (!this.#fetching.value) {
+      this.#fetching.value = new Promise((resolve) => {
+        this.#fulfillFetching = resolve;
+      });
+    }
+    let response: Awaited<ReturnType<typeof search>> | null | undefined;
+    try {
+      response = await this.#search({
+        term: this.term.value,
+        params: {
+          ...this.params,
+          limit,
+          offset,
+          count: this.isWithCount.value || undefined,
+          buckets: this.isWithBuckets.value || undefined,
+        },
+        fields: this.fields,
+      });
+    } catch (err: any) {
+      if (this.#fulfillFetching) {
+        this.#fetchError.value = err;
+        this.#fulfillFetching();
+      }
+      throw err;
+    }
     if (response) {
-      this.isFetching.value = false;
+      this.#isFetching.value = false;
+      this.#wasFetched.value = true;
       const { data } = response;
       if (data.meta) {
         this.products.splice(0);
         Object.assign(this.meta, data.meta);
       }
       data.result.forEach((item) => this.products.push(item));
+      if (this.#fulfillFetching) {
+        this.#fulfillFetching();
+      }
     }
   }
 }

package/packages/storefront/src/lib/state/use-analytics.ts

@@ -1,8 +1,10 @@
 import type { Products, Carts, SearchItem } from '@cloudcommerce/types';
+import { watch } from 'vue';
 import { watchOnce } from '@vueuse/core';
 import { price as getPrice, name as getName } from '@ecomplus/utils';
 import { customer, isLogged } from '@@sf/state/customer-session';
 import { cartEvents } from '@@sf/state/shopping-cart';
+import { searchHistory } from '@@sf/state/search-engine';
 import utm from '@@sf/scripts/session-utm';
 
 export const trackingIds: {
@@ -98,16 +100,15 @@ export const emitGtagEvent = async <N extends Gtag.EventNames = 'view_item'>(
         default:
       }
     } else {
-      switch (window.location.pathname) {
-        case '/':
-          defaultItemsList = 'Home';
-          break;
-        case '/s':
-        case '/search':
-        case '/busca':
-          defaultItemsList = 'Search results';
-          break;
-        default:
+      const { pathname } = window.location;
+      if (pathname === '/') {
+        defaultItemsList = 'Home';
+      } else if (
+        /^\/s\/?/.test(pathname)
+        || pathname === '/search'
+        || pathname === '/busca'
+      ) {
+        defaultItemsList = 'Search results';
       }
     }
     if (pageViewState.resolve) {
@@ -218,17 +219,6 @@ export const getGtagItem = (product: Partial<Products> | SearchItem | CartItem)
 
 export const useAnalytics = () => {
   document.addEventListener('astro:beforeload', resetPageViewPromise);
-  if (isLogged.value) {
-    emitGtagEvent('login', {});
-  } else {
-    watchOnce(isLogged, () => emitGtagEvent('login', {}));
-  }
-  cartEvents.on('*', (evName, cartItem) => {
-    emitGtagEvent(
-      evName === 'addCartItem' ? 'add_to_cart' : 'remove_from_cart',
-      { items: [getGtagItem(cartItem)] },
-    );
-  });
   const {
     gtag,
     GTAG_TAG_ID,
@@ -279,6 +269,31 @@ export const useAnalytics = () => {
     }
     storage.setItem(`analytics_${key}`, trackingIds[key]);
   });
+  if (isLogged.value) {
+    emitGtagEvent('login', {});
+  } else {
+    watchOnce(isLogged, () => emitGtagEvent('login', {}));
+  }
+  cartEvents.on('*', (evName, cartItem) => {
+    emitGtagEvent(
+      evName === 'addCartItem' ? 'add_to_cart' : 'remove_from_cart',
+      { items: [getGtagItem(cartItem)] },
+    );
+  });
+  watch(searchHistory, () => {
+    const term = searchHistory[0];
+    if (term) {
+      emitGtagEvent('search', { search_term: term });
+    }
+  });
+  if (window.location.pathname === '/s') {
+    setTimeout(() => {
+      const urlSearchQ = new URLSearchParams(window.location.search).get('q');
+      if (urlSearchQ && typeof urlSearchQ === 'string') {
+        emitGtagEvent('view_search_results', { search_term: urlSearchQ });
+      }
+    }, 300);
+  }
 };
 
 export default useAnalytics;

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "E-Com Plus Cloud Commerce basic setup for testing",
   "main": "lib/index.js",
   "repository": {

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {

package/ecomplus-stores/monocard/.devcontainer/devcontainer.json

@@ -1,30 +0,0 @@
-{
-  "postCreateCommand": "npm i && npm i --prefix=functions/ssr",
-  "waitFor": "postCreateCommand",
-  "portsAttributes": {
-    "3000": {
-      "label": "Application",
-      "onAutoForward": "openPreview"
-    }
-  },
-  "forwardPorts": [
-    3000
-  ],
-  "postAttachCommand": {
-    "Server": "npm run dev"
-  },
-  "customizations": {
-    "codespaces": {
-      "openFiles": [
-        "functions/ssr/src/main/Home.astro"
-      ]
-    },
-    "vscode": {
-      "extensions": [
-        "astro-build.astro-vscode",
-        "vue.volar",
-        "bradlc.vscode-tailwindcss"
-      ]
-    }
-  }
-}

package/ecomplus-stores/monocard/.editorconfig

@@ -1,13 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

package/ecomplus-stores/monocard/.eslintrc.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: './node_modules/@cloudcommerce/eslint/base.eslintrc.cjs',
-};

package/ecomplus-stores/monocard/.firebaserc

@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "default": "ecom2monocard"
-  }
-}

package/ecomplus-stores/monocard/.github/build-and-deploy

@@ -1 +0,0 @@
-0

package/ecomplus-stores/monocard/.github/renovate.json

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "github>ecomplus/cloud-commerce:store.renovate"
-  ]
-}

package/ecomplus-stores/monocard/.github/workflows/build-and-deploy.yml

@@ -1,37 +0,0 @@
-name: Build and deploy
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'functions/**'
-      - 'package-lock.json'
-      - '.firebaserc'
-      - '.ecomplus/**'
-      - '.github/build-and-deploy'
-      - '.github/workflows/build-and-deploy.yml'
-  pull_request:
-    paths:
-      - 'functions/ssr/**'
-      - '.firebaserc'
-      - 'package-lock.json'
-
-jobs:
-  build-and-deploy:
-    name: Cloud Commerce build and deploy
-    runs-on: ubuntu-latest
-    if: |
-      github.event.head_commit.message != 'Initial commit' &&
-      !contains(github.event.head_commit.message, '[skip ci]')
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: ecomplus/cloud-commerce@main
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          firebase-service-account: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
-          ecom-authentication-id: ${{ secrets.ECOM_AUTHENTICATION_ID }}
-          ecom-api-key: ${{ secrets.ECOM_API_KEY }}
-          ecom-store-id: ${{ secrets.ECOM_STORE_ID }}

package/ecomplus-stores/monocard/.github/workflows/calibreapp-image-actions.yml

@@ -1,23 +0,0 @@
-name: Compress images
-
-on:
-  pull_request:
-    paths:
-      - '**.jpg'
-      - '**.jpeg'
-      - '**.png'
-      - '**.webp'
-      - 'package-lock.json'
-
-jobs:
-  build:
-    # Only run on Pull Requests within the same repository, and not from forks.
-    if: github.event.pull_request.head.repo.full_name == github.repository
-    name: calibreapp/image-actions
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Compress images
-        uses: calibreapp/image-actions@main
-        with:
-          githubToken: ${{ secrets.GITHUB_TOKEN }}

package/ecomplus-stores/monocard/.gitpod.yml

@@ -1,12 +0,0 @@
-tasks:
-  - init: npm i && npm i --prefix=functions/ssr
-    command: npm run dev
-vscode:
-  extensions:
-    - astro-build.astro-vscode
-    - vue.volar
-    - bradlc.vscode-tailwindcss
-ports:
-  - port: 3000
-    onOpen: open-preview
-    visibility: public

package/ecomplus-stores/monocard/.idx/dev.nix

@@ -1,24 +0,0 @@
-{pkgs}: {
-  channel = "stable-23.05"; # "stable-23.05" or "unstable"
-  packages = [
-    pkgs.nodejs_18
-    pkgs.nodePackages.firebase-tools
-  ];
-  idx.extensions = [
-    "vue.volar"
-    # Other recommended extensions crashing launch
-    # "dbaeumer.vscode-eslint",
-    # "astro-build.astro-vscode",
-    # "bradlc.vscode-tailwindcss",
-  ];
-  idx.previews = {
-    enable = true;
-    previews = [
-      {
-        command = ["npm" "run" "dev" "--" "--port" "$PORT" "--host"];
-        manager = "web";
-        id = "web";
-      }
-    ];
-  };
-}

package/ecomplus-stores/monocard/.nvmrc

@@ -1 +0,0 @@
-18

package/ecomplus-stores/monocard/.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "astro-build.astro-vscode",
-    "vue.volar",
-    "bradlc.vscode-tailwindcss"
-  ]
-}

package/ecomplus-stores/monocard/.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/cloudcommerce dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

package/ecomplus-stores/monocard/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-  "editor.quickSuggestions": {
-    "strings": true
-  },
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "files.associations": {
-    "*.css": "tailwindcss"
-  },
-  "css.lint.unknownAtRules": "ignore",
-  "git.autofetch": true
-}