cloudcommerce 0.26.7 → 0.27.0

package/ecomplus-stores/iluminim/functions/ssr/src/components/ProductCard.vue

@@ -1,117 +0,0 @@
-<template>
-  <article
-    ref="card"
-    :data-sku="product.sku"
-    class="relative h-full max-w-[350px] mx-auto py-3 group"
-  >
-    <ALink
-      :href="link"
-      class="flex flex-col h-full rounded overflow-hidden
-      group-hover:shadow group-hover:ring-1 ring-black/5"
-    >
-      <div class="aspect-square p-2
-        motion-safe:group-hover:scale-110 transition-transform">
-        <div class="relative w-full h-full bg-white rounded overflow-hidden
-          group-hover:rounded-none">
-          <span v-if="images?.length" class="text-xs text-opacity-70">
-            <AImg
-              :picture="images[0]"
-              :alt="title"
-              class="absolute top-0 left-0 block w-full h-full object-cover"
-            />
-            <AImg
-              v-if="images[1] && wasHoveredOnce"
-              :picture="images[1]"
-              :alt="title"
-              class="absolute top-0 left-0 block w-full h-full object-cover
-              opacity-0 group-hover:opacity-100 transition-opacity
-              motion-safe:duration-300 text-transparent z-10"
-            />
-          </span>
-          <div
-            v-else
-            class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"
-          />
-        </div>
-      </div>
-      <span
-        v-if="discountPercentage"
-        class=":uno: absolute top-9 right-2
-        group-hover:scale-110 group-hover:translate-x-2 transition-transform
-        bg-secondary/70 text-on-secondary text-xs
-        py-0.5 pr-1.5 pl-3 [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]"
-      >
-        -<strong>{{ discountPercentage }}</strong>%
-      </span>
-      <div class="relative flex flex-col grow justify-between p-4
-        group-hover:backdrop-blur-md bg-white/40 z-10">
-        <component
-          :is="headingTag"
-          class="ui-link uppercase font-bold text-sm no-underline line-clamp-2"
-          :class="[
-            isActive ? 'text-base-700' : 'text-base-500',
-            link ? 'group-hover:underline group-hover:text-primary' : null,
-          ]"
-        >
-          {{ title }}
-        </component>
-        <div class="pt-2">
-          <div v-if="isActive">
-            <Prices :product="product" />
-          </div>
-          <span v-else class="ui-badge bg-warning-100 text-warning-700">
-            {{ !isInStock ? $t.i19outOfStock : $t.i19inactive }}
-          </span>
-        </div>
-        <button
-          v-if="isActive && !hasVariations"
-          class=":uno: hidden md:block ui-btn-sm ui-btn-primary
-          absolute -top-6 left-0 w-full rounded-none
-          opacity-0 group-hover:opacity-100 transition -z-10 group-hover:z-10"
-          @click.prevent="addProductToCart(product)"
-        >
-          <span class="inline-block h-4 w-4 leading-none text-base text-center
-            bg-on-primary text-primary opacity-80 rounded-full mr-1">
-            &plus;
-          </span>
-          {{ $t.i19addToCart }}
-        </button>
-      </div>
-    </ALink>
-  </article>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { watchOnce, useElementHover } from '@vueuse/core';
-import { addProductToCart } from '@@sf/state/shopping-cart';
-import {
-  type Props as UseProductCardProps,
-  useProductCard,
-} from '@@sf/composables/use-product-card';
-import Prices from '~/components/Prices.vue';
-
-export type Props = UseProductCardProps & {
-  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  headingTag: 'h3',
-});
-const {
-  product,
-  title,
-  link,
-  images,
-  isInStock,
-  isActive,
-  discountPercentage,
-  hasVariations,
-} = useProductCard(props as UseProductCardProps);
-const card = ref<HTMLElement | null>(null);
-const isHovered = useElementHover(card);
-const wasHoveredOnce = ref(false);
-watchOnce(isHovered, () => {
-  wasHoveredOnce.value = true;
-});
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/ProductShelf.vue

