cloudcommerce 0.0.115 → 0.0.117

package/packages/storefront/src/layouts/Pages.astro

@@ -1,38 +0,0 @@
----
-import PagesLayout,
-  { Props as PagesLayoutProps } from '../lib/layouts/Pages.astro';
-import InlineScripts from '../scripts/InlineScripts.astro';
-
-export interface Props extends PagesLayoutProps {}
-
-const props = Astro.props as Props;
-const pagesLayoutProps: PagesLayoutProps = {
-  ...props,
-  headerProps: {
-    ...props.headerProps,
-    logoTransformOptions: {
-      quality: 80,
-      ...props.headerProps?.logoTransformOptions,
-    }
-  },
-};
----
-
-<PagesLayout {...pagesLayoutProps}>
-  <InlineScripts slot="before-head-end" />
-  <slot />
-</PagesLayout>
-
-<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);
-  }
-}
-body {
-  overflow-x: hidden;
-}
-</style>

package/packages/storefront/src/lib/components/TheHeader.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import { toRefs, ImgHTMLAttributes } from 'vue';
-
-export interface Props {
-  logo?: ImgHTMLAttributes;
-  gridClass?: string;
-  actionsGridClass?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  gridClass: 'grid grid-flow-col auto-cols-max justify-between items-center',
-  actionsGridClass: 'grid items-center text-2xl',
-});
-const { logo } = toRefs(props);
-</script>
-
-<template>
-  <header class="header bg-surface bg-opacity-70 sticky py-1 sm:py-2">
-    <div class="container">
-      <div :class="gridClass">
-        <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="/" class="header__logo">
-            <component :is="logo.alt ? 'h1' : 'span'" class="m-0">
-              <img v-bind="logo" />
-            </component>
-          </a>
-        </slot>
-        <slot name="actions-grid">
-          <div :class="actionsGridClass">
-            <slot name="nav" />
-            <slot name="search" />
-            <slot name="buttons" />
-          </div>
-        </slot>
-      </div>
-    </div>
-  </header>
-</template>
-
-<style>
-.header a:not(:hover) [class^="i-"] {
-  color: var(--gray-accent);
-}
-</style>

package/packages/storefront/src/lib/components/TopBar.vue

@@ -1,133 +0,0 @@
-<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-1"
-                    :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/packages/storefront/src/lib/layouts/Pages.astro

@@ -1,26 +0,0 @@
----
-import type { PageContext } from '@@storefront/ssr-context';
-import Base from './Base.astro';
-import Header, { Props as HeaderProps } from './PagesHeader.astro';
-
-export interface Props {
-  pageContext: PageContext;
-  title?: string;
-  headerProps?: HeaderProps;
-}
-
-const { pageContext, title, headerProps } = Astro.props as Props;
----
-
-<Base pageContext={pageContext} title={title}>
-  <Fragment slot="before-head-end">
-    <slot name="before-head-end" />
-  </Fragment>
-  <slot name="header">
-    <Header pageContext={pageContext} {...headerProps} />
-  </slot>
-  <slot />
-  <Fragment slot="before-body-end">
-    <slot name="before-body-end" />
-  </Fragment>
-</Base>

package/packages/storefront/src/lib/layouts/PagesHeader.astro

@@ -1,116 +0,0 @@
----
-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';
-import TheHeader, { Props as TheHeaderProps } from '@@components/TheHeader';
-import LoginDrawer, { Props as LoginDrawerProps } from '@@components/LoginDrawer';
-
-export interface Props {
-  pageContext: PageContext;
-  logoTransformOptions?: Parameters<typeof getImage>[0];
-  topBarProps?: Partial<TopBarProps>;
-  theHeaderProps?: Partial<TheHeaderProps>;
-  loginDrawerProps?: Partial<LoginDrawerProps>;
-}
-
-const {
-  pageContext: {
-    apiState,
-    settings,
-    cms,
-  },
-  logoTransformOptions,
-  topBarProps,
-  theHeaderProps,
-  loginDrawerProps,
-} = Astro.props as Props;
-const header = cms('header') as CmsHeader;
-const contacts = cms('contacts') as CmsContacts;
-const customThemeName = settings.theme.custom || '';
-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: 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 hasMegamenu: boolean | undefined = header.desktop_megamenu;
-const isAlphabeticalOrderSubmenu: boolean | undefined = header.alphabetical_order_submenu;
-const isFullWidthSubmenu: boolean | undefined = header.full_width_submenu;
-const loginDrawerAdditionalLinks: LoginDrawerProps['additionalLinks'] = 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 LoginDrawerProps: LoginDrawerProps;
-}
-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,
-  },
-  ...theHeaderProps,
-};
-globalThis.LoginDrawerProps = {
-  additionalLinks: loginDrawerAdditionalLinks,
-  ...loginDrawerProps,
-};
----
-
-<Fragment>
-  <slot name="top-bar">
-    <TopBar {...globalThis.TopBarProps} />
-  </slot>
-  <slot name="header">
-    <TheHeader {...globalThis.TheHeaderProps}>
-      <Fragment slot="buttons">
-        <LoginDrawer client:idle {...globalThis.LoginDrawerProps} />
-      </Fragment>
-    </TheHeader>
-  </slot>
-</Fragment>

