cloudcommerce 0.0.125 → 0.0.126

package/ecomplus-stores/tia-sonia/functions/ssr/public/assets/cms.css

@@ -0,0 +1,114 @@
+.loading {
+  position: fixed;
+  z-index: 9999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.loading:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
+  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
+}
+
+.loading:not(:required) {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 150ms infinite linear;
+  -moz-animation: spinner 150ms infinite linear;
+  -ms-animation: spinner 150ms infinite linear;
+  -o-animation: spinner 150ms infinite linear;
+  animation: spinner 150ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
+}
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package/ecomplus-stores/tia-sonia/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/tia-sonia/functions/ssr/src/components/TheHeader.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { toRefs, ImgHTMLAttributes } from 'vue';
+
+export interface Props {
+  logo?: ImgHTMLAttributes;
+  logoAltHeading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  logoAltHeading: 'h2',
+});
+const { logo } = toRefs(props);
+</script>
+
+<template>
+  <header class="header bg-surface bg-opacity-90 backdrop-blur-md
+    sticky top-0 z-50 py-1 sm:py-2">
+    <div class="container">
+      <div class="grid grid-flow-col auto-cols-max justify-between items-center">
+        <slot name="aside">
+          <div class="header__aside md:hidden">
+            <div class="i-bars-3-bottom-left"></div>
+          </div>
+        </slot>
+        <slot name="logo" v-bind="{ logo }">
+          <a v-if="logo" href="/">
+            <component :is="(logo.alt && logoAltHeading) || 'span'" class="m-0">
+              <img v-bind="logo" />
+            </component>
+          </a>
+        </slot>
+        <div class="flex items-center">
+          <slot name="actions">
+            <slot name="nav" />
+            <slot name="search" />
+            <slot name="buttons" />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

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

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type CmsHeader from '@@storefront/types/cms-header';
+import type CmsContacts from '@@storefront/types/cms-contacts';
+
+export interface Props {
+  marketingStripe: CmsHeader['marketing_stripe'];
+  hasNavbar?: boolean;
+  pageLinks: CmsHeader['contacts_stripe']['pages'];
+  contacts: CmsContacts;
+  hasPhoneLinks?: boolean;
+  hasNetworkLinks?: boolean;
+  socialNetworks?: string[];
+}
+
+withDefaults(defineProps<Props>(), {
+  hasNavbar: true,
+  hasPhoneLinks: true,
+  hasNetworksLinks: true,
+  socialNetworks() {
+    return ['facebook', 'twitter', 'youtube', 'pinterest', 'instagram', 'tiktok'];
+  },
+});
+</script>
+
+<template>
+  <div class="top-bar w-full bg-surface">
+    <slot name="countdown" v-bind="{ marketingStripe }">
+      <template v-if="marketingStripe && marketingStripe.text">
+        <component
+          :is="marketingStripe.link ? 'a' : 'div'"
+          class="top-bar__countdown block text-sm text-center p-1
+            whitespace-nowrap overflow-x-auto"
+          :class="marketingStripe.link ? 'primary' : 'secondary'"
+          :href="marketingStripe.link"
+        >
+          {{ marketingStripe.text }}
+        </component>
+      </template>
+    </slot>
+    <div
+      v-if="hasNavbar"
+      class="top-bar__nav hidden md:block py-2"
+    >
+      <div class="container">
+        <div class="flex items-center lg:px-2 xl:px-4">
+          <div class="grow text-xs">
+            <slot name="page-links" v-bind="{ pageLinks }">
+              <nav
+                v-if="pageLinks"
+                class="top-bar__page-links inline-block mr-4 font-semibold"
+              >
+                <a
+                  v-for="({ link, title }, i) in pageLinks"
+                  class="mr-2 lg:mr-3"
+                  :key="i"
+                  :href="link"
+                >
+                  {{ title }}
+                </a>
+              </nav>
+            </slot>
+            <slot
+              name="contact-links"
+              v-bind="{ contacts, hasPhoneLinks }"
+            >
+              <div
+                v-if="hasPhoneLinks"
+                class="top-bar__contact-links inline-block"
+              >
+                <a
+                  v-if="contacts.whatsapp"
+                  href="javascript:;"
+                  target="_blank"
+                  rel="noopener"
+                  :data-whatsapp-tel="contacts.whatsapp.replace(/\D/g, '')"
+                  class="mr-2"
+                >
+                  <i class="i-whatsapp"></i>
+                  {{ contacts.whatsapp }}
+                </a>
+                <a
+                  v-if="contacts.phone && contacts.phone !== contacts.whatsapp"
+                  :href="`tel:+${contacts.phone.replace(/\D/g, '')}`"
+                  target="_blank"
+                  rel="noopener"
+                  class="mr-2"
+                >
+                  <i class="i-phone"></i>
+                  {{ contacts.phone }}
+                </a>
+              </div>
+            </slot>
+          </div>
+          <slot
+            name="social-networks"
+            v-bind="{ contacts, hasNetworkLinks }"
+          >
+            <div
+              v-if="hasNetworkLinks"
+              class="top-bar__social-networks leading-none"
+            >
+              <template v-for="network in socialNetworks">
+                <template v-if="contacts[network]">
+                  <a
+                    :key="network"
+                    :href="contacts[network]"
+                    target="_blank"
+                    rel="noopener"
+                    class="ml-2"
+                    :aria-label="`Follow on ${network}`"
+                  >
+                    <i v-if="network === 'facebook'" class="i-facebook"></i>
+                    <i v-else-if="network === 'youtube'" class="i-youtube"></i>
+                    <i v-else-if="network === 'twitter'" class="i-twitter"></i>
+                    <i v-else-if="network === 'pinterest'" class="i-pinterest"></i>
+                    <i v-else-if="network === 'instagram'" class="i-instagram"></i>
+                    <i v-else-if="network === 'tiktok'" class="i-tiktok"></i>
+                  </a>
+                </template>
+              </template>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.top-bar__nav a:not(:hover) {
+  color: var(--gray);
+}
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <a class="text-2xl text-gray-accent hover:text-primary no-underline ml-2">
+    <slot />
+  </a>
+</template>

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

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import {
+  i19myAccountAndOrders,
+  i19openCart,
+} from '@@i18n';
+import LoginDrawer, { Props as LoginDrawerProps } from '@@components/LoginDrawer.vue';
+import HeaderButtonLink from '@@components/header/HeaderButtonLink.vue';
+
+export interface Props {
+  accountUrl?: string;
+  cartUrl?: string;
+  loginDrawerAdditionalLinks?: LoginDrawerProps['additionalLinks'];
+}
+
+withDefaults(defineProps<Props>(), {
+  accountUrl: '/app/account',
+  cartUrl: '/app/#/cart',
+});
+</script>
+
+<template>
+  <slot name="account">
+    <LoginDrawer
+      :account-url="accountUrl"
+      :additional-links="loginDrawerAdditionalLinks"
+    >
+      <template #toggle>
+        <HeaderButtonLink
+          :href="accountUrl"
+          :title="i19myAccountAndOrders"
+        >
+          <div class="i-user-circle"></div>
+        </HeaderButtonLink>
+      </template>
+    </LoginDrawer>
+  </slot>
+  <slot />
+  <slot name="cart">
+    <HeaderButtonLink
+      :href="cartUrl"
+      :title="i19openCart"
+    >
+      <div class="i-shopping-cart"></div>
+    </HeaderButtonLink>
+  </slot>
+</template>

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

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import HeaderNavLink from '@@components/header/HeaderNavLink.vue';
+</script>
+
+<template>
+  <nav class="font-semibold px-3">
+    <HeaderNavLink>nav</HeaderNavLink>
+  </nav>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <a class="text-gray-accent hover:text-primary no-underline">
+    <slot />
+  </a>
+</template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="astro/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="@cloudcommerce/storefront/client" />

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

