feat: barcode detector

client-app/router/routes/constants.ts

@@ -1,11 +1,10 @@
-type RouteType = {
-  NAME: string;
-  PATH: string;
-};
-
-export const ROUTES: { [key: string]: RouteType } = {
+export const ROUTES = {
   CATALOG: {
     NAME: "Catalog",
     PATH: "/catalog",
   },
+  SEARCH: {
+    NAME: "Search",
+    PATH: "/search",
+  },
 } as const;

client-app/router/routes/main.ts

@@ -63,7 +63,7 @@ export const mainRoutes: RouteRecordRaw[] = [
     },
   },
   { path: "/branch/:branchId", name: "BranchPage", component: Branch, props: true },
-  { path: "/search", name: "Search", component: Search },
+  { path: ROUTES.SEARCH.PATH, name: ROUTES.SEARCH.NAME, component: Search },
   { path: "/bulk-order", name: "BulkOrder", component: BulkOrder },
   { path: "/compare", name: "CompareProducts", component: CompareProducts },
   { path: "/cart", name: "Cart", component: Cart },

client-app/shared/layout/components/header/_internal/mobile-header.vue

@@ -88,10 +88,15 @@
         :placeholder="$t('shared.layout.header.mobile.search_bar.input_placeholder')"
         class="mr-4 grow"
         no-border
-        clearable
         @keydown.enter="searchPhrase && $router.push(searchPageLink)"
-        @clear="reset"
-      />
+      >
+        <template #append>
+          <button v-if="searchPhrase" type="button" class="vc-input__clear" @click.stop="reset">
+            <VcIcon name="delete-2" size="xs" />
+          </button>
+          <BarcodeScanner v-else @scanned-code="onBarcodeScanned" />
+        </template>
+      </VcInput>
 
       <VcButton :to="searchPhrase && searchPageLink" icon="search" />
 
@@ -137,6 +142,7 @@ import { useSearchBar } from "@/shared/layout/composables/useSearchBar";
 import MobileMenu from "./mobile-menu/mobile-menu.vue";
 import type { StyleValue } from "vue";
 import type { RouteLocationRaw } from "vue-router";
+import BarcodeScanner from "@/shared/layout/components/search-bar/barcode-scanner.vue";
 const router = useRouter();
 
 const { customComponents } = useCustomMobileHeaderComponents();
@@ -158,17 +164,24 @@ const placeholderStyle = computed<StyleValue | undefined>(() =>
 );
 
 const searchPageLink = computed<RouteLocationRaw>(() => ({
-  name: "Search",
+  name: ROUTES.SEARCH.NAME,
   query: {
     [QueryParamName.SearchPhrase]: searchPhrase.value.trim(),
   },
 }));
 
 function reset() {
   searchPhrase.value = "";
-  void router.push({ name: ROUTES.CATALOG.NAME });
+  void router.push({ name: ROUTES.SEARCH.NAME });
 }
 
+const onBarcodeScanned = (value: string) => {
+  if (value) {
+    searchPhrase.value = value;
+    void router.push(searchPageLink.value);
+  }
+};
+
 syncRefs(mobileMenuVisible, useScrollLock(document.body));
 
 whenever(searchBarVisible, () => (searchPhrase.value = searchPhraseInUrl.value ?? ""), { immediate: true });

client-app/shared/layout/components/search-bar/barcode-scanner-modal.vue

