cloudcommerce 0.26.5 → 0.26.7

package/ecomplus-stores/monocard/functions/ssr/content/layout.json

@@ -22,16 +22,31 @@
     },
     "alphabetical_sort_submenu": false
   },
-  "service_links": [
-    {
-      "title": "Edite seu Monocard",
-      "href": "https://mono.direct/login"
-    },
-    {
-      "title": "Fale conosco",
-      "href": "https://ajuda.monocard.com.br/"
-    }
-  ],
   "footer": {
+    "pages_list": {
+      "enabled": true,
+      "title": "",
+      "links": []
+    },
+    "stamps": [
+      {
+        "img": "",
+        "alt": "Troca garantida",
+        "icon": "exchange",
+        "href": "/p/trocas"
+      },
+      {
+        "img": "",
+        "alt": "Google Navegação Segura",
+        "icon": "check",
+        "href": "https://transparencyreport.google.com/safe-browsing/search?url={domain}"
+      },
+      {
+        "img": "",
+        "alt": "Conexão SSL",
+        "icon": "lock",
+        "href": ""
+      }
+    ]
   }
 }

package/ecomplus-stores/monocard/functions/ssr/content/pages/home.json

@@ -0,0 +1,63 @@
+{
+  "meta_title": "",
+  "meta_description": "",
+  "hero": {
+    "autoplay": 9000,
+    "slides": [
+      {
+        "start": "",
+        "end": "",
+        "img": "/img/uploads/rect89.webp",
+        "alt": "Headset banner",
+        "mobile_img": "/img/uploads/headphone.webp",
+        "href": "/headset",
+        "title": "20% off on first purchase",
+        "subtitle": "At demoStore you can shop the best tech of 2023. Enjoy and get 10% off on your first purchase!",
+        "button_link": "/",
+        "button_text": "See"
+      },
+      {
+        "start": "",
+        "end": "",
+        "img": "/img/uploads/rect859.png",
+        "alt": "",
+        "mobile_img": "",
+        "href": "",
+        "title": "",
+        "subtitle": "",
+        "button_link": "",
+        "button_text": ""
+      }
+    ]
+  },
+  "sections": [
+    {
+      "type": "product-shelf",
+      "collection_id": null,
+      "sort": "-price_discount",
+      "title": "",
+      "headless": false,
+      "shuffle": false,
+      "limit": 12,
+      "page": 1
+    },
+    {
+      "type": "banners-grid",
+      "banners": [
+        {
+          "img": "/img/uploads/rect8589.png",
+          "href": "/banner-1"
+        },
+        {
+          "img": "/img/uploads/passion.webp",
+          "href": "/banner-2"
+        },
+        {
+          "img": "/img/uploads/rect89.webp",
+          "href": "/banner-3",
+          "mobile_img": "/img/uploads/headphone.webp"
+        }
+      ]
+    }
+  ]
+}

package/ecomplus-stores/monocard/functions/ssr/content/pages/products.json

@@ -0,0 +1,19 @@
+{
+  "sections": [
+    {
+      "type": "breadcrumbs"
+    },
+    {
+      "type": "product-details"
+    },
+    {
+      "type": "related-products"
+    },
+    {
+      "type": "doc-description"
+    },
+    {
+      "type": "product-specifications"
+    }
+  ]
+}

package/ecomplus-stores/monocard/functions/ssr/content/settings.json

