cloudcommerce 0.0.126 → 0.0.128

package/packages/storefront/src/lib/assets/preflight.css

@@ -0,0 +1,362 @@
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: var(--c-border); /* 2 */
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: var(--font-family); /* 4 */
+  font-feature-settings: normal; /* 5 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--font-mono); /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: var(--c-text-muted); /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}

package/packages/storefront/src/lib/assets/typography.css

@@ -0,0 +1,15 @@
+.prose :is(a, [role=link]) {
+  color: var(--c-link);
+  text-decoration: underline;
+  transition: color var(--transition), text-decoration var(--transition);
+}
+.prose a:hover {
+  color: var(--c-link-hover);
+}
+.prose a:visited,
+.prose a:active {
+  color: var(--c-link-visited);
+}
+.prose a:active {
+  text-decoration: none;
+}

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

@@ -62,13 +62,13 @@ const transition3dTx = computed(() => {
     <Transition>
       <dialog
         v-if="modelValue"
-        class="offcanvas p-0"
+        class="drawer p-0"
         :class="placement === 'end' ? 'justify-end' : 'justify-start'"
         :open="modelValue"
       >
         <article
           ref="article"
-          class="rounded-none h-full max-h-screen m-0"
+          class="card rounded-none h-full max-h-screen m-0"
         >
           <a
             href="#close"
@@ -85,26 +85,26 @@ const transition3dTx = computed(() => {
 </template>
 
 <style>
-.offcanvas.v-enter-active,
-.offcanvas.v-leave-active {
+.drawer.v-enter-active,
+.drawer.v-leave-active {
   transition: opacity 0.15s linear;
 }
-.offcanvas.v-enter-from,
-.offcanvas.v-leave-to {
+.drawer.v-enter-from,
+.drawer.v-leave-to {
   opacity: 0;
 }
-.offcanvas.v-enter-active article,
-.offcanvas.v-leave-active article {
+.drawer.v-enter-active article,
+.drawer.v-leave-active article {
   transition: transform 0.25s ease-in-out;
 }
-.offcanvas.v-enter-from article,
-.offcanvas.v-leave-to article {
+.drawer.v-enter-from article,
+.drawer.v-leave-to article {
   transform: translate3d(var(--transition-3d-tx), 0, 0);
 }
 </style>
 
 <style scoped>
-.offcanvas {
+.drawer {
   --transition-3d-tx: v-bind(transition3dTx);
 }
 </style>

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

@@ -31,7 +31,7 @@ const isLogged = ref(false);
 </script>
 
 <template>
-  <div class="login-offcanvas">
+  <div class="login-drawer">
     <div @click="toggle">
       <slot name="toggle" v-bind="{ isVisible }" />
     </div>

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

@@ -1,6 +1,7 @@
 ---
 import type { PageContext } from '@@storefront/ssr-context';
-import '@@storefront/assets/pico.css';
+import '@@storefront/assets/preflight.css';
+import '@@storefront/assets/base.css';
 import 'uno.css';
 
 export interface Props {

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

@@ -1,7 +1,8 @@
 ---
 import type CmsSocial from '@@storefront/types/cms-social';
+import { img as getImg } from '@ecomplus/utils';
 import type { PageContext } from '@@storefront/ssr-context';
-import ecomUtils from '@ecomplus/utils';
+import { getImage as transformImage } from '@@storefront/ssr/image';
 
 export interface Props {
   pageContext: PageContext;
@@ -21,12 +22,21 @@ const {
 const state = apiDoc || cmsContent || {};
 const title = state.meta_title || state.name || state.title || Astro.props.title || settings.name;
 const description = state.meta_description || state.short_description || settings.description;
+const favicon = settings.icon
+  ? (await transformImage({
+      src: settings.icon,
+      width: 32,
+      height: 32,
+      format: 'png',
+      isLowResolution: true,
+    })).src
+  : '/favicon.ico';
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site || `https://${domain}`);
 const cmsSocial = cms('social') as CmsSocial;
 const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
 let ogImage: string | undefined;
 if (apiDoc) {
-  const picture = ecomUtils.img(state, null, 'zoom');
+  const picture = getImg(state, null, 'zoom');
   ogImage = picture && picture.url;
 }
 if (!ogImage) {
@@ -42,7 +52,7 @@ if (!ogImage) {
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content={primaryColor}>
-<link rel="icon" href={settings.favicon || '/favicon.ico'} />
+<link rel="icon" href={favicon} />
 {import.meta.env.PROD && <link rel="manifest" href="/manifest.webmanifest" />}
 <title>{title}</title>
 <meta name="description" content={description}>

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

@@ -1,6 +1,6 @@
 ---
 import type { PageContext } from '@@storefront/ssr-context';
-import ecomUtils from '@ecomplus/utils';
+import { price as getPrice } from '@ecomplus/utils';
 
 export interface Props {
   pageContext: PageContext;
@@ -26,19 +26,10 @@ window.ECOM_LANG = '${lang}';
 window.ECOM_CURRENCY = '${currency}';
 window.ECOM_CURRENCY_SYMBOL = '${currencySymbol}';
 window.ECOM_COUNTRY_CODE = '${countryCode}';
-window.storefront = ${JSON.stringify({
-  settings: {
-    ...settings,
-    store_id: storeId,
-    lang,
-    country_code: countryCode,
-    currency,
-    currency_symbol: currencySymbol,
-  },
-})};`;
+window.storefront = ${JSON.stringify({ settings })};`;
 if (apiDoc) {
   if (typeof apiDoc.price === 'number') {
-    apiDoc.price = ecomUtils.price(apiDoc);
+    apiDoc.price = getPrice(apiDoc);
   }
   const slimDocRegex = globalThis.storefront_slim_doc_regex
     || /body|meta|records|description|i18n/;

package/packages/storefront/src/lib/ssr/image.ts

@@ -15,11 +15,17 @@ const tryImageSize = (src: string) => {
   return dimensions;
 };
 
-const getImage = async (options: Parameters<typeof _getImage>[0]) => {
-  if (options.width) {
-    options.width *= 2;
-  } else if (options.height) {
-    options.height *= 2;
+type TransformOptions = Parameters<typeof _getImage>[0] & {
+  isLowResolution?: boolean,
+};
+const getImage = async (options: TransformOptions) => {
+  if (!options.isLowResolution) {
+    if (options.width) {
+      options.width *= 2;
+    }
+    if (options.height) {
+      options.height *= 2;
+    }
   }
   if (
     typeof options.src === 'string'

package/packages/storefront/src/lib/ssr-context.ts

@@ -37,7 +37,7 @@ const setResponseCache = (Astro: AstroGlobal, maxAge: number, sMaxAge?: number)
   const headerName = import.meta.env.PROD ? 'Cache-Control' : 'X-Cache-Control';
   let cacheControl = `public, max-age=${maxAge}, must-revalidate`;
   if (sMaxAge) {
-    cacheControl += `, s-maxage=${sMaxAge}, stale-while-revalidate=${(sMaxAge * 300)}`;
+    cacheControl += `, s-maxage=${sMaxAge}, stale-while-revalidate=604800`;
   }
   Astro.response.headers.set(headerName, cacheControl);
 };
@@ -113,9 +113,9 @@ const loadPageContext = async (Astro: AstroGlobal, {
   if (urlPath === '/fallback') {
     setResponseCache(Astro, 3600, 86400);
   } else if (urlPath === '/') {
-    setResponseCache(Astro, 180, 900);
+    setResponseCache(Astro, 180, 300);
   } else {
-    setResponseCache(Astro, 120, 600);
+    setResponseCache(Astro, 120, 300);
   }
   return {
     ...config,

package/packages/storefront/src/lib/state/shopping-cart/add-cart-item.ts

@@ -1,12 +1,9 @@
-import type { Carts } from '@cloudcommerce/api/types';
+import type { CartSet } from '@cloudcommerce/api/types';
 import { randomObjectId } from '@ecomplus/utils';
-import fixItemQuantity from './../lib/fix-item-quantity'
-import fixItemFinalPrice from './../lib/fix-item-final-price'
-import fixSubtotal from './../lib/fix-subtotal'
 
-type CartItem = Carts['items'][0];
+type CartItem = CartSet['items'][0];
 
-const checkItems = (item: CartItem, newItem: CartItem) => {
+const matchItemsFlags = (item: CartItem, newItem: CartItem) => {
   if (!item.flags && !newItem.flags) {
     return true;
   }
@@ -20,70 +17,53 @@ const checkItems = (item: CartItem, newItem: CartItem) => {
   return item.flags.every((flag) => newItem.flags.includes(flag));
 };
 
-export default ({ data, save }, emitter, [newItem, canSave = true]) => {
+const addCartItem = (cart: CartSet, newItem: CartItem): null | CartItem => {
   if (
-    typeof newItem.product_id !== 'string' ||
-    typeof newItem.quantity !== 'number' || !(newItem.quantity >= 0) ||
-    typeof newItem.price !== 'number' || !(newItem.price >= 0)
+    typeof newItem.product_id !== 'string'
+    || typeof newItem.quantity !== 'number' || !(newItem.quantity >= 0)
+    || typeof newItem.price !== 'number' || !(newItem.price >= 0)
   ) {
-    return null
+    return null;
   }
-
-  let fixedItem
+  const { items } = cart;
   if (!newItem.kit_product) {
-    for (let i = 0; i < data.items.length; i++) {
-      const item = data.items[i]
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
       if (
-        !item.kit_product &&
-        !item.keep_item_quantity &&
-        item.product_id === newItem.product_id &&
-        item.variation_id === newItem.variation_id &&
-        (!item.customizations || !item.customizations.length) &&
-        checkFlags(item, newItem)
+        !item.kit_product
+        && item.product_id === newItem.product_id
+        && item.variation_id === newItem.variation_id
+        && (!item.customizations || !item.customizations.length)
+        && matchItemsFlags(item, newItem)
       ) {
-        item.quantity += newItem.quantity
+        item.quantity += newItem.quantity;
         if (newItem.price) {
-          item.price = newItem.price
+          item.price = newItem.price;
         }
         if (newItem.final_price) {
-          item.final_price = newItem.final_price
+          item.final_price = newItem.final_price;
         }
-        fixedItem = fixItemQuantity(item)
+        return item;
       }
     }
   }
-
-  if (!fixedItem) {
-    const itemCopy = Object.assign({}, newItem)
-    if (
-      !newItem._id ||
-      newItem._id === newItem.variation_id ||
-      data.items.find(({ _id }) => _id === newItem._id)
-    ) {
-      itemCopy._id = randomObjectId()
-    }
-    if (newItem.customizations) {
-      newItem.customizations.forEach((customization, i) => {
-        itemCopy.customizations[i] = Object.assign({}, customization)
-      })
-    }
-    data.items.push(itemCopy)
-    fixedItem = fixItemQuantity(itemCopy)
-    fixItemFinalPrice(fixedItem)
+  const itemCopy = { ...newItem };
+  if (
+    !newItem._id
+    || newItem._id === newItem.variation_id
+    || items.find(({ _id }) => _id === newItem._id)
+  ) {
+    itemCopy._id = randomObjectId();
+  }
+  if (newItem.customizations) {
+    newItem.customizations.forEach((customization, i) => {
+      itemCopy.customizations[i] = { ...customization };
+    });
   }
-  fixSubtotal(data)
+  items.push(itemCopy);
+  return itemCopy;
+};
 
-  /**
-   * @event EcomCart#addItem
-   * @type {object}
-   * @property {object} data - Shopping cart data
-   * @property {object} item - Item added to cart
-   * @example ecomCart.on('addItem', ({ data, item }) => { console.log(data, item) })
-   */
-  emitter.emit('addItem', { data, item: fixedItem })
+export default addCartItem;
 
-  if (canSave) {
-    save(false)
-  }
-  return fixedItem
-}
+export { matchItemsFlags, addCartItem };