@@ -0,0 +1,132 @@
+<template>
+  <VcModal
+    :title="$t('shared.layout.search_bar.barcode_detector.title')"
+    class="barcode-scanner-modal"
+    is-mobile-fullscreen
+  >
+    <p class="barcode-scanner-modal__description">
+      {{ $t("shared.layout.search_bar.barcode_detector.description") }}
+    </p>
+    <VcWidgetSkeleton v-show="loading">
+      <template #default-container>
+        <div class="p-1">
+          <div class="w-full! h-60"></div>
+        </div>
+      </template>
+    </VcWidgetSkeleton>
+    <video
+      v-show="!loading"
+      ref="videoElement"
+      class="barcode-scanner-modal__video"
+      playsinline
+      @canplaythrough="loading = false"
+    >
+      <track kind="captions" :label="$t('shared.layout.search_bar.barcode_detector.title')" default disabled src="" />
+    </video>
+    <template #actions="{ close }">
+      <VcButton class="barcode-scanner-modal__action" color="secondary" variant="outline" @click="close">
+        {{ $t("shared.catalog.branches_modal.cancel_button") }}
+      </VcButton>
+    </template>
+  </VcModal>
+</template>
+
+<script setup lang="ts">
+import { useIntervalFn } from "@vueuse/core";
+import { BarcodeDetector } from "barcode-detector/ponyfill";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { Logger } from "@/core/utilities";
+
+const emit = defineEmits<{
+  (e: "result", value: string[]): void;
+}>();
+
+const videoElement = ref<HTMLVideoElement | null>(null);
+const videoStream = ref<MediaStream | null>(null);
+let barcodeDetector: BarcodeDetector | null = null;
+
+const loading = ref(true);
+
+const SCAN_INTERVAL = 400;
+
+const scan = async () => {
+  if (!barcodeDetector || !videoElement.value) {
+    return;
+  }
+  try {
+    const imageBitmap = await createImageBitmap(videoElement.value);
+
+    const barcodes = await barcodeDetector.detect(imageBitmap);
+    if (barcodes.length) {
+      emit(
+        "result",
+        barcodes.map((el) => el.rawValue),
+      );
+    }
+  } catch (error) {
+    Logger.error(scan.name, error);
+  }
+};
+
+const { resume: startScanner, pause: stopScanner } = useIntervalFn(scan, SCAN_INTERVAL);
+
+async function startCamera() {
+  try {
+    if (!videoStream.value) {
+      videoStream.value = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "environment" },
+      });
+    }
+
+    if (videoElement.value) {
+      videoElement.value.srcObject = videoStream.value;
+      await videoElement.value.play();
+    }
+  } catch (error) {
+    Logger.error(startCamera.name, error);
+  }
+}
+
+function stopCamera() {
+  if (videoStream.value) {
+    videoStream.value.getVideoTracks().every((track) => track.stop());
+    videoStream.value = null;
+  }
+
+  if (videoElement.value) {
+    videoElement.value.srcObject = null;
+  }
+}
+
+onMounted(async () => {
+  try {
+    await startCamera();
+    barcodeDetector = new BarcodeDetector();
+    startScanner();
+  } catch (error) {
+    Logger.error("BarcodeDetector initialization error:", error);
+  }
+});
+
+onBeforeUnmount(() => {
+  stopScanner();
+  barcodeDetector = null;
+  stopCamera();
+});
+</script>
+
+<style lang="scss">
+.barcode-scanner-modal {
+  &__description {
+    @apply mb-2.5;
+  }
+
+  &__video {
+    @apply aspect-[3/2] object-cover md:aspect-[2/1];
+  }
+
+  &__action {
+    @apply ml-auto w-full md:w-auto;
+  }
+}
+</style>

client-app/shared/layout/components/search-bar/barcode-scanner.vue

@@ -0,0 +1,40 @@
+<template>
+  <button class="barcode-scanner" type="button" icon="barcode" @click.stop="openBarcodeScanner">
+    <VcIcon name="barcode" size="sm" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useModal } from "@/shared/modal";
+import BarcodeScannerModal from "./barcode-scanner-modal.vue";
+
+interface IEmits {
+  (e: "scannedCode", code: string): void;
+}
+const emit = defineEmits<IEmits>();
+
+const { openModal, closeModal } = useModal();
+
+const onBarcodeValueReceived = (codes: string[]) => {
+  if (codes.length) {
+    emit("scannedCode", codes[0]);
+    closeModal();
+  }
+};
+
+const openBarcodeScanner = () => {
+  openModal({
+    component: BarcodeScannerModal,
+    props: {
+      onClose: closeModal,
+      onResult: onBarcodeValueReceived,
+    },
+  });
+};
+</script>
+
+<style lang="scss">
+.barcode-scanner {
+  @apply flex items-center p-3 text-[--base-color];
+}
+</style>

client-app/shared/layout/components/search-bar/search-bar.vue

@@ -6,14 +6,17 @@
       :maxlength="MAX_LENGTH"
       class="w-full"
       :placeholder="$t('shared.layout.search_bar.enter_keyword_placeholder')"
-      clearable
       @keyup.enter="goToSearchResultsPage"
       @keyup.esc="hideSearchDropdown"
       @input="onSearchPhraseChanged"
       @focus="onSearchBarFocused"
-      @clear="reset"
     >
       <template #append>
+        <button v-if="searchPhrase" type="button" class="vc-input__clear" @click.stop="reset">
+          <VcIcon name="delete-2" size="xs" />
+        </button>
+        <BarcodeScanner v-else @scanned-code="onBarcodeScanned" />
+
         <VcButton
           :aria-label="$t('shared.layout.search_bar.search_button')"
           icon="search"