@@ -1,57 +0,0 @@
-<template>
-  <section class="ui-section">
-    <div v-if="title" class="max-w-prose mx-auto text-center mb-2">
-      <h2 class="ui-text-brand text-3xl">
-        <ALink :href="titleLink" :class="titleLink ? 'ui-link' : 'text-base-700'">
-          {{ title }}
-        </ALink>
-      </h2>
-    </div>
-    <Carousel class="group/shelf">
-      <li
-        v-for="product in products"
-        :key="product._id"
-        class="basis-1/2 md:basis-1/3 lg:basis-1/4 shrink-0"
-      >
-        <ProductCard :product="product" />
-      </li>
-      <template #controls>
-        <div
-          v-show="products.length > 2"
-          class="text-3xl lg:text-2xl leading-none text-primary
-          lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"
-        >
-          <CarouselControl class="!top-1/2 !-left-4 w-12 h-12
-            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full
-            lg:shadow-sm lg:ring-1 ring-black/5" is-prev />
-          <CarouselControl class="!top-1/2 !-right-4 w-12 h-12
-            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full
-            lg:shadow-sm lg:ring-1 ring-black/5" />
-        </div>
-      </template>
-    </Carousel>
-  </section>
-</template>
-
-<script setup lang="ts">
-import {
-  type Props as UseProductShelfProps,
-  useProductShelf,
-} from '@@sf/composables/use-product-shelf';
-import Carousel from '@@sf/components/Carousel.vue';
-import CarouselControl from '@@sf/components/CarouselControl.vue';
-import ProductCard from '~/components/ProductCard.vue';
-
-export interface Props extends UseProductShelfProps {}
-
-const props = defineProps<Props>();
-const {
-  title,
-  titleLink,
-  fetching,
-  products,
-} = useProductShelf(props);
-if (import.meta.env.SSR) {
-  await fetching;
-}
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/ProductsCountdown.vue

@@ -1,20 +0,0 @@
-<template>
-  <section class="ui-section">
-    <Countdown />
-    <article v-for="product in products" :key="product._id">
-      <ProductCard :product="product" />
-    </article>
-  </section>
-</template>
-
-<script setup lang="ts">
-import type { ProductItem } from '@@sf/composables/use-product-card';
-import ProductCard from '~/components/ProductCard.vue';
-import Countdown from '~/components/Countdown.vue';
-
-export interface Props {
-  products: ProductItem[];
-}
-
-defineProps<Props>();
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/SearchModal.vue

@@ -1,6 +0,0 @@
-<template>
-  <div class="w-full h-40 bg-base-300"></div>
-</template>
-
-<script setup lang="ts">
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/ShopFooter.vue

