cloudcommerce 0.37.0 → 0.37.1

package/packages/storefront/src/lib/composables/use-search-modal.ts

@@ -3,13 +3,9 @@ import type {
   Brands,
   Collections,
 } from '@cloudcommerce/api/types';
-import type { Orama } from '@orama/orama';
 import { ref, watch, toRef } from 'vue';
-import {
-  create as oramaCreate,
-  search as oramaSearch,
-  insert as oramaInsert,
-} from '@orama/orama';
+import Wade from 'wade';
+import { clearAccents } from '@@sf/sf-lib';
 import { SearchEngine, searchHistory } from '@@sf/state/search-engine';
 
 export interface Props {
@@ -18,36 +14,37 @@ export interface Props {
   productsLimit?: number;
 }
 
-const oramaDocSchema = {
-  name: 'string',
-  slug: 'string',
-  short_description: 'string',
-} as const;
-const oramaDocs: Array<{ [k:string]:any } & { name: string, slug: string }> = [];
 const storefrontData = globalThis.$storefront.data as {
   categories?: Array<Partial<Categories>>,
   brands?: Array<Partial<Brands>>,
   collections?: Array<Partial<Collections>>,
 };
+const wadeDocs: Array<{
+  text: string,
+  type: 'categories' | 'brands' | 'collections' | 'blog',
+  data: Record<string, any> & { name: string, slug: string },
+}> = [];
 (['categories', 'brands', 'collections'] as const).forEach((resource) => {
   const docsList = storefrontData[resource];
   if (docsList) {
     for (let i = 0; i < docsList.length; i++) {
       const doc = docsList[i];
-      const { name, slug } = doc;
-      if (name && slug) {
-        oramaDocs.push({ ...doc, name, slug });
+      if (doc.name && doc.slug) {
+        wadeDocs.push({
+          text: clearAccents(`${doc.name} ${(doc as Categories).short_description}`),
+          type: resource,
+          data: doc as typeof wadeDocs[number]['data'],
+        });
       }
     }
   }
 });
-let oramaDb: Orama<typeof oramaDocSchema> | undefined;
-if (oramaDocs.length) {
-  (async () => {
-    const _oramaDb = await oramaCreate({ schema: oramaDocSchema });
-    oramaDocs.forEach((doc) => oramaInsert(_oramaDb, doc));
-    oramaDb = _oramaDb;
-  })();
+let wadeSearch: ((t: string) => { index: number, score: number }[]) | undefined;
+if (wadeDocs.length) {
+  if (globalThis.$storefront.settings.lang === 'pt_br') {
+    Wade.config.stopWords = ['e', 'a', 'o', 'de', 'para', 'com', 'tem'];
+  }
+  wadeSearch = Wade(wadeDocs.map(({ text }) => text));
 }
 
 export const useSearchModal = (props: Props) => {
@@ -61,9 +58,10 @@ export const useSearchModal = (props: Props) => {
   const linkHits = ref<Array<{ title: string, href: string }>>([]);
   watch(toRef(props, 'term'), async (term) => {
     searchEngine.fetch(term);
-    if (oramaDb) {
-      const { hits } = await oramaSearch(oramaDb, { term });
-      linkHits.value = hits.map(({ document: { name, slug } }) => {
+    if (wadeSearch) {
+      const wadeResults = wadeSearch(clearAccents(term));
+      linkHits.value = wadeResults.map(({ index }) => {
+        const { name, slug } = wadeDocs[index].data;
         return { title: name, href: `/${slug}` };
       });
     }
@@ -73,8 +71,14 @@ export const useSearchModal = (props: Props) => {
   watch(searchEngine.meta, () => {
     productCount.value = searchEngine.meta.count || 0;
   });
+  const filteredHistory = ref<string[]>([]);
+  watch(searchHistory, () => {
+    filteredHistory.value = searchHistory.filter((term) => term !== props.term);
+  }, {
+    immediate: true,
+  });
   return {
-    searchHistory,
+    searchHistory: filteredHistory,
     searchEngine,
     isFetching: searchEngine.isFetching,
     productHits: searchEngine.products,

package/packages/storefront/src/lib/composables/use-shop-header.ts

@@ -1,12 +1,15 @@
 import type { Ref } from 'vue';
 import type { Categories } from '@cloudcommerce/api/types';
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { watchOnce } from '@vueuse/core';
+import { totalItems } from '@@sf/state/shopping-cart';
 import useStickyHeader from '@@sf/composables/use-sticky-header';
 
 type PartCategory = Partial<Categories>;
 
 export interface Props {
   header: Ref<HTMLElement | null>;
+  searchInput?: Ref<HTMLInputElement | null>;
   categories?: PartCategory[];
   menuCategorySlugs?: string[];
   menuRandomCategories?: number;
@@ -78,6 +81,7 @@ const filterSubcategories = (
 const useShopHeader = (props: Props) => {
   const {
     header,
+    searchInput,
     categories = (globalThis.$storefront.data.categories || []) as PartCategory[],
     menuCategorySlugs,
     menuRandomCategories = 7,
@@ -120,6 +124,61 @@ const useShopHeader = (props: Props) => {
     }
     return false;
   });
+
+  const isSearchOpen = ref(false);
+  const isSearchOpenOnce = ref(false);
+  watchOnce(isSearchOpen, () => {
+    isSearchOpenOnce.value = true;
+  });
+  const searchTerm = ref('');
+  const isSearchPage = !import.meta.env.SSR && window.location.pathname === '/s';
+  const urlSearchQ = isSearchPage
+    ? new URLSearchParams(window.location.search).get('q')
+    : undefined;
+  if (typeof urlSearchQ === 'string') {
+    searchTerm.value = urlSearchQ;
+  }
+  const quickSearchTerm = computed(() => {
+    if (searchTerm.value && searchTerm.value.length >= 2
+      && searchTerm.value !== urlSearchQ) {
+      return searchTerm.value;
+    }
+    return '';
+  });
+  const toggleSearch = (ev: Event) => {
+    if (isSearchOpen.value && searchTerm.value) return;
+    ev.preventDefault();
+    isSearchOpen.value = !isSearchOpen.value;
+    if (isSearchOpen.value && searchInput) {
+      setTimeout(() => {
+        if (!searchInput.value) return;
+        const { length } = searchTerm.value;
+        searchInput.value.setSelectionRange(length, length);
+        searchInput.value.focus();
+      }, 50);
+    }
+  };
+  const isCartOpen = ref(false);
+  const isCartOpenOnce = ref(false);
+  watchOnce(isCartOpen, () => {
+    isCartOpenOnce.value = true;
+  });
+  const delayedCartItems = ref(0);
+  const handleOnMounted = () => {
+    watch(totalItems, (newTotalItems, prevTotalItems) => {
+      if (typeof prevTotalItems === 'number') {
+        if (prevTotalItems < newTotalItems) {
+          isCartOpen.value = true;
+        } else if (prevTotalItems && !newTotalItems) {
+          isCartOpen.value = false;
+        }
+      }
+      delayedCartItems.value = newTotalItems;
+    }, {
+      immediate: true,
+    });
+  };
+
   return {
     isSticky,
     staticHeight,
@@ -130,6 +189,15 @@ const useShopHeader = (props: Props) => {
     getCategoryTree,
     categoryTrees,
     inlineMenuTrees,
+    isSearchOpen,
+    isSearchOpenOnce,
+    searchTerm,
+    quickSearchTerm,
+    toggleSearch,
+    isCartOpen,
+    isCartOpenOnce,
+    cartTotalItems: delayedCartItems,
+    handleOnMounted,
   };
 };
 

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

@@ -8,6 +8,13 @@ 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,
@@ -31,11 +38,20 @@ export const search = async ({
     },
   });
   if (response.data.result.length) {
-    const termIndex = searchHistory.findIndex((_term) => term.startsWith(_term));
-    if (termIndex > -1) {
-      searchHistory.splice(termIndex, 1);
+    const completeTermIndex = searchHistory.findIndex((_term) => {
+      return _term.includes(term) && !(_term.replace(term, '')).includes(' ');
+    });
+    if (completeTermIndex > -1) {
+      const completeTerm = searchHistory[completeTermIndex];
+      searchHistory.splice(completeTermIndex, 1);
+      searchHistory.unshift(completeTerm);
+    } else {
+      const termIndex = searchHistory.findIndex((_term) => term.startsWith(_term));
+      if (termIndex > -1) {
+        searchHistory.splice(termIndex, 1);
+      }
+      searchHistory.unshift(term);
     }
-    searchHistory.unshift(term);
     while (searchHistory.length > 20) {
       searchHistory.pop();
     }

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: {
@@ -218,17 +220,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 +270,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.37.1",
   "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.37.1",
   "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
-}