cloudcommerce 0.36.2 → 0.37.1

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.36.2",
+  "version": "0.37.1",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -29,24 +29,24 @@
     "prepare-monorepo": "bash scripts/prepare-monorepo.sh"
   },
   "dependencies": {
-    "@astrojs/node": "6.0.4",
+    "@astrojs/node": "6.1.0",
     "@astrojs/vue": "3.0.4",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.5",
     "@fastify/deepmerge": "^1.3.0",
-    "@iconify-json/fa6-brands": "^1.1.14",
-    "@iconify-json/heroicons": "^1.1.14",
-    "@iconify-json/logos": "^1.1.39",
+    "@iconify-json/fa6-brands": "^1.1.17",
+    "@iconify-json/heroicons": "^1.1.15",
+    "@iconify-json/logos": "^1.1.40",
     "@types/gtag.js": "^0.0.18",
-    "@vite-pwa/astro": "^0.1.5",
+    "@vite-pwa/astro": "^0.1.6",
     "@vueuse/core": "10.6.1",
-    "astro": "3.6.0",
+    "astro": "3.6.4",
     "astro-capo": "^0.0.1",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.3.1",
-    "firebase": "^10.6.0",
+    "firebase": "^10.7.0",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
     "mitt": "^3.0.1",
@@ -55,9 +55,10 @@
     "tailwindcss": "^3.3.5",
     "unocss": "^0.57.7",
     "unplugin-auto-import": "^0.16.7",
-    "vite": "^4.5.0",
+    "vite": "^4.5.1",
     "vite-plugin-pwa": "^0.17.2",
-    "vue": "3.3.9"
+    "vue": "3.3.10",
+    "wade": "0.3.3"
   },
   "devDependencies": {
     "@cloudcommerce/eslint": "workspace:*",

package/packages/storefront/src/helpers/sf-utils.ts

@@ -11,16 +11,19 @@ export const requestIdleCallback = (fn: (...args: any[]) => any, fallbackMs = 30
   }
 };
 
-export const slugify = (str: string) => {
+export const clearAccents = (str: string) => {
   return str
-    .toLowerCase()
-    .trim()
     .replace(/[ÁáÃãÂâÀà]/g, 'a')
     .replace(/[Éé]/g, 'e')
     .replace(/[Íí]/g, 'i')
-    .replace(/[ÓóÔô]/g, 'o')
+    .replace(/[ÕõÓóÔô]/g, 'o')
     .replace(/[Úú]/g, 'u')
-    .replace(/[Çç]/g, 'c')
+    .replace(/[Çç]/g, 'c');
+};
+
+export const slugify = (str: string) => {
+  return clearAccents(str.trim())
+    .toLowerCase()
     .replace(/[\W\r\n]/gm, '-')
     .replace(/-{2,}/g, '-')
     .replace(/(^-)|(-$)/g, '');

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

@@ -18,7 +18,7 @@ const isX = axis === 'x';
     type="button"
     :aria-label="!isPrev ? $t.i19next : $t.i19previous"
     @click="changeSlide(!isPrev ? 1 : -1)"
-    class="group absolute z-[2]"
+    class="group absolute z-[11]"
     :class="isX
       ? `${(!isPrev ? 'right-0' : 'left-0')} top-0`
       : `${(!isPrev ? 'bottom-0' : 'top-0')} left-0`"

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

@@ -0,0 +1,90 @@
+import type {
+  Categories,
+  Brands,
+  Collections,
+} from '@cloudcommerce/api/types';
+import { ref, watch, toRef } from 'vue';
+import Wade from 'wade';
+import { clearAccents } from '@@sf/sf-lib';
+import { SearchEngine, searchHistory } from '@@sf/state/search-engine';
+
+export interface Props {
+  term: string;
+  fetchDebounce?: number;
+  productsLimit?: number;
+}
+
+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];
+      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 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) => {
+  const searchEngine = new SearchEngine({
+    debounce: props.fetchDebounce || 300,
+  });
+  searchEngine.pageSize.value = props.productsLimit || 12;
+  searchEngine.isWithCount.value = true;
+  searchEngine.isWithBuckets.value = false;
+  const productCount = ref(0);
+  const linkHits = ref<Array<{ title: string, href: string }>>([]);
+  watch(toRef(props, 'term'), async (term) => {
+    searchEngine.fetch(term);
+    if (wadeSearch) {
+      const wadeResults = wadeSearch(clearAccents(term));
+      linkHits.value = wadeResults.map(({ index }) => {
+        const { name, slug } = wadeDocs[index].data;
+        return { title: name, href: `/${slug}` };
+      });
+    }
+  }, {
+    immediate: true,
+  });
+  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: filteredHistory,
+    searchEngine,
+    isFetching: searchEngine.isFetching,
+    productHits: searchEngine.products,
+    productCount,
+    linkHits,
+  };
+};
+
+export default useSearchModal;

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