@@ -1,149 +0,0 @@
-<template>
-  <footer class="w-screen bg-base-50 border-t border-base-100 py-2">
-    <div class="ui-section">
-      <div class="pb-7 border-b border-base-200
-        flex justify-between flex-wrap lg:flex-nowrap sm:gap-x-10 gap-y-5">
-        <div class="shrink">
-          <slot name="logo" />
-          <div v-if="$settings.description" class="prose">
-            <p>{{ $settings.description }}</p>
-          </div>
-          <div class="flex gap-2 text-base-500">
-            <span v-for="(href, network) in socialNetworks" :key="network">
-              <SocialNetworkLink :network="network" class="p-1 hover:text-primary">
-                <template v-if="network === 'whatsapp'" #append>
-                  <span class="ml-1 text-sm text-base-600">
-                    {{ $settings.whatsapp }}
-                  </span>
-                </template>
-              </SocialNetworkLink>
-            </span>
-          </div>
-          <div v-if="$settings.address || $settings.phone" class="mt-3 text-base-700">
-            <address v-if="$settings.address" class="inline-block mr-4">
-              {{ $settings.address }}
-            </address>
-            <ALink
-              v-if="$settings.phone"
-              :href="`tel:${$settings.phone.replace(/\D/g, '')}`"
-              class="hover:text-primary"
-            >
-              <i class="i-phone mr-0.5"></i>
-              {{ $settings.phone }}
-            </ALink>
-          </div>
-        </div>
-        <div v-if="categories?.length" class="basis-1/2 sm:basis-auto">
-          <div class="text-lg font-medium mb-2.5">
-            {{ categoriesColTitle || $t.i19categories }}
-          </div>
-          <ul
-            class="text-sm"
-            :class="categories.length > 4
-              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
-          >
-            <li v-for="({ name, slug }, i) in categories" :key="`c-${i}`">
-              <ALink :href="`/${slug}`" class="ui-link text-base-600">
-                {{ name }}
-              </ALink>
-            </li>
-            <li>
-              <ALink href="/s" class="ui-link text-base-900">
-                {{ $t.i19allProducts }}
-              </ALink>
-            </li>
-          </ul>
-        </div>
-        <div v-if="pageLinks?.length" class="basis-1/2 sm:basis-auto">
-          <div class="text-lg font-medium mb-2.5">
-            {{ pagesColTitle || $t.i19institutional }}
-          </div>
-          <ul
-            class="text-sm"
-            :class="pageLinks.length > 5
-              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
-          >
-            <li v-for="({ title, href }, i) in pageLinks" :key="`p-${i}`">
-              <ALink :href="href" class="ui-link text-base-600">
-                {{ title }}
-              </ALink>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class="ui-section">
-      <div class="flex flex-wrap lg:flex-nowrap justify-between items-start gap-5">
-        <ul class="flex gap-y-3 gap-x-6 lg:gap-x-8 items-center
-          md:flex-wrap mx-auto md:mx-0 overflow-x-auto md:overflow-hidden">
-          <li v-for="(stamp, i) in stamps" :key="i">
-            <ALink :href="stamp.href?.replace('{domain}', $settings.domain || '')">
-              <slot :name="`picture-${i}`" />
-              <span v-if="!stamp.img" class="flex items-center">
-                <span
-                  v-if="stamp.icon"
-                  class="text-4xl mr-2
-                  [&>*]:bg-gradient-to-br [&>*]:from-success-200 [&>*]:to-success-700"
-                >
-                  <i v-if="stamp.icon === 'lock'" class="i-lock-closed"></i>
-                  <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
-                  <i v-else class="i-arrow-path-rounded-square"></i>
-                </span>
-                <span class="text-sm font-medium text-base-600 max-w-[140px]">
-                  {{ stamp.alt }}
-                  <i
-                    v-if="stamp.href && stamp.href.charAt(0) !== '/'"
-                    class="bg-base-400 ml-0.5 i-arrow-top-right-on-square"
-                  ></i>
-                </span>
-              </span>
-            </ALink>
-          </li>
-        </ul>
-        <div class="flex flex-wrap md:flex-nowrap justify-end items-center
-          gap-4 text-2xl mx-auto md:mx-0 overflow-x-auto md:overflow-hidden">
-          <PaymentMethodFlag
-            v-for="paymentMethod in $settings.payment_methods"
-            :key="paymentMethod"
-            :flag="paymentMethod"
-          />
-        </div>
-      </div>
-      <div class="mt-7 text-xs text-center md:text-left
-        md:flex justify-between gap-4">
-        <div class="mb-3 md:mb-0">
-          @ {{ new Date().getFullYear() }} {{ $settings.corporate_name }}
-          {{ $settings.address ? `/ ${$settings.address}` : '' }}
-          / {{ $settings.doc_number }}
-        </div>
-        <ALink href="https://www.ecomplus.io/" class="italic text-[#37003c]">
-          powered by <b>E-Com Plus</b>
-        </ALink>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script setup lang="ts">
-import type { Categories } from '@cloudcommerce/api/types';
-import type { LayoutContent } from '@@sf/content';
-import { socialNetworks } from '@@sf/sf-lib';
-import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
-import PaymentMethodFlag from '@@sf/components/PaymentMethodFlag.vue';
-
-export interface Props {
-  stamps?: LayoutContent['footer']['stamps'];
-  categories?: Array<Partial<Categories> & {
-    name: string;
-    slug: string;
-  }>;
-  categoriesColTitle?: string;
-  pageLinks?: Array<{
-    title: string;
-    href: string;
-  }>;
-  pagesColTitle?: string;
-}
-
-defineProps<Props>();
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/ShopHeader.vue