@@ -0,0 +1,34 @@
+---
+import type { PageContext } from '@@storefront/ssr-context';
+import Base from '@@storefront/layouts/Base.astro';
+import InlineScripts from '~/scripts/InlineScripts.astro';
+
+export interface Props {
+  pageContext: PageContext;
+  title?: string;
+}
+
+const { pageContext, title } = Astro.props as Props;
+---
+
+<Base pageContext={pageContext} title={title}>
+  <InlineScripts slot="before-head-end" />
+  <slot />
+</Base>
+
+<style is:global>
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) a:not([role=button]) {
+    --color: var(--primary-100);
+  }
+  :root:not([data-theme=light]) a:not([role=button]):is([aria-current], :hover, :active, :focus) {
+    --color: var(--primary-300);
+  }
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  overflow-x: hidden;
+}
+</style>

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

@@ -0,0 +1,19 @@
+---
+import type { PageContext } from '@@storefront/ssr-context';
+import Base from '~/layouts/Base.astro';
+import Header from '~/layouts/PagesHeader.astro';
+
+export interface Props {
+  pageContext: PageContext;
+  title?: string;
+}
+
+const { pageContext, title } = Astro.props as Props;
+---
+
+<Base pageContext={pageContext} title={title}>
+  <slot name="header">
+    <Header pageContext={pageContext} />
+  </slot>
+  <slot />
+</Base>

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

