cloudcommerce 0.21.0 → 0.22.1

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

@@ -0,0 +1,70 @@
+{
+  "meta_title": "",
+  "meta_description": "",
+  "hero": {
+    "autoplay": 9000,
+    "slides": [
+      {
+        "start": "",
+        "end": "",
+        "img": "/img/uploads/banner-chamada-desktop-9x81zmd91q.webp",
+        "alt": "LED Ofertas - Confira preços imbatíveis",
+        "mobile_img": "/img/uploads/chamada-mobile-q1c6om6jx4.webp",
+        "href": "",
+        "title": "",
+        "subtitle": "",
+        "button_link": "",
+        "button_text": ""
+      },
+      {
+        "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"
+      }
+    ]
+  },
+  "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"
+        }
+      ]
+    },
+    {
+      "type": "c:products-countdown",
+      "skus": [
+        "PG-RT36WBN-30X60-KIT50",
+        "FII4749"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,49 @@
+{
+  "domain": "ecom2iluminim.web.app",
+  "name": "Iluminim LED",
+  "description": "Iluminim LED",
+  "logo": "/img/uploads/logo.webp",
+  "icon": "/img/uploads/ecom-icon.png",
+  "primary_color": "#d00b11",
+  "secondary_color": "#a2373a",
+  "email": "",
+  "phone": "",
+  "address": "",
+  "corporate_name": "",
+  "doc_number": "",
+  "lang": "pt_br",
+  "currency": "BRL",
+  "currency_symbol": "R$",
+  "country_code": "BR",
+  "whatsapp": "(31) 9 8272-1558",
+  "instagram": "https://www.instagram.com/ecomclub/",
+  "facebook": "https://www.facebook.com/ecom.clubpage/",
+  "twitter": "",
+  "youtube": "https://www.youtube.com/channel/UCBlIxK5JAub0E1EX_qHdzmA",
+  "tiktok": "",
+  "pinterest": "",
+  "modules": {
+    "list_payments": {
+      "installments_option": {
+        "max_number": 12,
+        "monthly_interest": 0,
+        "min_installment": 5
+      },
+      "discount_option": {
+        "label": "Boleto",
+        "apply_at": "subtotal",
+        "type": "percentage",
+        "value": 5
+      },
+      "loyalty_points_program": {
+        "id": null,
+        "name": null,
+        "ratio": null,
+        "earn_percentage": null
+      }
+    },
+    "calculate_shipping": {
+      "free_shipping_from_value": 299.9
+    }
+  }
+}

package/ecomplus-stores/iluminim/functions/ssr/index.js

@@ -0,0 +1,18 @@
+import config from '@cloudcommerce/firebase/config';
+// eslint-ignore-next-line import/no-unresolved
+import { handler as renderStorefront } from './dist/server/entry.mjs';
+import mergeConfig from './config.json' assert { type: 'json' };
+
+config.set({
+  ...mergeConfig,
+  hello: 'from store',
+  /*
+  httpsFunctionOptions: {
+    minInstances: 1,
+  },
+  */
+});
+
+global.$renderStorefront = renderStorefront;
+
+export * from '@cloudcommerce/ssr/firebase';

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

@@ -0,0 +1,31 @@
+{
+  "name": "iluminim-ssr",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev --host",
+    "build": "bash scripts/build.sh",
+    "build:static": "BUILD_OUTPUT=static astro build",
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "18"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "@cloudcommerce/api": "^0.22.0",
+    "@cloudcommerce/firebase": "^0.22.0",
+    "@cloudcommerce/ssr": "^0.22.0"
+  },
+  "devDependencies": {
+    "@cloudcommerce/i18n": "^0.22.0",
+    "@cloudcommerce/storefront": "^0.22.0",
+    "@cloudcommerce/types": "^0.22.0",
+    "@fontsource-variable/heebo": "^5.0.5",
+    "@iconify-json/carbon": "^1.1.18"
+  }
+}

package/ecomplus-stores/iluminim/functions/ssr/public/admin/.gitkeep

@@ -0,0 +1,2 @@
+#index.html
+#assets/

package/ecomplus-stores/iluminim/functions/ssr/public/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+Disallow: /app/
+Disallow: /search$
+Disallow: /search?
+Disallow: /search.html$
+Disallow: /search.html?
+Disallow: /admin/

package/ecomplus-stores/iluminim/functions/ssr/scripts/build.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# workaround for cloudcommerce pnpm monorepo
+filename="../../../packages/storefront/scripts/build-prod.sh"
+if [[ -f $filename ]]; then
+  sh $filename
+elif [[ -f "../$filename" ]]; then
+  sh "../$filename"
+else
+  echo '> npx storefront build'
+  npx storefront build
+fi
+
+exit 0

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

@@ -0,0 +1,65 @@
+:root {
+  --custom-font-sans: "Heebo Variable";
+}
+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-semibold text-primary underline underline-offset-4
+  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 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-bold italic uppercase tracking-tight;
+}
+.ui-title {
+  @apply font-black 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;
+}
+
+.ui-section {
+  @apply container mx-auto px-4 sm:px-0 my-6 md:my-8;
+}

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