@@ -146,10 +149,12 @@ import { getFilterExpressionForCategorySubtree, getFilterExpressionForZeroPrice
 import { ROUTES } from "@/router/routes/constants";
 import { useSearchBar } from "@/shared/layout/composables/useSearchBar";
 import SearchBarProductCard from "./_internal/search-bar-product-card.vue";
+import BarcodeScanner from "./barcode-scanner.vue";
 import type { GetSearchResultsParamsType } from "@/core/api/graphql/catalog";
 import type { Category } from "@/core/api/graphql/types";
 import type { StyleValue } from "vue";
 import type { RouteLocationRaw } from "vue-router";
+import VcButton from "@/ui-kit/components/molecules/button/vc-button.vue";
 
 const { themeContext } = useThemeContext();
 
@@ -272,7 +277,7 @@ async function searchAndShowDropdownResults(): Promise<void> {
 
 function getSearchRoute(phrase: string): RouteLocationRaw {
   return {
-    name: "Search",
+    name: ROUTES.SEARCH.NAME,
     query: {
       [QueryParamName.SearchPhrase]: phrase,
     },
@@ -290,7 +295,7 @@ function goToSearchResultsPage() {
 function reset() {
   searchPhrase.value = "";
   hideSearchDropdown();
-  void router.push({ name: ROUTES.CATALOG.NAME });
+  void router.push({ name: ROUTES.SEARCH.NAME });
 }
 
 const searchProductsDebounced = useDebounceFn(searchAndShowDropdownResults, SEARCH_BAR_DEBOUNCE_TIME);
@@ -320,4 +325,11 @@ onMounted(() => {
     searchPhrase.value = searchPhraseInUrl.value;
   }
 });
+
+const onBarcodeScanned = (value: string) => {
+  if (value) {
+    searchPhrase.value = value;
+    goToSearchResultsPage();
+  }
+};
 </script>

client-app/ui-kit/components/molecules/dialog-content/vc-dialog-content.vue

@@ -16,14 +16,6 @@
 
   &__container {
     @apply py-2 px-6;
-
-    @at-root *:has(:not(.vc-dialog-footer)) > & {
-      @apply pb-4;
-    }
-
-    @at-root *:has(:not(.vc-dialog-header)) > & {
-      @apply pt-4;
-    }
   }
 }
 </style>

locales/de.json

@@ -377,7 +377,11 @@
         "no_results": "Ihre {keyword} Abfrage hat keine Ergebnisse geliefert",
         "enter_keyword_placeholder": "Hier nach Produkten suchen",
         "search_button": "Suchen",
-        "view_all_results_button": "Alle {total} Ergebnisse anzeigen"
+        "view_all_results_button": "Alle {total} Ergebnisse anzeigen",
+        "barcode_detector": {
+          "title": "Barcode-Scan",
+          "description": "Um fortzufahren, aktivieren Sie bitte Ihre Kamera, um den Barcode auf dem Produkt zu scannen. Dies hilft uns, den Artikel schnell zu identifizieren und Ihnen die notwendigen Informationen bereitzustellen."
+        }
       },
       "language_selector": {
         "label": "Sprache:"
@@ -1472,4 +1476,4 @@
     "INVALID_SIZE": "Dateigröße überschreitet die erlaubte {0}.",
     "CANNOT_DELETE": "Fehler beim Löschen der Datei."
   }
-}
+}

locales/en.json

@@ -377,7 +377,11 @@
         "no_results": "Your {keyword} query did not return any results",
         "enter_keyword_placeholder": "Search for products here",
         "search_button": "Search",
-        "view_all_results_button": "View all {total} results"
+        "view_all_results_button": "View all {total} results",
+        "barcode_detector": {
+          "title": "Barcode scan",
+          "description": "To proceed, please enable your camera to scan the barcode on the product. This will help us quickly identify the item and provide you with the necessary information."
+        }
       },
       "language_selector": {
         "label": "Language:"
@@ -1472,4 +1476,4 @@
     "INVALID_SIZE": "File size exceeds the allowed {0}",
     "CANNOT_DELETE": "Failure while deleting file"
   }
-}
+}

locales/es.json

@@ -377,7 +377,11 @@
         "no_results": "Tu consulta {keyword} no devolvió ningún resultado",
         "enter_keyword_placeholder": "Buscar productos aquí",
         "search_button": "Buscar",
-        "view_all_results_button": "Ver todos los {total} resultados"
+        "view_all_results_button": "Ver todos los {total} resultados",
+        "barcode_detector": {
+          "title": "Escanear código de barras",
+          "description": "Para continuar, habilita tu cámara para escanear el código de barras del producto. Esto nos ayudará a identificar rápidamente el artículo y proporcionarte la información necesaria."
+        }
       },
       "language_selector": {
         "label": "Idioma:"
@@ -1472,4 +1476,4 @@
     "INVALID_SIZE": "File size exceeds the allowed {0}.",
     "CANNOT_DELETE": "Failure while deleting file."
   }
-}
+}