package/packages/storefront/src/lib/main/Home.astro

@@ -1,19 +0,0 @@
----
-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>

package/packages/storefront/src/pages/[...slug].astro

@@ -1,36 +0,0 @@
----
-import loadPageContext, { PageContext } from '@@storefront/ssr-context';
-import api from '@cloudcommerce/api';
-import WildcardMain from '@@storefront/main/Wildcard.astro';
-import PagesLayout from '../layouts/Pages.astro';
-
-if (String(Astro.params.slug).endsWith('.css.map')) {
-  return new Response(null, { status: 404 });
-}
-
-let pageContext: PageContext;
-let loadError: any;
-try {
-  pageContext = await loadPageContext(Astro);
-} catch (err) {
-  if (err.astroResponse) {
-    return err.astroResponse;
-  }
-  loadError = err;
-}
-
-export async function getStaticPaths() {
-  return (await api.get('products?sort=-sales&limit=4&fields=slug'))
-    .data.result.map(({ slug }) => ({ params: { slug } }));
-}
----
-
-<!DOCTYPE html>
-<html lang={pageContext?.lang.replace('_', '-')}>
-{pageContext &&
-  <PagesLayout pageContext={pageContext}>
-    <WildcardMain pageContext={pageContext} />
-  </PagesLayout>
-}
-{loadError && <Fragment set:html={loadError.responseHTML} />}
-</html>

package/packages/storefront/src/pages/fallback.astro

@@ -1,19 +0,0 @@
----
-import loadPageContext, { PageContext } from '@@storefront/ssr-context';
-import FallbackMain from '@@storefront/main/Fallback.astro';
-import PagesLayout from '../layouts/Pages.astro';
-
-let pageContext: PageContext;
-try {
-  pageContext = await loadPageContext(Astro);
-} catch (err) {
-  return err.astroResponse;
-}
----
-
-<!DOCTYPE html>
-<html lang={pageContext?.lang.replace('_', '-')}>
-<PagesLayout pageContext={pageContext}>
-  <FallbackMain pageContext={pageContext} />
-</PagesLayout>
-</html>

package/packages/storefront/src/pages/index.astro

@@ -1,26 +0,0 @@
----
-import loadPageContext, { PageContext } from '@@storefront/ssr-context';
-import HomeMain from '@@storefront/main/Home.astro';
-import PagesLayout from '../layouts/Pages.astro';
-
-let pageContext: PageContext;
-let loadError: any;
-try {
-  pageContext = await loadPageContext(Astro);
-} catch (err) {
-  if (err.astroResponse) {
-    return err.astroResponse;
-  }
-  loadError = err;
-}
----
-
-<!DOCTYPE html>
-<html lang={pageContext?.lang.replace('_', '-')}>
-{pageContext &&
-  <PagesLayout pageContext={pageContext}>
-    <HomeMain pageContext={pageContext} />
-  </PagesLayout>
-}
-{loadError && <Fragment set:html={loadError.responseHTML} />}
-</html>

package/packages/storefront/src/scripts/InlineScripts.astro

@@ -1,11 +0,0 @@
-<script is:inline>
-  window.firebaseConfig = {
-    apiKey: 'AIzaSyCrVzemDgpyp9i6ni7Yc5ZuEVfXYwl-4J0',
-    authDomain: 'ecom2-002.firebaseapp.com',
-    projectId: 'ecom2-002',
-    storageBucket: 'ecom2-002.appspot.com',
-    messagingSenderId: '402807248219',
-    appId: '1:402807248219:web:cf7d57759751e74776367e',
-    measurementId: 'G-SC592CE0GB',
-  };
-</script>