@@ -1,158 +0,0 @@
-<template>
-  <header
-    ref="header"
-    class="relative top-0 z-50 transition-colors"
-    :class="[
-      isSticky && !isSidenavOpen ? 'bg-white/80' : 'bg-white',
-      isSticky ? 'backdrop-blur-md shadow py-2 md:py-3' : 'py-3 sm:py-4 md:py-5',
-    ]"
-  >
-    <div class="w-screen lg:w-[calc(100vw-1rem)] xl:max-w-[82rem] 2xl:max-w-[85rem]
-      mx-auto px-1 sm:pl-2 sm:pr-2.5 lg:px-1
-      flex md:grid grid-flow-col grid-cols-3 lg:grid-cols-none lg:auto-cols-max
-      justify-between items-center">
-      <div class="basis-1/4 lg:hidden">
-        <button
-          class="px-2 my-1"
-          :aria-label="$t.i19toggleMenu"
-          @click="isSidenavOpen = !isSidenavOpen"
-        >
-          <i
-            class="text-base-500 text-3xl"
-            :class="isSidenavOpen ? 'i-close' : 'i-bars-3-bottom-left'"
-          ></i>
-        </button>
-      </div>
-      <slot name="logo" />
-      <ShopHeaderMenu class="hidden lg:block" v-bind="{ inlineMenuTrees }" />
-      <div class="basis-1/4 px-2
-        flex justify-end items-center gap-3 lg:gap-4 text-base-800">
-        <button
-          :aria-label="$t.i19searchProducts"
-          @click="isSearchOpen = !isSearchOpen"
-        >
-          <i class="i-magnifying-glass w-7 h-7
-            hover:text-primary hover:scale-110 active:scale-125"></i>
-        </button>
-        <AccountMenu class="hidden sm:block">
-          <template #button="{ open }">
-            <i
-              class="i-user-circle w-7 h-7
-              hover:text-primary hover:scale-110 active:scale-125"
-              :class="open ? 'text-black scale-110' : null"
-            ></i>
-          </template>
-        </AccountMenu>
-        <button
-          :aria-label="$t.i19openCart"
-          @click="isCartOpen = !isCartOpen"
-          class="relative group"
-        >
-          <i class="i-carbon:shopping-cart w-7 h-7 group-hover:text-primary
-            text-secondary-900 group-hover:scale-110 group-active:scale-125"></i>
-          <span
-            v-if="delayedTotalItems"
-            class="ui-badge-pill-sm absolute -top-1 -right-1.5"
-          >
-            {{ delayedTotalItems }}
-          </span>
-        </button>
-      </div>
-    </div>
-    <Drawer
-      v-model="isSidenavOpen"
-      :has-close-button="false"
-      position="absolute"
-      :class="isSticky ? 'mt-2 md:mt-3' : 'mt-3 sm:mt-4 md:mt-5'"
-      :style="{ height: `calc(100vh - ${positionY}px + .5rem)` }"
-    >
-      <ShopSidenav class="bg-white pt-6" v-bind="{ categoryTrees }" />
-    </Drawer>
-    <Drawer
-      v-model="isSearchOpen"
-      :has-close-button="false"
-      placement="top"
-    >
-      <Suspense>
-        <SearchModal v-if="isSearchOpenOnce" />
-        <template #fallback>
-          <div class="container mx-auto">
-            <Skeleton class="p-6" is-large />
-          </div>
-        </template>
-      </Suspense>
-    </Drawer>
-    <Teleport v-if="isMounted" to="#teleported-overlap">
-      <Drawer
-        v-model="isCartOpen"
-        placement="end"
-        backdrop-target="#teleported-overlap"
-      >
-        <Suspense>
-          <CartSidebar v-if="isCartOpenOnce" @close="isCartOpen = false" />
-          <template #fallback>
-            <Skeleton class="pt-16 px-6" is-bold />
-          </template>
-        </Suspense>
-      </Drawer>
-    </Teleport>
-  </header>
-</template>
-
-<script setup lang="ts">
-import {
-  ref,
-  watch,
-  onMounted,
-  defineAsyncComponent,
-} from 'vue';
-import { watchOnce } from '@vueuse/core';
-import { totalItems } from '@@sf/state/shopping-cart';
-import {
-  type Props as UseShopHeaderProps,
-  useShopHeader,
-} from '@@sf/composables/use-shop-header';
-import Drawer from '@@sf/components/Drawer.vue';
-import ShopSidenav from '~/components/ShopSidenav.vue';
-import ShopHeaderMenu from '~/components/ShopHeaderMenu.vue';
-import AccountMenu from '~/components/AccountMenu.vue';
-
-export interface Props extends Omit<UseShopHeaderProps, 'header'> {}
-
-const SearchModal = defineAsyncComponent(() => import('~/components/SearchModal.vue'));
-const CartSidebar = defineAsyncComponent(() => import('~/components/CartSidebar.vue'));
-const props = defineProps<Props>();
-const header = ref<HTMLElement | null>(null);
-const {
-  isSticky,
-  positionY,
-  categoryTrees,
-  inlineMenuTrees,
-} = useShopHeader({ ...props, header });
-const isSidenavOpen = ref(false);
-const isSearchOpen = ref(false);
-const isSearchOpenOnce = ref(false);
-watchOnce(isSearchOpen, () => {
-  isSearchOpenOnce.value = true;
-});
-const isCartOpen = ref(false);
-const isCartOpenOnce = ref(false);
-watchOnce(isCartOpen, () => {
-  isCartOpenOnce.value = true;
-});
-const isMounted = ref(false);
-const delayedTotalItems = ref(0);
-onMounted(() => {
-  isMounted.value = true;
-  watch(totalItems, (newTotalItems, prevTotalItems) => {
-    if (typeof prevTotalItems === 'number') {
-      if (prevTotalItems < newTotalItems) {
-        isCartOpen.value = true;
-      } else if (prevTotalItems && !newTotalItems) {
-        isCartOpen.value = false;
-      }
-    }
-    delayedTotalItems.value = newTotalItems;
-  }, { immediate: true });
-});
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/ShopHeaderMenu.vue

