cloudcommerce 0.1.6 → 0.2.0

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/CategoriesSlider.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { Categories } from '@cloudcommerce/types';
+import { ref } from 'vue';
+import { useElementVisibility } from '@vueuse/core';
+
+export interface Props {
+  categories: Partial<Categories>[],
+}
+
+defineProps<Props>();
+const list = ref<HTMLUListElement | null>(null);
+const move = (isNext = true) => {
+  const factor = isNext ? 1 : -1;
+  list.value.scrollLeft += (factor * list.value.offsetWidth);
+};
+const next = () => move();
+const prev = () => move(false);
+const listStart = ref<HTMLLIElement | null>(null);
+const listEnd = ref<HTMLLIElement | null>(null);
+const isStartVisible = useElementVisibility(listStart, { scrollTarget: list });
+const isEndVisible = useElementVisibility(listEnd, { scrollTarget: list });
+</script>
+
+<template>
+  <div class="CategoriesSlider px-4 py-3">
+    <nav>
+      <ul
+        role="list"
+        class="flex items-center overflow-hidden snap-x snap-mandatory scroll-smooth"
+        ref="list"
+      >
+        <li ref="listStart"></li>
+        <li
+          v-for="(category, i) in categories"
+          :key="i"
+          class="text-center font-brand text-lg"
+          :class="{
+            'snap-start snap-always sm:snap-align-none sm:snap-normal': !(i % 2),
+            'md:snap-start md:snap-always': !(i % 4),
+            'xl:snap-start xl:snap-always': !(i % 6),
+          }"
+        >
+          <a
+            :href="category.slug"
+            class="block p-3 rounded-lg text-primary-700
+            hover:text-primary-900 hover:bg-gradient-to-t from-white/70"
+          >
+            <img
+              v-if="category.icon"
+              :src="category.icon.url"
+              :alt="category.icon.alt || category.name"
+              loading="lazy"
+              width="430"
+              height="286"
+            />
+            <h3>{{ category.name }}</h3>
+          </a>
+        </li>
+        <li ref="listEnd"></li>
+      </ul>
+    </nav>
+    <div class="mt-3 lg:mt-4 text-4xl text-base-700
+      flex gap-2 justify-center items-center">
+      <div class="basis-1/3 flex justify-end items-center mr-4">
+        <a
+          href="/busca"
+          class="inline-block font-bold uppercase text-sm px-3 py-2
+          bg-base-200 opacity-80 hover:opacity-100 rounded"
+        >
+          Todos os produtos
+        </a>
+      </div>
+      <button
+        class="px-3"
+        :class="!isStartVisible ? 'opacity-70 hover:opacity-100' : 'opacity-40'"
+        @click="prev"
+        :disabled="isStartVisible"
+      >
+        <i class="i-arrow-left-circle"></i>
+      </button>
+      <button
+        class="px-3"
+        :class="!isEndVisible ? 'opacity-70 hover:opacity-100' : 'opacity-40'"
+        @click="next"
+        :disabled="isEndVisible"
+      >
+        <i class="i-arrow-right-circle"></i>
+      </button>
+      <div class="basis-1/3 flex items-center ml-4">
+         <a
+          href="/blog/c/receitas"
+          class="inline-block font-bold uppercase text-sm p-2
+          opacity-80 hover:opacity-100"
+        >
+          <i class="i-chevron-right"></i>
+          Receitas
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+li {
+  min-width: 50%;
+}
+@screen md {
+  li {
+    min-width: 25%;
+  }
+}
+@screen xl {
+  li {
+    min-width: 16.6667%;
+  }
+}
+</style>

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/HeroBanner.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Products } from '@cloudcommerce/types';
+import { ref } from 'vue';
+import { useElementHover } from '@vueuse/core';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import Prices from '@@components/Prices.vue';
+
+export interface Props {
+  pointers?: Array<{
+    product: Partial<Products> & { price: number },
+    position: {
+      x: number,
+      y: number,
+    },
+  }>,
+  blogPost?: {
+    title: string,
+    link: string,
+    description: string,
+  }
+}
+
+defineProps<Props>();
+const postLink = ref<HTMLElement>(null);
+const isPostLinkHovered = useElementHover(postLink);
+</script>
+
+<template>
+  <div class="HeroBanner relative">
+    <slot />
+    <Popover
+      v-for="{ product, position } in pointers"
+      :key="product.sku" class="z-20"
+      v-slot="{ open }"
+    >
+      <PopoverButton
+        class="absolute outline-none"
+        :style="{
+          top: `${position.y}%`,
+          left: `${position.x}%`,
+        }"
+      >
+        <span class="flex h-4 w-4">
+          <span
+            v-if="!open"
+            class="animate-ping absolute inline-flex h-full w-full
+            bg-primary opacity-75 rounded-full motion-reduce:hidden"
+          ></span>
+          <span
+            class="relative inline-flex h-4 w-4 rounded-full"
+            :class="open ? 'bg-primary/90' : 'bg-primary/50'"
+          ></span>
+          <Fade>
+            <PopoverPanel
+              class="absolute top-5 z-30"
+              :class="position.x > 55 ? 'right-0 text-right' : 'left-0 text-left'"
+            >
+              <article class="bg-white/80 rounded-sm w-60 py-2 px-3 leading-snug">
+                <div class="truncate text-sm mb-1">
+                  <a
+                    :href="product.slug"
+                    :title="product.name"
+                    class="underline decoration-dashed"
+                  >
+                    {{ product.name }}
+                  </a>
+                </div>
+                <Prices :product="product"/>
+                <button class="bg-success-600 text-white hover:bg-success-700
+                  rounded px-2 py-1 mt-1 mr-2 text-sm uppercase font-bold">
+                  <i class="i-shopping-cart-plus"></i>
+                  Comprar
+                </button>
+                <button class="bg-success-500 text-white hover:bg-success-700
+                  rounded px-2 py-1 mt-1 text-sm uppercase font-bold">
+                  <span class="text-xs">kit com</span> 3
+                  <span class="bg-success-100 text-success-800
+                    text-xs px-1 ml-1 rounded-full">
+                    -5%
+                  </span>
+                </button>
+              </article>
+            </PopoverPanel>
+          </Fade>
+        </span>
+      </PopoverButton>
+    </Popover>
+    <a
+      v-if="blogPost"
+      class="absolute bottom-0 left-0 w-full pb-3 px-7 z-10
+        hover:bg-white/70 transition-colors"
+      :href="blogPost.link"
+      ref="postLink"
+    >
+      <article class="prose">
+        <h3
+          class="font-brand font-normal mb-1 bg-secondary/90 rounded-sm text-white
+            inline-block px-3 py-2"
+          style="--un-prose-links: var(--c-primary)"
+          v-html="blogPost.title"
+        ></h3>
+        <p
+          class="text-secondary text-lg"
+          :class="isPostLinkHovered
+            ? 'my-3 xl:text-xl'
+            : 'my-1 underline decoration-2 truncate'"
+          v-html="blogPost.description"
+        ></p>
+      </article>
+    </a>
+  </div>
+</template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/PitchBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { useTimeout, useSwipe } from '@vueuse/core';
 
 type Slide = {
   icon?: 'shipping' | 'credit-card' | 'discount' | 'cashback',
@@ -28,27 +29,55 @@ const slideIndex = ref(0);
 const slide = computed(() => {
   return slides.value[slideIndex.value];
 });
+const { ready, start } = useTimeout(150, { controls: true, immediate: false });
+const isToPrev = ref(false);
 const prev = () => {
-  if (slideIndex.value) {
-    slideIndex.value -= 1;
-  } else {
-    slideIndex.value = slides.value.length - 1;
-  }
+  isToPrev.value = true;
+  start();
 };
 const next = () => {
-  if (slideIndex.value < slides.value.length - 1) {
-    slideIndex.value += 1;
-  } else {
-    slideIndex.value = 0;
-  }
+  isToPrev.value = false;
+  start();
 };
+watch(ready, (isReady) => {
+  if (isReady) {
+    if (isToPrev.value) {
+      if (slideIndex.value) {
+        slideIndex.value -= 1;
+      } else {
+        slideIndex.value = slides.value.length - 1;
+      }
+    } else if (slideIndex.value < slides.value.length - 1) {
+      slideIndex.value += 1;
+    } else {
+      slideIndex.value = 0;
+    }
+  }
+});
+const slider = ref<HTMLElement>(null);
+useSwipe(slider, {
+  onSwipeEnd(e, direction) {
+    if (direction === 'LEFT') next();
+    else if (direction === 'RIGHT') prev();
+  },
+});
 </script>
 
 <template>
-  <div class="PitchBar w-full p-2 bg-white/60 leading-snug">
-    <div class="flex justify-between items-center max-w-4xl m-auto">
-      <button class="i-chevron-left text-2xl text-base-600" @click="prev"></button>
-      <div class="flex items-center gap-2 lg:gap-3 text-base-800">
+  <div class="PitchBar w-full px-2 py-1 bg-white/70 leading-snug">
+    <div class="flex justify-between items-center max-w-4xl m-auto" ref="slider">
+      <button
+        class="i-chevron-left text-2xl p-4 text-base-600 hover:text-base-800"
+        @click="prev"
+      ></button>
+      <div
+        class="flex items-center gap-2 lg:gap-3 text-base-800
+          transition-transform duration-300"
+        :class="ready ? null : {
+          'motion-safe:translate-x-1/3': !isToPrev,
+          'motion-safe:-translate-x-1/3': isToPrev,
+        }"
+      >
         <span v-if="slide.icon" class="text-2xl">
           <i v-if="slide.icon === 'shipping'" class="i-truck-delivery"></i>
           <i v-else-if="slide.icon === 'credit-card'" class="i-credit-card"></i>
