cloudcommerce 0.33.0 → 0.33.2

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Home.astro

@@ -11,7 +11,7 @@ const heroSlides = heroSlider.slides;
 
 <main>
   {heroSlider.slides.length &&
-    <HeroSlider {...heroSlider} client:load>
+    <HeroSlider {...heroSlider} client:idle>
       {heroSlides[0] && <BannerPictures
         slot="picture-0" {...heroSlides[0]} index={0}
         widths={[640, 856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
@@ -34,5 +34,4 @@ const heroSlides = heroSlider.slides;
     </HeroSlider>
   }
   <Sections />
-  <div style="height: 1000px;"></div>
 </main>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Sections.astro

@@ -2,6 +2,10 @@
 import { usePageSections } from '@@sf/layouts/use-page-main';
 import BannersGrid from '~/components/BannersGrid.astro';
 import ProductShelf from '~/components/ProductShelf.vue';
+import Breadcrumbs from '~/components/Breadcrumbs.astro';
+import DocDescription from '~/components/DocDescription.vue';
+import ProductDetails from '~/components/ProductDetails.vue';
+import ProductSpecifications from '~/components/ProductSpecifications.vue';
 
 const { routeContext } = Astro.locals;
 const { sections } = await usePageSections({
@@ -11,15 +15,34 @@ const { sections } = await usePageSections({
     return { props: content };
   },
 });
+const { isHomepage } = routeContext;
+/* `apiContext` is surelly set here (from Wildcard.astro)
+cause route resource is required to define sections from content. */
 ---
 
 <article class="my-9 md:my-12">
-  {sections.map(({ type, props }) => {
+  {sections.map(async ({ type, props }) => {
     switch (type) {
       case 'product-shelf':
-        return <ProductShelf {...props} client:visible />
+        return isHomepage
+          ? <ProductShelf {...props} client:idle />
+          : <ProductShelf {...props} client:visible />
       case 'banners-grid':
         return <BannersGrid {...props} />
+      case 'breadcrumbs':
+        return <Breadcrumbs />
+      case 'doc-description':
+        return <DocDescription />
+      case 'product-details':
+        const { hasDescription, hasSpecifications, ...detailsProps } = props;
+        return <>
+          <ProductDetails {...detailsProps} client:context>
+            <Fragment slot="description">
+              {hasDescription && <DocDescription />}
+              {hasSpecifications && <ProductSpecifications />}
+            </Fragment>
+          </ProductDetails>
+        </>
       case 'c:foo':
         return <div data-foo={props.foo}></div>
       default:

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Wildcard.astro

@@ -1,18 +1,18 @@
 ---
-const { fetchingApiContext, apiContext } = Astro.locals.routeContext;
+import api from '@cloudcommerce/api';
+import SharedData from '@@sf/components/SharedData.astro';
+import Sections from '~/main/Sections.astro';
 
-await fetchingApiContext;
-const apiDoc = apiContext.doc;
+const { fetchingApiContext } = Astro.locals.routeContext;
+const [
+  { data: { result: grids } },
+] = await Promise.all([
+  api.get('grids'),
+  fetchingApiContext,
+]);
 ---
 
 <main>
-  {apiDoc &&
-    <h1>Hello <span class="text-gradient">{apiDoc.name}</span></h1>
-    <hr>
-    <div class="mt-3">
-      <mark>{apiDoc._id}</mark> from <i>{apiContext.resource}</i>
-      <p>{Math.random()}</p>
-      <em>Lorem ipsum dolor sit amet</em>
-    </div>
-  }
+  <SharedData field="grids" value={grids} />
+  <Sections />
 </main>

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/[...slug].astro

@@ -4,6 +4,7 @@ import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
 import BaseHead from '@@sf/layouts/BaseHead.astro';
 import Base from '~/layouts/Base.astro';
 import PageHeader from '~/layouts/PageHeader.astro';
+import PageFooter from '~/layouts/PageFooter.astro';
 import WildcardMain from '~/main/Wildcard.astro';
 
 if (String(Astro.params.slug).endsWith('.css.map')) {
@@ -34,6 +35,7 @@ export async function getStaticPaths() {
     <BaseHead slot="base-head" />
     <PageHeader />
     <WildcardMain />
+    <PageFooter />
   </Base>
 }
 {loadError && <Fragment set:html={loadError.responseHTML} />}

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/_vue.ts

@@ -1,3 +1,19 @@
-import createApp from '@@sf/pages/_vue';
+import type { App } from 'vue';
+import _createApp from '@@sf/pages/_vue';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+
+const createApp = (app: App) => {
+  _createApp(app);
+  app.component('Carousel', Carousel);
+  app.component('CarouselControl', CarouselControl);
+};
 
 export default createApp;
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Carousel: typeof Carousel;
+    CarouselControl: typeof CarouselControl;
+  }
+}

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/app/account.astro

@@ -0,0 +1,34 @@
+---
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import Picture from '@@sf/components/Picture.astro';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import AccountPage from '~/components/AccountPage.vue';
+
+let routeContext: RouteContext;
+try {
+  routeContext = await loadRouteContext(Astro);
+} catch (err: any) {
+  return err.astroResponse;
+}
+const { settings } = routeContext;
+---
+
+<!DOCTYPE html>
+<html lang={routeContext.lang.replace('_', '-')}>
+<Base>
+  <BaseHead slot="base-head" />
+  <main>
+    <AccountPage client:only>
+      <Picture
+        slot="logo"
+        src={settings.logo}
+        alt={settings.name}
+        widths={[300]}
+        loading="lazy"
+        class="max-w-[150px]"
+      />
+    </AccountPage>
+  </main>
+</Base>
+</html>

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/app/index.astro

@@ -0,0 +1,62 @@
+---
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import CheckoutPage from '~/components/CheckoutPage.vue';
+
+let routeContext: RouteContext;
+try {
+  routeContext = await loadRouteContext(Astro);
+} catch (err: any) {
+  return err.astroResponse;
+}
+const layoutContent = await routeContext.getContent('layout');
+const { footer: { stamps } } = layoutContent;
+---
+
+<!DOCTYPE html>
+<html lang={routeContext.lang.replace('_', '-')}>
+<Base>
+  <Fragment slot="base-head">
+    <BaseHead />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-twbs@7/dist/cdn/storefront-twbs.min.css">
+    <style is:inline>
+      body {
+        --primary: var(--c-primary);
+        --primary-yiq: var(--c-on-primary);
+        --primary-rgb: var(--rgb-primary);
+        --primary-darken: var(--c-primary);
+        --primary-darken-yiq: var(--c-on-primary);
+        --primary-darken-rgb: var(--rgb-primary);
+        --primary-dark: var(--c-primary-bold);
+        --primary-dark-yiq: var(--c-on-primary-bold);
+        --primary-dark-rgb: var(--rgb-primary-bold);
+        --primary-darker: var(--c-primary-bold);
+        --primary-darker-yiq: var(--c-on-primary-bold);
+        --primary-darker-rgb: var(--rgb-primary-bold);
+        --primary-darkest: rgb(var(--rgb-primary-900));
+        --primary-darkest-yiq: var(--c-on-dark);
+        --primary-darkest-rgb: var(--rgb-primary-900);
+        --primary-black: rgb(var(--rgb-primary-950));
+        --primary-lighten: var(--c-primary);
+        --primary-lighten-yiq: var(--c-on-primary);
+        --primary-lighten-rgb: var(--rgb-primary);
+        --primary-light: var(--c-primary-subtle);
+        --primary-light-yiq: var(--c-on-primary-subtle);
+        --primary-light-rgb: var(--rgb-primary-subtle);
+        --primary-lighter: var(--c-primary-subtle);
+        --primary-lighter-yiq: var(--c-on-primary-subtle);
+        --primary-lighter-rgb: var(--rgb-primary-subtle);
+        --primary-lightest: rgb(var(--rgb-primary-200));
+        --primary-lightest-yiq: var(--c-on-light);
+        --primary-lightest-rgb: var(--rgb-primary-200);
+      }
+      .lead {
+        margin-bottom: 1.25rem;
+      }
+    </style>
+  </Fragment>
+  <CheckoutPage footerStamps={stamps} />
+  <script src="@@sf/scripts/vbeta-app"></script>
+</Base>
+</html>

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/index.astro

@@ -10,11 +10,6 @@ let routeContext: RouteContext | undefined;
 let loadError: any;
 try {
   routeContext = await loadRouteContext(Astro);
-  /* Faster SSR without store categories (default) prefetch:
-  routeContext = await loadRouteContext(Astro, {
-    apiPrefetchEndpoints: [],
-  });
-  */
 } catch (err: any) {
   if (err.astroResponse) {
     return err.astroResponse;

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/~fallback.astro

@@ -11,8 +11,6 @@ try {
 } catch (err: any) {
   return err.astroResponse;
 }
-
-// export const prerender = true;
 ---
 
 <!DOCTYPE html>

package/ecomplus-stores/barra-doce/functions/ssr/tailwind.config.cjs

@@ -9,7 +9,6 @@ const themeOptions = {
   iconAliases: {
     close: 'close-line',
     'chevron-right': 'right-fill',
-    'chevron-left': 'left-fill',
   },
 };
 

package/ecomplus-stores/barra-doce/functions/with-apps/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/events": "^0.32.0",
-    "@cloudcommerce/firebase": "^0.32.0",
-    "@cloudcommerce/modules": "^0.32.0"
+    "@cloudcommerce/events": "^0.33.1",
+    "@cloudcommerce/firebase": "^0.33.1",
+    "@cloudcommerce/modules": "^0.33.1"
   }
 }

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

@@ -23,9 +23,9 @@
     "url": "https://github.com/ecomplus/cloud-commerce/issues"
   },
   "dependencies": {
-    "@cloudcommerce/cli": "^0.32.0"
+    "@cloudcommerce/cli": "^0.33.1"
   },
   "devDependencies": {
-    "@cloudcommerce/eslint": "^0.32.0"
+    "@cloudcommerce/eslint": "^0.33.1"
   }
 }

package/ecomplus-stores/monocard/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/ecomplus-stores/monocard/.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: './functions/ssr/node_modules/@cloudcommerce/storefront/.base.eslintrc.cjs',
+  extends: './node_modules/@cloudcommerce/eslint/base.eslintrc.cjs',
 };

package/ecomplus-stores/monocard/.vscode/settings.json

@@ -2,8 +2,12 @@
   "editor.quickSuggestions": {
     "strings": true
   },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "files.associations": {
     "*.css": "tailwindcss"
   },
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "git.autofetch": true
 }

package/ecomplus-stores/monocard/functions/many/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/feeds": "^0.32.0",
-    "@cloudcommerce/firebase": "^0.32.0",
-    "@cloudcommerce/passport": "^0.32.0"
+    "@cloudcommerce/feeds": "^0.33.1",
+    "@cloudcommerce/firebase": "^0.33.1",
+    "@cloudcommerce/passport": "^0.33.1"
   }
 }

package/ecomplus-stores/monocard/functions/ssr/content/extra-pages/terms.json

@@ -1,5 +1,5 @@
 {
-  "title": "Termos de serviço",
+  "title": "Privacidade e termos de serviço",
   "date": "",
   "meta_title": "",
   "meta_description": "",

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

@@ -3,32 +3,7 @@
   "metaDescription": "",
   "hero": {
     "autoplay": 9000,
-    "slides": [
-      {
-        "startsAt": "",
-        "endsAt": "",
-        "img": "/img/uploads/rect89.webp",
-        "alt": "Headset banner",
-        "mobileImg": "/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!",
-        "buttonLink": "/",
-        "buttonText": "See"
-      },
-      {
-        "startsAt": "",
-        "endsAt": "",
-        "img": "/img/uploads/rect859.png",
-        "alt": "",
-        "mobileImg": "",
-        "href": "",
-        "title": "",
-        "subtitle": "",
-        "buttonLink": "",
-        "buttonText": ""
-      }
-    ]
+    "slides": []
   },
   "sections": [
     {
@@ -40,24 +15,6 @@
       "isShuffle": 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",
-          "mobileImg": "/img/uploads/headphone.webp"
-        }
-      ]
     }
   ]
 }

package/ecomplus-stores/monocard/functions/ssr/content/pages/products.json

@@ -5,7 +5,8 @@
     },
     {
       "type": "product-details",
-      "hasDescription": true
+      "hasDescription": true,
+      "hasSpecifications": true
     },
     {
       "type": "related-products"

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

@@ -1,6 +1,5 @@
 {
   "domain": "monocard.ecomplus.app",
-  "assetsPrefix": "https://s2-monocard.b-cdn.net",
   "name": "Monocard",
   "description": "Monocard - O seu último cartão de visitas",
   "logo": "/img/uploads/logo.webp",
@@ -31,6 +30,10 @@
     {
       "title": "Fale conosco",
       "href": "https://ajuda.monocard.com.br/"
+    },
+    {
+      "title": "Privacidade e termos",
+      "href": "/p/terms"
     }
   ],
   "paymentMethods": [

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

@@ -17,19 +17,20 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^0.32.0",
-    "@cloudcommerce/firebase": "^0.32.0",
-    "@cloudcommerce/ssr": "^0.32.0",
+    "@cloudcommerce/api": "^0.33.1",
+    "@cloudcommerce/firebase": "^0.33.1",
+    "@cloudcommerce/ssr": "^0.33.1",
     "@headlessui/vue": "^1.7.16",
     "@vueuse/motion": "2.0.0-beta.22"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.32.0",
-    "@cloudcommerce/storefront": "^0.32.0",
-    "@cloudcommerce/types": "^0.32.0",
+    "@cloudcommerce/i18n": "^0.33.1",
+    "@cloudcommerce/storefront": "^0.33.1",
+    "@cloudcommerce/types": "^0.33.1",
     "@fontsource-variable/inter": "^5.0.8",
     "@iconify-json/ri": "^1.1.8",
     "@iconify-json/wpf": "^1.1.4",
-    "lottie-web": "^5.12.2"
+    "lottie-web": "^5.12.2",
+    "photoswipe": "^5.4.2"
   }
 }

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

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

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

@@ -10,7 +10,7 @@ html {
 body {
   overflow-x: hidden;
 }
-a, button, button > * {
+a, button, button > *, [role=button], [role=button] > * {
   transition: background-color var(--transition),
     color var(--transition), border-color var(--transition),
     opacity var(--transition), transform var(--transition-fast);
@@ -39,7 +39,7 @@ a, button, button > * {
   hover:secondary ring-secondary/30;
 }
 .ui-btn-contrast {
-  @apply bg-white text-primary hover:bg-primary-100 ring-white/30;
+  @apply bg-primary-50 text-on-primary hover:bg-primary-100 ring-white/30;
 }
 
 .ui-text-brand, .ui-title {
@@ -63,6 +63,11 @@ a, button, button > * {
   @apply text-lg min-w-[1.75rem] px-2;
 }
 
+.ui-alert {
+  @apply bg-warning-100 text-warning-800 border-warning-200
+  border text-base rounded px-4 py-3;
+}
+
 [class*=ui-section] {
   @apply container 2xl:max-w-7xl mx-auto px-4 sm:px-2 my-6 md:my-8;
 }

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

@@ -1,27 +1,29 @@
 <template>
   <Menu
     as="div"
-    class="relative text-center text-sm text-base-800"
+    class="text-base-800 relative text-center text-sm"
     v-slot="{ open }"
   >
     <div v-if="open">
       <span v-once>{{ initializeFirebaseAuth() }}</span>
     </div>
-    <MenuButton class="outline-none" :aria-label="$t.i19myAccount">
-      <slot name="button" v-bind="{ open }" />
-    </MenuButton>
+    <AccountLink role="button" @click.prevent>
+      <MenuButton class="outline-none" :aria-label="$t.i19myAccount">
+        <slot name="button" v-bind="{ open }" />
+      </MenuButton>
+    </AccountLink>
     <Fade>
-      <MenuItems class="absolute -right-8 mt-2 w-56
-        rounded-md shadow ring-1 ring-black ring-opacity-5 bg-white
-        divide-y divide-base-100 focus:outline-none">
-        <div class="p-3 text-base-600">
+      <MenuItems class="divide-base-100 absolute -right-8 mt-2
+        w-56 divide-y rounded-md bg-white shadow ring-1
+        ring-black/5 focus:outline-none">
+        <div class="text-base-600 p-3">
           {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
-          <AccountLink role="button" class="ui-btn-sm ui-btn-primary block my-1">
+          <AccountLink role="button" class="ui-btn-sm ui-btn-primary my-1 block">
             {{ $t.i19accessMyAccount }}
           </AccountLink>
           <AccountLink
             v-if="!isLogged"
-            class="block font-medium text-primary-700 hover:text-primary-bold"
+            class="text-primary-700 hover:text-primary-bold block font-medium"
             is-sign-up
           >
             {{ $t.i19createAnAccount }}
@@ -55,19 +57,19 @@
             </ALink>
           </MenuItem>
           <MenuItem as="li">
-            <div class="flex justify-center gap-2 p-2 text-base-500 text-base">
+            <div class="text-base-500 flex justify-center gap-2 p-2 text-base">
               <span v-for="(href, network) in socialNetworks" :key="network">
                 <SocialNetworkLink
                   :network="network"
-                  class="p-1 hover:text-primary-bold"
+                  class="hover:text-primary-bold p-1"
                 />
               </span>
             </div>
           </MenuItem>
           <MenuItem v-if="isLogged" as="li">
-            <button @click="logout" class="p-2 text-right text-base-800">
+            <button @click="logout" class="text-base-800 p-2 text-right">
               <span class="text-base-600">{{ $t.i19logout }}</span>
-              <i class="i-logout-circle-r-line text-lg ml-1"></i>
+              <i class="i-logout-circle-r-line ml-1 text-lg"></i>
             </button>
           </MenuItem>
         </ul>

package/ecomplus-stores/monocard/functions/ssr/src/components/AccountPage.vue

@@ -0,0 +1,62 @@
+<template>
+  <article class="from-secondary-700 to-secondary-950 flex
+    min-h-screen w-full flex-col justify-center bg-gradient-to-br">
+    <div class="mx-auto p-4">
+      <section class="ui-section text-center">
+        <a href="/" class="text-base-200 hover:text-white">
+          <i class="i-arrow-right mr-1 rotate-180"></i>
+          {{ $t.i19goToStore }}
+        </a>
+      </section>
+      <section class="overflow-hidden rounded-md
+        shadow-md ring-4 ring-black/10">
+        <LoginForm v-bind="{ loginLinkActionUrl }">
+          <template #head>
+            <div class="mb-5 text-center">
+              <a href="/" class="inline-block">
+                <slot name="logo" />
+              </a>
+            </div>
+          </template>
+        </LoginForm>
+      </section>
+      <nav v-if="$settings.serviceLinks?.length" class="ui-section px-0">
+        <ul class="mx-auto flex max-w-sm flex-wrap items-center
+          justify-evenly gap-4 px-3">
+          <li
+            v-for="({ title, href }, i) in $settings.serviceLinks"
+            :key="`s-${i}`"
+          >
+            <ALink :href="href" class="ui-link text-base-200 hover:text-white">
+              {{ title }}
+            </ALink>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { isLogged } from '@@sf/state/customer-session';
+import LoginForm from '~/components/LoginForm.vue';
+
+let loginLinkActionUrl: string | null = null;
+if (!import.meta.env.SSR) {
+  const { location } = window;
+  const returnUrl = new URLSearchParams(location.search).get('return_url');
+  if (!returnUrl) {
+    const url = new URL(location.toString());
+    url.pathname = '/app/';
+    url.hash = `#${location.pathname.replace('/app/', '/')}`;
+    loginLinkActionUrl = url.toString();
+  }
+  watch(isLogged, () => {
+    if (isLogged.value) {
+      location.href = (returnUrl || loginLinkActionUrl) as string;
+    }
+  }, {
+    immediate: true,
+  });
+}
+</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/Banner.vue

@@ -14,7 +14,7 @@
     </ALink>
     <div
       v-if="hasHeader"
-      class="p-12 xl:ps-32 mb-3 sm:mb-0"
+      class="mb-3 p-12 sm:mb-0 xl:ps-32"
     >
       <Component
         v-if="parsedTitle"
@@ -23,13 +23,13 @@
       >
         {{ parsedTitle }}
       </Component>
-      <p v-if="parsedSubtitle" class="text-lg mt-4 md:mt-6">
+      <p v-if="parsedSubtitle" class="mt-4 text-lg md:mt-6">
         {{ parsedSubtitle }}
       </p>
       <ALink
         v-if="parsedButtonText"
         :href="buttonLink"
-        class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+        class="ui-btn-lg ui-btn-contrast mt-7 min-w-[150px] md:mt-10"
       >
         {{ parsedButtonText }}
       </ALink>