@@ -1,58 +0,0 @@
-<template>
-  <nav>
-    <ul
-      class="flex gap-4 xl:gap-5 text-base-700"
-      :class="inlineMenuTrees.length < 7 ? 'text-base' : 'text-sm'"
-    >
-      <li v-for="(categoryTree, i) in inlineMenuTrees" :key="i">
-        <ShopHeaderSubmenu
-          v-if="categoryTree.subcategories.length"
-          :category-tree="categoryTree"
-        >
-          <template #button="{ open }">
-            <span class="hover:text-primary group">
-              <h3
-                class="group-hover:underline inline"
-                :class="[
-                  inlineMenuTrees.length < 7 ? 'decoration-2' : null,
-                  open ? 'underline' : null,
-                ]"
-              >
-                {{ categoryTree.name }}
-              </h3>
-              <i
-                v-if="hasOneLevelSubcategories"
-                class="i-chevron-down ml-1 transition-transform
-                text-base-400 group-hover:text-primary-subtle"
-                :class="open ? 'rotate-180' : null"
-              ></i>
-            </span>
-          </template>
-        </ShopHeaderSubmenu>
-        <a
-          v-else
-          :href="`/${categoryTree.slug}`"
-          class="hover:text-primary hover:underline"
-          :class="inlineMenuTrees.length < 7 ? 'decoration-2' : null"
-        >
-          <h3 class="inline">{{ categoryTree.name }}</h3>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { CategoryTree } from '@@sf/composables/use-shop-header';
-import { computed } from 'vue';
-import ShopHeaderSubmenu from '~/components/ShopHeaderSubmenu.vue';
-
-export interface Props {
-  inlineMenuTrees: CategoryTree[];
-}
-
-const props = defineProps<Props>();
-const hasOneLevelSubcategories = computed(() => {
-  return !!props.inlineMenuTrees.find(({ subcategories }) => !subcategories.length);
-});
-</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/ShopHeaderSubmenu.vue