@@ -1,9 +1,9 @@
 {
-  "domain": "ecom2-monocard.web.app",
+  "domain": "ecom2monocard.web.app",
   "name": "Monocard",
   "description": "Monocard - O seu último cartão de visitas",
   "logo": "/img/uploads/logo.webp",
-  "icon": "/img/icon.png",
+  "icon": "/img/uploads/ecom-icon.png",
   "primary_color": "#92F7B6",
   "email": "",
   "phone": "",
@@ -21,6 +21,26 @@
   "youtube": "https://www.youtube.com/channel/UCBlIxK5JAub0E1EX_qHdzmA",
   "tiktok": "",
   "pinterest": "",
+  "threads": "",
+  "service_links": [
+    {
+      "title": "Edite seu Monocard",
+      "href": "https://mono.direct/login"
+    },
+    {
+      "title": "Fale conosco",
+      "href": "https://ajuda.monocard.com.br/"
+    }
+  ],
+  "payment_methods": [
+    "pix",
+    "visa",
+    "mastercard",
+    "elo",
+    "amex",
+    "hipercard",
+    "boleto"
+  ],
   "metafields": {
     "support_url": "https://ajuda.monocard.com.br/",
     "business_lp_url": "https://empresas.monocard.com.br/",

package/ecomplus-stores/monocard/functions/ssr/package.json

@@ -17,19 +17,18 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^0.10.0",
-    "@cloudcommerce/firebase": "^0.10.0",
-    "@cloudcommerce/ssr": "^0.10.0",
+    "@cloudcommerce/api": "^0.26.6",
+    "@cloudcommerce/firebase": "^0.26.6",
+    "@cloudcommerce/ssr": "^0.26.6",
     "@vueuse/motion": "2.0.0-beta.22"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.10.0",
-    "@cloudcommerce/storefront": "^0.10.0",
-    "@cloudcommerce/types": "^0.10.0",
-    "@fontsource/inter": "^4.5.15",
+    "@cloudcommerce/i18n": "^0.26.6",
+    "@cloudcommerce/storefront": "^0.26.6",
+    "@cloudcommerce/types": "^0.26.6",
+    "@fontsource-variable/inter": "^5.0.8",
     "@iconify-json/ri": "^1.1.8",
     "@iconify-json/wpf": "^1.1.4",
-    "lottie-web": "^5.11.0",
-    "lozad": "^1.16.0"
+    "lottie-web": "^5.12.2"
   }
 }

package/ecomplus-stores/monocard/functions/ssr/src/assets/card.css