@@ -1,4 +1,4 @@
-import type { SearchItem } from '@cloudcommerce/types';
+import type { SearchItem, SearchResult } from '@cloudcommerce/types';
 import { ref, watch, shallowReactive } from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import api from '@cloudcommerce/api';
@@ -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,
@@ -30,11 +37,19 @@ export const search = async ({
       term,
     },
   });
-  if (response.data.result.length && !searchHistory.includes(term)) {
-    const termIndex = searchHistory.findIndex((_term) => term.startsWith(_term));
-    if (termIndex > -1) {
-      searchHistory[termIndex] = term;
+  if (response.data.result.length) {
+    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);
     }
     while (searchHistory.length > 20) {
@@ -45,27 +60,35 @@ export const search = async ({
 };
 
 export class SearchEngine {
-  url: 'search/v1' | `search/v1?${string}`;
   fields?: readonly string[];
   term = ref('');
+  isWithCount = ref(true);
+  isWithBuckets = ref(true);
   params = shallowReactive<Record<string, any>>({});
   pageSize = ref(24);
   pageNumber = ref(1);
+  isFetching = ref(false);
   products = shallowReactive<SearchItem[]>([]);
+  meta = shallowReactive<SearchResult<'v1'>['meta']>({
+    offset: 0,
+    limit: 0,
+    fields: [],
+    sort: [],
+    query: {},
+  });
   #search: ReturnType<typeof useDebounceFn<typeof search>>;
   constructor({
     fields,
-    url = 'search/v1',
     debounce = 150,
   }: {
     fields?: readonly string[],
-    url?: 'search/v1' | `search/v1?${string}`,
     debounce?: number,
   } = {}) {
     this.fields = fields;
-    this.url = url;
-    this.products = shallowReactive([]);
-    this.#search = useDebounceFn(search, debounce);
+    this.#search = useDebounceFn((opts) => {
+      this.isFetching.value = true;
+      return search(opts);
+    }, debounce);
     watch([this.term, this.params], () => {
       this.pageNumber.value = 1;
     });
@@ -81,17 +104,20 @@ export class SearchEngine {
     const response = await this.#search({
       term: this.term.value,
       params: {
+        ...this.params,
         limit,
         offset,
-        ...this.params,
+        count: this.isWithCount.value || undefined,
+        buckets: this.isWithBuckets.value || undefined,
       },
-      url: this.url,
       fields: this.fields,
     });
     if (response) {
+      this.isFetching.value = false;
       const { data } = response;
       if (data.meta) {
         this.products.splice(0);
+        Object.assign(this.meta, data.meta);
       }
       data.result.forEach((item) => this.products.push(item));
     }

package/packages/storefront/src/lib/state/shopping-cart.ts

@@ -9,9 +9,10 @@ import parseProduct from '@@sf/state/shopping-cart/parse-product';
 type CartItem = CartSet['items'][0];
 const storageKey = 'ecomShoppingCart';
 const emptyCart = {
+  subtotal: 0,
   items: [],
 };
-const shoppingCart = useStorage<CartSet>(storageKey, emptyCart);
+const shoppingCart = useStorage<CartSet & { subtotal: number }>(storageKey, emptyCart);
 const totalItems = computed(() => {
   return shoppingCart.items.reduce((acc, item) => {
     return acc + item.quantity;

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.36.2",
+  "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.36.2",
+  "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"
-    }
-  ]
-}