@@ -0,0 +1,117 @@
+---
+import type { Categories } from '@cloudcommerce/api/types';
+import type CmsHeader from '@@storefront/types/cms-header';
+import type CmsContacts from '@@storefront/types/cms-contacts';
+import type { PageContext } from '@@storefront/ssr-context';
+import { i19buyOnWhatsApp } from '@@i18n';
+import { getImage } from '@@storefront/ssr/image';
+import TopBar, { Props as TopBarProps } from '@@components/TopBar.vue';
+import TheHeader, { Props as TheHeaderProps } from '@@components/TheHeader.vue';
+import HeaderNav from '@@components/header/HeaderNav.vue';
+import HeaderButtons, { Props as HeaderButtonsProps } from '@@components/header/HeaderButtons.vue';
+
+export interface Props {
+  pageContext: PageContext;
+  logoTransformOptions?: Parameters<typeof getImage>[0];
+  topBarProps?: Partial<TopBarProps>;
+  theHeaderProps?: Partial<TheHeaderProps>;
+  headerButtonsProps?: Partial<HeaderButtonsProps>;
+}
+
+const {
+  pageContext: {
+    apiState,
+    settings,
+    cms,
+  },
+  logoTransformOptions,
+  topBarProps,
+  theHeaderProps,
+  headerButtonsProps,
+} = Astro.props as Props;
+const header = cms('header') as CmsHeader;
+const contacts = cms('contacts') as CmsContacts;
+let headerCategories: Array<{ slug: string, name: string }> = [];
+let isCategoriesNavFull: boolean | undefined;
+if (header.categories_list) {
+  if (header.categories_list.featured.length) {
+    // Selected categories/collections/brands
+    headerCategories = header.categories_list.featured.map((pathAndName) => {
+      const [path, name] = pathAndName.split('?');
+      return { slug: path.slice(1), name };
+    });
+  }
+  if (header.categories_list.random) {
+    const mainCategories: Partial<Categories>[] | undefined = apiState
+      .categories?.filter(({ parent }) => (!parent || !parent.slug));
+    if (mainCategories) {
+      for (let i = 0; i < header.categories_list.random && i < mainCategories.length; i++) {
+        if (!headerCategories.find(({ slug }) => mainCategories[i].slug === slug)) {
+          headerCategories.push({
+            slug: mainCategories[i].slug,
+            name: mainCategories[i].name,
+          });
+        }
+      }
+    }
+  }
+  isCategoriesNavFull = header.categories_list.full_width;
+}
+const loginDrawerAdditionalLinks: HeaderButtonsProps['loginDrawerAdditionalLinks']
+  = header.drawer_links?.map(({ title, link }) => ({ href: link, innerHTML: title })) || [];
+if (contacts.whatsapp) {
+  loginDrawerAdditionalLinks.unshift({
+    href: `https://wa.me/55${contacts.whatsapp.replace(/\D/g, '')}`,
+    innerHTML: `<i class="i-whatsapp text-lg"></i> ${i19buyOnWhatsApp}`,
+    isBlank: true,
+  });
+}
+
+declare global {
+  var TopBarProps: TopBarProps;
+  var TheHeaderProps: TheHeaderProps;
+  var HeaderButtonsProps: HeaderButtonsProps;
+}
+globalThis.TopBarProps = {
+  marketingStripe: header.marketing_stripe,
+  pageLinks: header.contacts_stripe.pages,
+  hasPhoneLinks: header.contacts_stripe.phone_wpp,
+  hasNetworkLinks: header.contacts_stripe.socials,
+  contacts,
+  ...topBarProps,
+};
+globalThis.TheHeaderProps = {
+  logo: {
+    ...await getImage({
+      src: settings.logo,
+      width: 150,
+      format: 'webp',
+      quality: 90,
+      ...logoTransformOptions,
+    }) as any,
+    alt: settings.name,
+  },
+  logoAltHeading: Astro.url.pathname === '/' ? 'h1' : 'h2',
+  ...theHeaderProps,
+};
+globalThis.HeaderButtonsProps = {
+  loginDrawerAdditionalLinks,
+  ...headerButtonsProps,
+};
+---
+
+<Fragment>
+  <slot name="top-bar">
+    <TopBar {...globalThis.TopBarProps} />
+  </slot>
+  <slot name="header">
+    <TheHeader {...globalThis.TheHeaderProps}>
+      <Fragment slot="nav">
+        <HeaderNav />
+      </Fragment>
+      <Fragment slot="buttons">
+        <HeaderButtons client:idle {...globalThis.HeaderButtonsProps} />
+      </Fragment>
+    </TheHeader>
+  </slot>
+</Fragment>

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

@@ -0,0 +1,15 @@
+---
+import type { PageContext } from '@@storefront/ssr-context';
+
+export interface Props {
+  pageContext?: PageContext;
+}
+---
+
+<main>
+  <h1>Error :/</h1>
+  <p class="instructions">
+    Check out the <code>src/pages</code> directory to get started.<br/>
+    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+  </p>
+</main>

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

@@ -0,0 +1,19 @@
+---
+import type { PageContext } from '@@storefront/ssr-context';
+import api from '@cloudcommerce/api';
+
+export interface Props {
+  pageContext: PageContext;
+}
+
+const products = (await api.get('products')).data.result;
+---
+
+<main>
+  <h1>Welcome to <span class="text-primary">Astro</span></h1>
+  <ul role="list" class="mt-3 fs-20">
+    {products.map((product) => <li>
+      <a href={`/${product.slug}`}>{product.sku}</a>
+    </li>)}
+  </ul>
+</main>