@@ -1,88 +0,0 @@
-<template>
-  <Popover v-slot="{ open }">
-    <PopoverButton class="outline-none">
-      <slot name="button" v-bind="{ open }" />
-    </PopoverButton>
-    <div class="relative">
-      <Fade>
-        <PopoverPanel
-          class="absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform
-          px-6 py-4 rounded backdrop-blur-md shadow bg-white/80
-          text-base text-base-700"
-          :class="countMenuCols === 1 ? 'w-60'
-            : countMenuCols === 2 ? `w-screen ${(categoryPicture ? 'max-w-lg' : 'max-w-sm')}`
-            : countMenuCols === 3 ? `w-screen ${(categoryPicture ? 'max-w-xl' : 'max-w-md')}`
-            : countMenuCols < 6 ? 'w-screen max-w-3xl' : 'w-screen max-w-5xl'"
-        >
-          <div class="flex gap-6 w-full">
-            <ul v-if="subcategoryLinks.length" class="flex-1">
-              <li
-                v-for="(subcategory, i) in subcategoryLinks"
-                :key="`link-${i}`"
-                :class="subcategoryLinks.length > 10 ? 'text-sm mb-1' : 'mb-2'"
-              >
-                <a :href="`/${subcategory.slug}`" class="hover:text-primary">
-                  <h3>{{ subcategory.name }}</h3>
-                </a>
-              </li>
-            </ul>
-            <div
-              v-for="(subcategory, i) in subcategoryCols"
-              :key="i"
-              class="flex-1"
-            >
-              <a :href="`/${subcategory.slug}`" class="hover:text-primary">
-                <h3>{{ subcategory.name }}</h3>
-              </a>
-              <ul class="text-sm text-base-600 mt-1 mb-1.5">
-                <li
-                  v-for="(nestedSubcategory, ii) in subcategory.subcategories"
-                  :key="`${i}-${ii}`"
-                  class="mb-0.5"
-                >
-                  <a
-                    :href="`/${nestedSubcategory.slug}`"
-                    class="hover:text-primary hover:underline"
-                  >
-                    <h3>{{ nestedSubcategory.name }}</h3>
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div
-              v-if="categoryPicture"
-              :class="countMenuCols === 2 ? 'basis-1/2'
-                : countMenuCols < 5 ? 'basis-2/5' : 'basis-1/3'"
-            >
-              <AImg :picture="categoryPicture" class="ml-auto rounded" />
-            </div>
-          </div>
-          <a
-            :href="`/${categoryTree.slug}`"
-            class="block mt-1 text-xs text-base-600 leading-snug underline"
-          >
-            {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
-          </a>
-        </PopoverPanel>
-      </Fade>
-    </div>
-  </Popover>
-</template>
-
-<script setup lang="ts">
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
-import {
-  type Props as UseShopHeaderSubmenuProps,
-  useShopHeaderSubmenu,
-} from '@@sf/composables/use-shop-header-submenu';
-
-export interface Props extends UseShopHeaderSubmenuProps {}
-
-const props = defineProps<Props>();
-const {
-  categoryPicture,
-  subcategoryLinks,
-  subcategoryCols,
-  countMenuCols,
-} = useShopHeaderSubmenu(props);
-</script>