@@ -59,7 +88,10 @@ const next = () => {
         <strong v-if="slide.title" v-html="slide.title" class="uppercase"></strong>
         <span v-html="slide.html"></span>
       </div>
-      <button class="i-chevron-right text-2xl text-base-600" @click="next"></button>
+      <button
+        class="i-chevron-right text-2xl p-4 text-base-600 hover:text-base-800"
+        @click="next"
+      ></button>
     </div>
   </div>
 </template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/TheHeader.vue

@@ -7,7 +7,7 @@ import {
   toRefs,
   onMounted,
 } from 'vue';
-import { useWindowScroll } from '@vueuse/core';
+import { promiseTimeout, useTimeout, useWindowScroll } from '@vueuse/core';
 
 export interface Props {
   logo?: ImgHTMLAttributes;
@@ -18,30 +18,51 @@ const props = withDefaults(defineProps<Props>(), {
   logoAltHeading: 'h2',
 });
 const { logo } = toRefs(props);
-const { y } = useWindowScroll();
 const header = ref<HTMLElement | null>(null);
-const logoImg = ref<HTMLElement | null>(null);
-let height: number = (Number(logo.value.height) || 0) + 20;
-onMounted(() => {
-  logoImg.value.onload = () => {
-    height = header.value.offsetHeight;
-  };
+const logoImg = ref<HTMLImageElement | null>(null);
+const { ready, start } = useTimeout(100, { controls: true, immediate: false });
+const height = ref(0);
+if (!import.meta.env.SSR) {
+  onMounted(() => {
+    const fixHeight = () => {
+      height.value = header.value.offsetHeight;
+      start();
+    };
+    if (logoImg.value.complete && logoImg.value.naturalHeight !== 0) {
+      fixHeight();
+    } else {
+      logoImg.value.onload = fixHeight;
+    }
+    window.addEventListener('resize', fixHeight);
+  });
+}
+const { y } = useWindowScroll();
+const isSticky = computed(() => ready.value && y.value > height.value * 1.5);
+const transition = ref('none');
+watch(isSticky, async (isSetSticky) => {
+  if (!isSetSticky) {
+    start();
+    transition.value = 'none';
+  } else {
+    await promiseTimeout(300);
+    transition.value = 'opacity var(--transition-slow), transform var(--transition)';
+  }
 });
-const isHidden = ref(false);
-const isSticky = computed(() => y.value > height);
+const isScrollDown = ref(false);
 watch(y, (newY, oldY) => {
-  isHidden.value = newY > 0 && newY > oldY;
+  isScrollDown.value = newY > 0 && newY < oldY;
 });
 </script>
 
 <template>
+  <div :style="isSticky ? `height: ${height}px` : null"></div>
   <header
-    class="TheHeader z-50 sticky top-0"
-    :class="[
-      isHidden ? 'opacity-0 -translate-y-full' : null,
-      isSticky ? 'bg-white/80 backdrop-blur-md shadow' : null,
-    ]"
-    style="transition: opacity var(--transition-slow), transform var(--transition)"
+    class="TheHeader z-50 top-0 overflow-auto will-change-transform"
+    :class="{
+      'sticky bg-white/80 backdrop-blur-md shadow': isSticky,
+      'opacity-0 -translate-y-full': isSticky && !isScrollDown,
+    }"
+    :style="{ transition }"
     ref="header"
   >
     <div
@@ -125,8 +146,7 @@ watch(y, (newY, oldY) => {
           <ul class="flex items-center gap-2 md:gap-3 text-sm">
             <li>
               <a
-                class="text-on-primary font-bold uppercase rounded px-4 py-2"
-                :class="isSticky ? 'bg-primary' : 'bg-primary/80'"
+                class="primary hover:bg-primary-300 font-bold uppercase rounded px-4 py-2"
                 href="#"
               >
                 <i class="i-chevron-down mr-1"></i> Produtos

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/header/HeaderNav.vue

@@ -5,6 +5,10 @@
     </a>
     <a href="#" class="text-primary-800 hover:text-primary-900">
       Promoções
+      <span class="relative rounded px-2 py-1 ml-1
+        bg-primary border-3 border-primary-bold">
+        Leve 5 pague 4
+      </span>
     </a>
   </nav>
 </template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/layouts/Base.astro

@@ -6,7 +6,7 @@ import '@fontsource/roboto-condensed';
 import '@fontsource/roboto-condensed/400-italic.css';
 import '@fontsource/roboto-condensed/700.css';
 import '@fontsource/roboto-condensed/700-italic.css';
-import InlineScripts from '~/scripts/InlineScripts.astro';
+import '../assets/prices.css';
 
 export interface Props {
   pageContext: PageContext;
@@ -17,7 +17,9 @@ const { pageContext, title } = Astro.props as Props;
 ---
 
 <Base pageContext={pageContext} title={title}>
-  <InlineScripts slot="before-head-end" />
+  <Fragment slot="before-head-end">
+    <script src="../scripts/head-scripts.ts"></script>
+  </Fragment>
   <slot />
 </Base>
 
@@ -37,7 +39,11 @@ body {
   overflow-x: hidden;
   background-color: var(--c-brand-light-blue);
 }
-a {
-  transition: color var(--transition), background-color var(--transition);
+a, button {
+  transition: color var(--transition), background-color var(--transition),
+    opacity var(--transition);
+}
+.prose {
+  max-width: 80ch;
 }
 </style>

package/ecomplus-stores/tia-sonia/functions/ssr/src/layouts/Pages.astro

@@ -16,7 +16,7 @@ const { pageContext, title } = Astro.props as Props;
   <slot name="header">
     <Header pageContext={pageContext} />
   </slot>
-  <main class="container mx-auto">
+  <main class="container mx-auto shadow-md">
     <slot />
   </main>
   <Image

package/ecomplus-stores/tia-sonia/functions/ssr/src/main/Home.astro

@@ -1,45 +1,172 @@
 ---
 import type { PageContext } from '@@sf/ssr-context';
+import { existsSync } from 'node:fs';
+import { join as joinPath } from 'node:path';
 import api from '@cloudcommerce/api';
-import { Image } from '@astrojs/image/components';
+import { Picture } from '@astrojs/image/components';
 import PitchBar from '@@components/PitchBar.vue';
+import HeroBanner from '@@components/HeroBanner.vue';
+import CategoriesGrid from '@@components/CategoriesGrid.vue';
+import CategoriesSlider from '@@components/CategoriesSlider.vue';
+import BrandTestimonials from '@@components/BrandTestimonials.vue';
+import AboutUs from '@@components/AboutUs.astro';
 
 export interface Props {
   pageContext: PageContext;
 }
 
-const products = (await api.get('products')).data.result;
+const { pageContext: { apiState } } = Astro.props as Props;
+
+const products = (await api.get('products?fields=name,slug,sku,price,base_price'))
+  .data.result;
+const heroBanners = [{
+  src: '/img/uploads/hero-acai-granola.jpg',
+  alt: 'Açaí com morango, banana, manga e granola Tia Sônia',
+  pointers: [{
+    product: products.find(({ sku }) => sku === 'PA285'),
+    position: { x: 20, y: 35 },
+  }],
+  blogPost: {
+    title: 'Granola: 10 Benefícios para sua Saúde',
+    link: '/posts/10-beneficios-da-granola-para-a-sua-saude-2020-05-22',
+    description: `A granola é uma opção na alimentação saudável que acompanha a dieta
+      de pessoas ao redor de todo o mundo, saiba mais sobre o assunto em nosso blog!`,
+  }
+}, {
+  src: '/img/uploads/hero-piquenique-snack-cookies.jpg',
+  alt: 'Piquenique com frutas, pães com pasta de amendoim, snacks e cookies Tia Sônia',
+  pointers: [{
+    product: products.find(({ sku }) => sku === 'PA588'),
+    position: { x: 21, y: 50 },
+  }, {
+    product: products.find(({ sku }) => sku === 'PA358'),
+    position: { x: 24, y: 80 },
+  }, {
+    product: products.find(({ sku }) => sku === 'PA352'),
+    position: { x: 84, y: 20 },
+  }, {
+    product: products.find(({ sku }) => sku === 'PA291'),
+    position: { x: 74, y: 46 },
+  }],
+}];
+
+const categoriesOnGrid = apiState.categories.filter(({ parent }) => {
+  return parent?.slug?.includes('estilos');
+});
+const mainCategories = apiState.categories
+  .filter(({ slug, parent }) => {
+    return slug && !parent && !/(todos|kits|parceir|estilos)/.test(slug);
+  })
+  .map((category) => {
+    const localIconSrc = `/img/uploads/categoria-${category.slug}.webp`;
+    if (existsSync(joinPath(process.env.STOREFRONT_BASE_DIR, 'public', localIconSrc))) {
+      if (!category.icon) {
+        category.icon = { url: localIconSrc };
+      } else {
+        category.icon.url = localIconSrc;
+      }
+    }
+    return category;
+  });
 ---
 
-<section class="relative">
-  <PitchBar class="absolute top-0 left-0" client:idle />
-  <div class="grid grid-cols-2">
-    <Image
-      src="/img/uploads/acai-com-granola.jpg"
-      alt="Açaí com morango, banana, manga e granola Tia Sônia"
-      format={'webp'}
-      quality={75}
-      width={1080}
-      height={1080}
-    />
-    <Image
-      src="/img/uploads/cafe-com-tapioca-e-aveia.jpg"
-      alt="Açaí com morango, banana, manga e granola Tia Sônia"
-      format={'webp'}
+<section id="hero" class="relative">
+  <PitchBar class="absolute top-0 left-0 z-10" client:load />
+  <div class="bg-white grid grid-cols-2">
+    {heroBanners.map(({ src, alt, pointers, blogPost }, i) => (
+      <HeroBanner client:visible {pointers} {blogPost}>
+        <Picture
+          src={src}
+          alt={alt}
+          widths={[600, 1080]}
+          sizes="(max-width: 599.98px) 600px, 1080px"
+          aspectRatio={1}
+          quality={75}
+          formats={['webp']}
+          fetchpriority={i === 0 ? 'high' : 'auto'}
+        />
+      </HeroBanner>
+    ))}
+  </div>
+</section>
+<section id="categories" class="bg-base-50 p-7">
+  <h4 class="text-center uppercase font-bold text-base text-primary-800 mb-3">
+    Para seu estilo de alimentação
+  </h4>
+  <CategoriesGrid categories={categoriesOnGrid} />
+  <CategoriesSlider categories={mainCategories} client:visible />
+</section>
+<section
+  id="product"
+  style="background-color: var(--c-brand-light-blue);"
+  class="py-8 lg:py-14"
+>
+  <article class="grid md:grid-cols-2 gap-4 px-8 py-4">
+    <Picture
+      src="/img/uploads/granola-tradicional-lata.webp"
+      alt="Granola Tradicional Tia Sônia - Lata edição especial"
+      widths={[600, 1000]}
+      sizes="(max-width: 599.98px) 600px, 1000px"
+      aspectRatio={1}
       quality={75}
-      width={1080}
-      height={1080}
+      formats={['webp']}
     />
-  </div>
+    <div class="md:pt-5 lg:pt-8 prose">
+      <div class="flex">
+        <img
+          src="/img/uploads/selo-organico-120-80.webp"
+          width="80"
+          height="53.333"
+          loading="lazy"
+          class="mr-4"
+        />
+        <img
+          src="/img/uploads/selo-vegano-120-80.webp"
+          width="80"
+          height="53.333"
+          loading="lazy"
+        />
+        <img
+          src="/img/uploads/selo-usda-120-80.webp"
+          width="80"
+          height="53.333"
+          loading="lazy"
+        />
+      </div>
+      <h3 class="font-brand font-normal text-2xl md:text-4xl text-base-100 mb-8">
+        Granola Tradicional
+      </h3>
+      <p class="grid grid-cols-2 gap-3 whitespace-nowrap
+        uppercase font-bold text-sm text-base-300">
+        <span><i class="i-square-rounded-check"></i> Saúde e muito sabor</span>
+        <span><i class="i-health-recognition"></i> Produto vegano</span>
+        <span><i class="i-leaf"></i> Cultivado organicamente</span>
+        <span><i class="i-checklist"></i> Ingredientes selecionados</span>
+      </p>
+      <ul class="grid grid-cols-2 gap-x-3 list-none p-0 text-white">
+        <li>Flocos de aveia</li>
+        <li>Rapadura</li>
+        <li>Coco</li>
+        <li>Tapioca</li>
+        <li>Uva-passa</li>
+        <li>Castanha de caju</li>
+        <li>Gérmen de trigo</li>
+        <li>Melaço de cana</li>
+        <li>Manteiga</li>
+        <li>Gergelim</li>
+        <li>Sal do Himalaia</li>
+      </ul>
+      <button class="bg-primary text-secondary hover:secondary
+        rounded uppercase font-bold text-lg px-6 py-3 mt-4">
+        <i class="i-shopping-cart-plus mr-2"></i>
+        Comprar
+      </button>
+    </div>
+  </article>
+</section>
+<section id="testimonials" class="bg-white py-9">
+  <BrandTestimonials client:visible />
+</section>
+<section id="about">
+  <AboutUs />
 </section>
-<article class="bg-white p-6">
-  <h1 class="font-brand">
-    Welcome to
-    <span class="text-secondary font-sans font-bold">FEITO NA BAHIA</span>
-  </h1>
-  <ul role="list" class="mt-3 fs-20">
-    {products.map((product) => <li>
-      <a href={`/${product.slug}`}>{product.sku}</a>
-    </li>)}
-  </ul>
-</article>

package/ecomplus-stores/tia-sonia/functions/ssr/src/scripts/head-scripts.ts

@@ -0,0 +1,15 @@
+import modulesInfoPreset from './modules-info-preset';
+
+if (window.storefront) {
+  window.storefront.modulesInfoPreset = modulesInfoPreset;
+}
+
+/* eslint-disable quotes, comma-dangle */
+window.firebaseConfig = {
+  apiKey: "AIzaSyDZ5QPJaLZM1bxEJyGbyK1weoBZ1TiLgFc",
+  authDomain: "ecom2-tiasonia.firebaseapp.com",
+  projectId: "ecom2-tiasonia",
+  storageBucket: "ecom2-tiasonia.appspot.com",
+  messagingSenderId: "895718193792",
+  appId: "1:895718193792:web:1d4fd74466248202994465"
+};