@@ -0,0 +1,99 @@
+.card {
+  color: var(--color);
+  width: 320px;
+  height: 190px;
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+  perspective:600px;
+}
+.card__part {
+  box-shadow: 1px 1px #aaa3a3;
+  top: 0;
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  display: inline-block;
+  width: 320px;
+  height: 190px;
+  background: var(--background-color);
+  border-radius: 8px;
+  -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+}
+.card__front {
+  padding: 18px;
+  transform: rotateY(0);
+  -webkit-transform: rotateY(0);
+  -moz-transform: rotateY(0);
+}
+.card__back {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  transform: rotateY(-180deg);
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+}
+.card__back img {
+  max-width: 256px;
+  max-height: 154px;
+}
+.card__logo {
+  height: 16px;
+}
+.card__front-logo{
+  position: absolute;
+  top: 18px;
+  right: 18px;
+}
+.card__square {
+  border-radius: 5px;
+  height: 30px;
+}
+.card__space-75 {
+  margin-top: 100px;
+  width: 75%;
+  float: left;
+}
+.card__space-25 {
+  margin-top: 30px;
+  width: 25%;
+  float: right;
+  text-align: right;
+}
+.card__label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.8);
+  letter-spacing: 1px;
+}
+.card__info {
+  margin-bottom: 0;
+  margin-top: 5px;
+  font-size: 16px;
+  line-height: 18px;
+  color: var(--color);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+.card:not(.card--no-back):hover .card__front,
+.card--show-back .card__front {
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+}
+.card:not(.card--no-back):hover .card__back,
+.card--show-back .card__back {
+  transform: rotateY(0deg);
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+}

package/ecomplus-stores/monocard/functions/ssr/src/assets/style.css

@@ -0,0 +1,74 @@
+:root {
+  --custom-font-sans: "Inter Variable";
+  --c-on-primary: rgb(0, 0, 0);
+  --un-prose-links: rgb(var(--rgb-primary-700));
+}
+
+html {
+  scroll-behavior: smooth;
+}
+body {
+  overflow-x: hidden;
+}
+a, button, button > * {
+  transition: background-color var(--transition),
+    color var(--transition), border-color var(--transition),
+    opacity var(--transition), transform var(--transition-fast);
+}
+
+.ui-link {
+  @apply not-prose font-medium text-primary underline underline-offset-4
+  decoration-primary/70 hover:text-primary-bold active:text-primary-subtle;
+}
+
+[class*=ui-btn] {
+  @apply not-prose inline-block text-base font-medium px-4 py-2 rounded
+  border-2 border-transparent focus:ring-1 focus:ring-offset-1 active:ring-2;
+}
+.ui-btn-sm {
+  @apply text-sm px-3 py-1.5 border-1;
+}
+.ui-btn-lg {
+  @apply font-bold px-6 py-2.5 active:ring-3;
+}
+.ui-btn-primary {
+  @apply primary border-primary hover:primary-bold ring-primary/30;
+}
+.ui-btn-secondary {
+  @apply bg-secondary-100/50 text-secondary border-secondary
+  hover:secondary ring-secondary/30;
+}
+.ui-btn-contrast {
+  @apply bg-white text-primary hover:bg-primary-100 ring-white/30;
+}
+
+.ui-text-brand, .ui-title {
+  @apply font-brand font-black italic;
+}
+.ui-title {
+  @apply not-prose text-3xl xl:text-5xl;
+}
+
+[class*=ui-badge] {
+  @apply text-center px-2.5 py-0.5 rounded-md font-semibold
+  inline-block bg-secondary-200 text-secondary-900;
+}
+[class*=ui-badge-pill] {
+  @apply py-0 rounded-full;
+}
+.ui-badge-pill-sm {
+  @apply text-xs min-w-[1rem] px-0.5;
+}
+.ui-badge-pill-lg {
+  @apply text-lg min-w-[1.75rem] px-2;
+}
+
+[class*=ui-section] {
+  @apply container 2xl:max-w-7xl mx-auto px-4 sm:px-2 my-6 md:my-8;
+}
+.ui-section {
+  @apply sm:px-2 my-6 md:my-8;
+}
+.ui-section-slim {
+  @apply my-3;
+}

package/ecomplus-stores/monocard/functions/ssr/src/components/AccountMenu.vue

@@ -7,7 +7,7 @@
     <div v-if="open">
       <span v-once>{{ initializeFirebaseAuth() }}</span>
     </div>
-    <MenuButton class="outline-none">
+    <MenuButton class="outline-none" :aria-label="$t.i19myAccount">
       <slot name="button" v-bind="{ open }" />
     </MenuButton>
     <Fade>
@@ -16,7 +16,7 @@
         divide-y divide-base-100 focus:outline-none">
         <div class="p-3 text-base-600">
           {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
-          <AccountLink class="block py-1.5 rounded primary hover:primary-bold my-1">
+          <AccountLink role="button" class="ui-btn-sm ui-btn-primary block my-1">
             {{ $t.i19accessMyAccount }}
           </AccountLink>
           <AccountLink
@@ -40,7 +40,7 @@
           <MenuItem
             as="li"
             v-slot="{ active }"
-            v-for="({ title, href }, i) in serviceLinks"
+            v-for="({ title, href }, i) in $settings.service_links"
             :key="`s-${i}`"
           >
             <ALink
@@ -67,7 +67,7 @@
           <MenuItem v-if="isLogged" as="li">
             <button @click="logout" class="p-2 text-right text-base-800">
               <span class="text-base-600">{{ $t.i19logout }}</span>
-              <i class="i-logout text-lg ml-1"></i>
+              <i class="i-logout-circle-r-line text-lg ml-1"></i>
             </button>
           </MenuItem>
         </ul>
@@ -83,7 +83,7 @@ import {
   MenuItems,
   MenuItem,
 } from '@headlessui/vue';
-import { socialNetworks } from '@@sf/server-data';
+import { socialNetworks } from '@@sf/sf-lib';
 import {
   customerName,
   initializeFirebaseAuth,
@@ -92,13 +92,4 @@ import {
 } from '@@sf/state/customer-session';
 import AccountLink from '@@sf/components/AccountLink.vue';
 import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
-
-export interface Props {
-  serviceLinks?: Array<{
-    title: string;
-    href: string;
-  }>;
-}
-
-defineProps<Props>();
 </script>

package/ecomplus-stores/monocard/functions/ssr/src/components/Banner.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="mx-auto overflow-x-hidden"
+    :class="hasHeader ? 'grid grid-cols-1 sm:grid-cols-2 items-center' : null"
+  >
+    <ALink
+      :href="href"
+      :class="hasHeader
+        ? 'sm:order-last [&_img]:max-w-full sm:[&_img]:max-w-none'
+          + ' [&_img]:aspect-video sm:[&_img]:aspect-[2.5] [&_img]:object-cover'
+        : '[&_img]:max-w-full'"
+    >
+      <slot name="picture" />
+    </ALink>
+    <div
+      v-if="hasHeader"
+      class="p-12 xl:ps-32 mb-3 sm:mb-0"
+    >
+      <Component
+        v-if="parsedTitle"
+        :is="headingTag"
+        class="ui-title mt-1"
+      >
+        {{ parsedTitle }}
+      </Component>
+      <p v-if="parsedSubtitle" class="text-lg mt-4 md:mt-6">
+        {{ parsedSubtitle }}
+      </p>
+      <ALink
+        v-if="parsedButtonText"
+        :href="buttonLink"
+        class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+      >
+        {{ parsedButtonText }}
+      </ALink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseBannerProps,
+  useBanner,
+} from '@@sf/composables/use-banner';
+
+export type Props = UseBannerProps & {
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  headingTag: 'h3',
+});
+const {
+  hasHeader,
+  parsedTitle,
+  parsedSubtitle,
+  parsedButtonText,
+} = useBanner(props);
+</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/BannersGrid.astro

@@ -0,0 +1,25 @@
+---
+import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
+import BannerPictures from '@@sf/components/BannerPictures.astro';
+import Banner from '~/components/Banner.vue';
+
+export type Props = {
+  title?: string;
+  titleLink?: string;
+  banners: UseBannerProps[];
+}
+
+const { banners } = Astro.props;
+---
+
+<section class="ui-section">
+  <ul class="flex flex-wrap lg:flex-nowrap gap-4">
+    {banners.map((banner) => (
+      <li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">
+        <Banner {...banner}>
+          <BannerPictures {...banner} slot="picture" />
+        </Banner>
+      </li>
+    ))}
+  </ul>
+</section>

package/ecomplus-stores/monocard/functions/ssr/src/components/Breadcrumbs.astro

@@ -0,0 +1,44 @@
+---
+import {
+  type Props as UseBreadcrumbsProps,
+  useBreadcrumbs,
+} from '@@sf/composables/use-breadcrumbs';
+
+export interface Props extends UseBreadcrumbsProps {}
+
+const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(Astro.props);
+---
+
+{breadcrumbs.length > 0 &&
+  <section class="ui-section-slim">
+    <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
+      <ol class="flex items-center gap-1 text-base-600">
+        <li>
+          <a href="/" class="hover:text-primary">
+            <span class="sr-only"> Home </span>
+            <i class="i-home"></i>
+          </a>
+        </li>
+        {breadcrumbs.map(({ name, link }, i) => 
+          <>
+            {i + 1 < breadcrumbs.length
+              ? <li class="text-base-300">
+                  <i class="i-chevron-right"></i>
+                </li>
+                <li class="whitespace-nowrap">
+                  <a href={link} class="hover:text-primary">{name}</a>
+                </li>
+              : <li class="hidden lg:block text-base-300">
+                  <i class="i-chevron-right"></i>
+                </li>
+                <li class="hidden lg:block whitespace-nowrap overflow-hidden text-ellipsis">
+                  <span class="text-base-500">{name}</span>
+                </li>
+            }
+          </>
+        )}
+      </ol>
+    </nav>
+    {inlineJSONLd && <script type="application/ld+json" set:html={inlineJSONLd} />}
+  </section>
+}

package/ecomplus-stores/monocard/functions/ssr/src/components/CartItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <article class="relative bg-white shadow-sm">
+    <ALink :href="link" class="flex items-center gap-5 p-4 group">
+      <AImg
+        v-if="image"
+        :picture="image"
+        :alt="title"
+        class="w-20 h-20 object-cover"
+      />
+      <p class="py-2 flex-auto text-sm text-base-700
+        group-hover:text-base-900 group-hover:underline">
+        {{ title }}
+      </p>
+    </ALink>
+    <button
+      v-if="cartItem._id"
+      @click.stop="removeCartItem(cartItem._id)"
+      class="absolute top-0 right-0 p-2 opacity-70 hover:opacity-100"
+      :aria-label="$t.i19remove"
+    >
+      <span class="w-5 h-5 text-sm leading-none flex flex-col justify-center
+        rounded-full border-3 text-danger-800 border-danger-700/30">
+        <i class="i-close my-0 mx-auto"></i>
+      </span>
+    </button>
+    <div class="flex justify-between items-center border-t-2 border-base-100">
+      <div class="border-r-2 border-base-100">
+        <QuantitySelector
+          v-model="cartItem.quantity"
+          :min="cartItem.min_quantity"
+          :max="cartItem.max_quantity"
+        />
+      </div>
+      <Prices
+        :base-price="cartItem.base_price"
+        :price="finalPrice"
+        :has-cashback="false"
+        :has-price-options="false"
+        class="px-4 py-2.5 text-[95%] text-right"
+      />
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { removeCartItem } from '@@sf/state/shopping-cart';
+import {
+  type Props as UseCartItemProps,
+  useCartItem,
+} from '@@sf/composables/use-cart-item';
+import QuantitySelector from '@@sf/components/QuantitySelector.vue';
+import Prices from '~/components/Prices.vue';
+
+export type Props = UseCartItemProps;
+
+const props = defineProps<Props>();
+const {
+  cartItem,
+  title,
+  link,
+  image,
+  finalPrice,
+} = useCartItem(props);
+</script>