@@ -0,0 +1,104 @@
+<template>
+  <Menu
+    as="div"
+    class="relative text-center text-sm text-base-800"
+    v-slot="{ open }"
+  >
+    <div v-if="open">
+      <span v-once>{{ initializeFirebaseAuth() }}</span>
+    </div>
+    <MenuButton class="outline-none">
+      <slot name="button" v-bind="{ open }" />
+    </MenuButton>
+    <Fade>
+      <MenuItems class="absolute -right-8 mt-2 w-56
+        rounded shadow ring-1 ring-black/5 bg-white
+        divide-y divide-base-100 focus:outline-none">
+        <div class="p-3 text-base-600">
+          {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
+          <AccountLink role="button" class="ui-btn-sm ui-btn-primary block my-1">
+            {{ $t.i19accessMyAccount }}
+          </AccountLink>
+          <AccountLink v-if="!isLogged" is-sign-up class="ui-link block">
+            {{ $t.i19createAnAccount }}
+          </AccountLink>
+        </div>
+        <ul class="list-none">
+          <MenuItem as="li" v-slot="{ active }">
+            <AccountLink
+              to="orders"
+              class="block p-2"
+              :class="active ? 'bg-base-100 text-primary' : null"
+            >
+              {{ $t.i19myOrders }}
+            </AccountLink>
+          </MenuItem>
+          <MenuItem as="li" v-slot="{ active }">
+            <AccountLink
+              to="favorites"
+              class="block p-2"
+              :class="active ? 'bg-base-100 text-primary' : null"
+            >
+              <i class="i-heart mr-1"></i>
+              {{ $t.i19myFavorites }}
+            </AccountLink>
+          </MenuItem>
+          <MenuItem
+            as="li"
+            v-slot="{ active }"
+            v-for="({ title, href }, i) in serviceLinks"
+            :key="`s-${i}`"
+          >
+            <ALink
+              :href="href"
+              class="block p-2"
+              :class="active ? 'bg-base-100 text-primary' : null"
+            >
+              {{ title }}
+            </ALink>
+          </MenuItem>
+          <MenuItem as="li">
+            <div class="flex justify-center gap-2 p-2 text-base-500 text-base">
+              <span v-for="(href, network) in socialNetworks" :key="network">
+                <SocialNetworkLink :network="network" class="p-1 hover:text-primary" />
+              </span>
+            </div>
+          </MenuItem>
+          <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-arrow-right-on-rectangle text-lg ml-1"></i>
+            </button>
+          </MenuItem>
+        </ul>
+      </MenuItems>
+    </Fade>
+  </Menu>
+</template>
+
+<script setup lang="ts">
+import {
+  Menu,
+  MenuButton,
+  MenuItems,
+  MenuItem,
+} from '@headlessui/vue';
+import { socialNetworks } from '@@sf/server-data';
+import {
+  customerName,
+  initializeFirebaseAuth,
+  isLogged,
+  logout,
+} 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/iluminim/functions/ssr/src/components/Banner.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="mx-auto overflow-x-hidden"
+    :class="hasHeader ? 'grid grid-cols-1 md:grid-cols-2 items-center' : null"
+  >
+    <component
+      :is="href ? 'a-link' : 'span'"
+      :href="href"
+      class="[&_img]:rounded-lg"
+      :class="hasHeader ? 'basis-1/2 grow-0 md:order-last' : '[&_img]:w-full'"
+    >
+      <slot name="picture" />
+    </component>
+    <div
+      v-if="hasHeader"
+      class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md: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>
+      <component
+        v-if="parsedButtonText"
+        :is="buttonLink ? 'a-link' : 'span'"
+        :href="buttonLink"
+        class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+      >
+        {{ parsedButtonText }}
+      </component>
+    </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/iluminim/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/iluminim/functions/ssr/src/components/CartSidebar.vue

@@ -0,0 +1,35 @@
+<template>
+  <aside class="flex flex-col h-full">
+    <header class="px-6 py-4 flex justify-end items-center gap-3">
+      <span class="text-right text-base text-base-600 font-medium">
+        {{ $t.i19myShoppingCart }}
+      </span>
+      <span class="ui-badge-pill-lg">
+        {{ totalItems }}
+      </span>
+    </header>
+    <article class="grow bg-base-50 border-t-2 border-b-2 border-base-100">
+      <div v-if="freeShippingFromValue" class="text-sm text-center">
+        <div
+          v-if="freeShippingFromValue > shoppingCart.subtotal"
+          class="p-3 secondary-subtle"
+        >
+          {{ $t.i19add$1ToEarn.replace('$1',
+            $money(freeShippingFromValue - shoppingCart.subtotal)) }}
+          <strong class="lowercase">{{ $t.i19freeShipping }}</strong>
+        </div>
+        <div v-else class="p-3 bg-success-50 text-success-800">
+          <i class="text-success-900 i-check mr-1"></i>
+          {{ $t.i19freeShippingFrom }} {{ $money(freeShippingFromValue) }}
+        </div>
+      </div>
+    </article>
+    <footer class="p-5 shadow">
+    </footer>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { freeShippingFromValue } from '@@sf/state/modules-info';
+import { shoppingCart, totalItems } from '@@sf/state/shopping-cart';
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex w-[300px] justify-between">
+    <div>
+      <strong class="text-lg">{{ hours }}</strong>
+      <span>{{ $t.i19about }}</span>
+    </div>
+    <span>:</span>
+    <div>
+      {{ minutes }}
+    </div>
+    <span>:</span>
+    <div>
+      {{ seconds }}
+    </div>
+    <span>:</span>
+    <div>
+      {{ ms }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  watchEffect,
+} from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+
+export interface Props {
+  endsAt?: string;
+  maxHours?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxHours: 8,
+});
+const endTimestamp = computed(() => {
+  if (props.endsAt) {
+    return new Date(props.endsAt).getTime();
+  }
+  return null;
+});
+const hours = ref<number | null>(null);
+const minutes = ref<number>(59);
+const seconds = ref<number>(59);
+const ms = ref<number>(999);
+watchEffect(() => {
+  if (endTimestamp.value) {
+    const timeDiff = endTimestamp.value - Date.now();
+    if (timeDiff > 0) {
+      const diffHours = Math.floor(timeDiff / (1000 * 60 * 60));
+      hours.value = Math.min(diffHours, props.maxHours);
+    }
+    return;
+  }
+  hours.value = props.maxHours;
+});
+useIntervalFn(() => {
+  ms.value -= 1;
+  if (ms.value < 0) {
+    ms.value = 999;
+  }
+}, 1);
+watch([ms], () => {
+  if (ms.value === 0) {
+    seconds.value -= 1;
+    if (seconds.value < 0) {
+      seconds.value = 59;
+      minutes.value -= 1;
+      if (minutes.value < 0) {
+        minutes.value = 59;
+        hours.value = Math.min((hours.value as number) - 1, 0);
+      }
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <section class="bg-base-100 py-3">
+    <div class="relative container mx-auto">
+      <Carousel :autoplay="autoplay" class="[&>*]:items-center">
+        <li
+          v-for="(slide, i) in slides"
+          :key="i"
+          class="shrink-0 basis-full"
+        >
+          <Banner
+            v-bind="{ ...slide, headingTag: i === 0 ? 'h2' : 'h3' }"
+            class="w-full"
+          >
+            <template #picture>
+              <slot :name="`picture-${i}`" />
+            </template>
+          </Banner>
+        </li>
+        <template #controls>
+          <div
+            v-show="slides.length > 1"
+            class="absolute z-10 bottom-5 right-5 flex justify-end items-center"
+          >
+            <div class="relative w-20 h-10 rounded-full
+              bg-primary/80 text-on-primary shadow-sm ring-1 ring-black/5">
+              <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary" is-prev>
+                <i class="i-arrow-left"></i>
+              </CarouselControl>
+              <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary">
+                <i class="i-arrow-right"></i>
+              </CarouselControl>
+            </div>
+          </div>
+        </template>
+      </Carousel>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+import Banner from '~/components/Banner.vue';
+
+export type Props = {
+  autoplay?: number;
+  slides: UseBannerProps[];
+}
+
+defineProps<Props>();
+</script>