cloudcommerce 0.22.1 → 0.22.2

package/ecomplus-stores/barra-doce/functions/many/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "barra-doce-many",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "echo '>> Run build from repository root'",
+    "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/feeds": "^0.22.1",
+    "@cloudcommerce/firebase": "^0.22.1",
+    "@cloudcommerce/passport": "^0.22.1"
+  }
+}

package/ecomplus-stores/barra-doce/functions/ssr/.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: './node_modules/@cloudcommerce/storefront/.eslintrc.cjs',
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+  },
+};

package/ecomplus-stores/barra-doce/functions/ssr/astro.config.mjs

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import definedAstroConfig from '@cloudcommerce/storefront/astro.config.mjs';
+
+export default definedAstroConfig;

package/ecomplus-stores/barra-doce/functions/ssr/content/layout.json

@@ -0,0 +1,37 @@
+{
+  "metatags": {
+    "og_image": "",
+    "fb_app_id": "",
+    "twitter_username": ""
+  },
+  "custom_code": {
+    "css": "",
+    "html_head": "",
+    "html_body": ""
+  },
+  "header": {
+    "pitch_bar": [
+      {
+        "href": "",
+        "html": "<d-md>Ganhe tempo: </d-md>Compre online e retire <d-md>pessoalmente</d-md> na <b>loja em Moema</b>, SP"
+      },
+      {
+        "href": "",
+        "html": "<b>Frete grátis</b> <d-md>para todo Brasil</d-md> a partir de {free_shipping_from_value}"
+      }
+    ],
+    "inline_menu_categories": {
+      "featured": [],
+      "random": 7
+    },
+    "alphabetical_sort_submenu": false
+  },
+  "service_links": [
+    {
+      "title": "Fale conosco",
+      "href": "/pages/contato"
+    }
+  ],
+  "footer": {
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "meta_title": "",
+  "meta_description": "",
+  "hero": {
+    "autoplay": 9000,
+    "slides": [
+      {
+        "start": "",
+        "end": "",
+        "alt": "FORMAS DE TABLETES | Diversos modelos em diversos materiais | A partir de R$7,90",
+        "img": "/img/uploads/banner-forma-decora.jpg",
+        "mobile_img": "",
+        "href": "/categoria/formas-de-barra-e-tablete-de-chocolate",
+        "title": "Formas de tabletes",
+        "subtitle": "Acetato, 3 partes, Polipropileno, Poliestireno, Policarbonato",
+        "button_link": "/categoria/formas-de-barra-e-tablete-de-chocolate",
+        "button_text": "A partir de R$ 7,90"
+      }
+    ]
+  },
+  "sections": [
+    {
+      "type": "product-shelf",
+      "collection_id": null,
+      "sort": "-price_discount",
+      "title": "",
+      "headless": false,
+      "shuffle": false,
+      "limit": 12,
+      "page": 1
+    }
+  ]
+}

package/ecomplus-stores/barra-doce/functions/ssr/content/settings.json

@@ -0,0 +1,48 @@
+{
+  "domain": "ecom2-demo.web.app",
+  "name": "E-Com Plus demoStore",
+  "description": "My PWA Shop",
+  "logo": "/img/uploads/logo-barradoce.webp",
+  "icon": "/img/uploads/ecom-icon.png",
+  "primary_color": "#f06606",
+  "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": 6,
+        "monthly_interest": 0,
+        "min_installment": 50
+      },
+      "discount_option": {
+        "label": null,
+        "apply_at": null,
+        "type": null,
+        "value": null
+      },
+      "loyalty_points_program": {
+        "id": null,
+        "name": null,
+        "ratio": null,
+        "earn_percentage": null
+      }
+    },
+    "calculate_shipping": {
+      "free_shipping_from_value": 250
+    }
+  }
+}

package/ecomplus-stores/barra-doce/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/barra-doce/functions/ssr/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "barra-doce-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.1",
+    "@cloudcommerce/firebase": "^0.22.1",
+    "@cloudcommerce/ssr": "^0.22.1"
+  },
+  "devDependencies": {
+    "@cloudcommerce/i18n": "^0.22.1",
+    "@cloudcommerce/storefront": "^0.22.1",
+    "@cloudcommerce/types": "^0.22.1",
+    "@fontsource/croissant-one": "^5.0.5",
+    "@iconify-json/mingcute": "^1.1.7"
+  }
+}

package/ecomplus-stores/barra-doce/functions/ssr/public/admin/.gitkeep

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

package/ecomplus-stores/barra-doce/functions/ssr/public/assets/.gitkeep

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

package/ecomplus-stores/barra-doce/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/barra-doce/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/barra-doce/functions/ssr/src/assets/style.css

@@ -0,0 +1,65 @@
+:root {
+  --font-brand: "Croissant One";
+}
+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
+  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 text-lg md:text-xl 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-normal not-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;
+}
+
+.ui-section {
+  @apply container mx-auto px-4 sm:px-0 my-6 md:my-8;
+}

package/ecomplus-stores/barra-doce/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-star-line 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-align-arrow-left-fill 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/barra-doce/functions/ssr/src/components/Banner.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="mx-auto overflow-x-hidden"
+    :class="hasHeader
+      ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 items-center'
+      : null"
+  >
+    <component
+      :is="href ? 'a-link' : 'span'"
+      :href="href"
+      :class="hasHeader
+        ? 'lg:col-span-3 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" />
+    </component>
+    <div v-if="hasHeader" class="lg:col-span-2 p-8 lg: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="mt-4 md:mt-6 text-base-800 uppercase font-medium text-lg lg:text-xl"
+      >
+        {{ 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"
+      >
+        <i class="i-tag-chevron-fill mr-1"></i>
+        {{ 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/barra-doce/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/barra-doce/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-fill 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/barra-doce/functions/ssr/src/components/HeroSlider.vue

@@ -0,0 +1,51 @@
+<template>
+  <section class="relative mx-auto">
+    <Carousel :autoplay="autoplay" class="secondary-subtle [&>*]: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-screen max-w-screen-2xl"
+        >
+          <template #picture>
+            <slot :name="`picture-${i}`" />
+          </template>
+        </Banner>
+      </li>
+      <template #controls>
+        <div
+          v-show="slides.length > 1"
+          class="absolute z-10 bottom-5 flex justify-end items-center
+          w-screen right-5 xl:right-auto xl:max-w-screen-xl xl:left-1/2 xl:-ms-[640px]"
+        >
+          <div class="relative w-20 h-10 rounded-full
+            bg-white/50 text-primary shadow-sm ring-1 ring-black/5">
+            <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary/10" is-prev>
+              <i class="i-arrow-left-line"></i>
+            </CarouselControl>
+            <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary/10">
+              <i class="i-arrow-right-line"></i>
+            </CarouselControl>
+          </div>
+        </div>
+      </template>
+    </Carousel>
+  </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>