cloudcommerce 0.0.124 → 0.0.126

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.124",
+  "version": "0.0.126",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -25,33 +25,30 @@
     "prepare-monorepo": "sh scripts/prepare-monorepo.sh"
   },
   "dependencies": {
-    "@astrojs/image": "^0.10.0",
-    "@astrojs/node": "^1.1.0",
+    "@astrojs/image": "^0.11.0",
+    "@astrojs/node": "^2.0.2",
     "@astrojs/partytown": "^1.0.1",
-    "@astrojs/prefetch": "^0.0.8",
-    "@astrojs/vue": "^1.1.0",
+    "@astrojs/prefetch": "^0.1.0",
+    "@astrojs/vue": "^1.2.1",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "^1.4.1",
-    "@iconify-json/bxl": "^1.1.4",
+    "@iconify-json/fa6-brands": "^1.1.6",
     "@iconify-json/heroicons": "^1.1.5",
-    "@iconify-json/logos": "^1.1.17",
-    "@nanostores/vue": "^0.6.0",
-    "@unocss/preset-icons": "^0.45.29",
-    "astro": "^1.5.0",
+    "@iconify-json/logos": "^1.1.18",
+    "@unocss/preset-icons": "^0.46.2",
+    "astro": "^1.6.2",
     "color": "^4.2.3",
     "dotenv": "^16.0.3",
-    "firebase": "^9.12.1",
+    "firebase": "^9.13.0",
     "image-size": "^1.0.2",
-    "nanostores": "^0.7.0",
-    "rollup": "^2.79.1",
-    "unocss": "^0.45.29",
-    "vite": "^3.1.8",
+    "unocss": "^0.46.2",
+    "vite": "^3.2.2",
     "vite-plugin-pwa": "^0.13.1",
     "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3"
+    "@babel/core": "^7.19.6"
   }
 }

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

@@ -38,7 +38,7 @@
   --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
-@media (min-width: 576px) {
+@media (min-width: 640px) {
   :root {
     --font-size: 16.5px;
   }
@@ -48,18 +48,18 @@
     --font-size: 17px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   :root {
     --font-size: 17.65px;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
   :root {
     --font-size: 18.5px;
   }
 }
 
-@media (min-width: 576px) {
+@media (min-width: 640px) {
   body > header,
 body > main,
 body > footer,
@@ -75,7 +75,7 @@ section {
     --block-spacing-vertical: calc(var(--spacing) * 3);
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   body > header,
 body > main,
 body > footer,
@@ -83,7 +83,7 @@ section {
     --block-spacing-vertical: calc(var(--spacing) * 3.5);
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
   body > header,
 body > main,
 body > footer,
@@ -92,7 +92,7 @@ section {
   }
 }
 
-@media (min-width: 576px) {
+@media (min-width: 640px) {
   article {
     --block-spacing-horizontal: calc(var(--spacing) * 1.25);
   }
@@ -102,12 +102,12 @@ section {
     --block-spacing-horizontal: calc(var(--spacing) * 1.5);
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   article {
     --block-spacing-horizontal: calc(var(--spacing) * 1.75);
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
   article {
     --block-spacing-horizontal: calc(var(--spacing) * 2);
   }
@@ -117,7 +117,7 @@ dialog > article {
   --block-spacing-vertical: calc(var(--spacing) * 2);
   --block-spacing-horizontal: var(--spacing);
 }
-@media (min-width: 576px) {
+@media (min-width: 640px) {
   dialog > article {
     --block-spacing-vertical: calc(var(--spacing) * 2.5);
     --block-spacing-horizontal: calc(var(--spacing) * 1.25);
@@ -737,6 +737,7 @@ button,
 [type=button],
 [type=reset],
 [type=submit] {
+  appearance: button;
   -webkit-appearance: button;
 }
 
@@ -879,15 +880,17 @@ textarea {
 }
 
 [type=search] {
+  appearance: textfield;
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
 
 [type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 ::-webkit-file-upload-button {
+  appearance: button;
   -webkit-appearance: button;
   font: inherit;
 }
@@ -942,8 +945,6 @@ textarea {
 :where(input):not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
 textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
 }
@@ -1081,8 +1082,6 @@ label > :where(input, select, textarea) {
  */
 [type=checkbox],
 [type=radio] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   width: 1.25em;
   height: 1.25em;
@@ -1333,8 +1332,6 @@ label > :where(input, select, textarea) {
 }
 
 [type=range] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   width: 100%;
   height: 1.25rem;
@@ -1365,7 +1362,7 @@ label > :where(input, select, textarea) {
   transition: background-color var(--transition), box-shadow var(--transition);
 }
 [type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
+  appearance: none;
   width: 1.25rem;
   height: 1.25rem;
   margin-top: -0.5rem;
@@ -1377,7 +1374,7 @@ label > :where(input, select, textarea) {
   transition: background-color var(--transition), transform var(--transition);
 }
 [type=range]::-moz-range-thumb {
-  -webkit-appearance: none;
+  appearance: none;
   width: 1.25rem;
   height: 1.25rem;
   margin-top: -0.5rem;
@@ -1389,7 +1386,7 @@ label > :where(input, select, textarea) {
   transition: background-color var(--transition), transform var(--transition);
 }
 [type=range]::-ms-thumb {
-  -webkit-appearance: none;
+  appearance: none;
   width: 1.25rem;
   height: 1.25rem;
   margin-top: -0.5rem;
@@ -1430,7 +1427,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
 }
 
 [type=search]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
+  appearance: none;
   display: none;
 }
 
@@ -1698,7 +1695,7 @@ dialog article {
   max-height: calc(100vh - var(--spacing) * 2);
   overflow: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 640px) {
   dialog article {
     max-width: 510px;
   }
@@ -1857,8 +1854,6 @@ progress {
 }
 
 progress {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   display: inline-block;
   appearance: none;
   width: 100%;

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, watch } from 'vue';
-import { useStore } from '@nanostores/vue';
+import { ref, watch } from 'vue';
 import {
   i19accessMyAccount,
   i19createAnAccount,
@@ -18,14 +17,13 @@ import {
   signInWithEmailAndPassword,
 } from 'firebase/auth';
 import {
-  customerName as $customerName,
-  customerEmail,
-  setCustomerEmail,
+  customerName,
+  customerEmail as email,
   isLogged,
 } from '@@storefront/state/customer-session';
 
 const emit = defineEmits(['login', 'logout']);
-watch(useStore(isLogged), (_isLogged) => {
+watch(isLogged, (_isLogged) => {
   emit(_isLogged ? 'login' : 'logout');
 }, {
   immediate: true,
@@ -37,12 +35,6 @@ watch(isSignUp, (_isSignUp) => {
     isLinkSignIn.value = true;
   }
 });
-const email = computed({
-  get() {
-    return useStore(customerEmail).value;
-  },
-  set: setCustomerEmail,
-});
 const password = ref('');
 const submitLogin = async () => {
   const firebaseAuth = getAuth();
@@ -63,7 +55,6 @@ const submitLogin = async () => {
     console.error(error);
   }
 };
-const customerName = useStore($customerName);
 </script>
 
 <template>

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

@@ -1,6 +1,5 @@
 import { resolve as resolvePath } from 'path';
 import imageSize from 'image-size';
-// eslint-disable-next-line import/no-unresolved
 import { getImage as _getImage } from '@astrojs/image';
 
 const tryImageSize = (src: string) => {

package/packages/storefront/src/lib/state/customer-session.ts

@@ -1,7 +1,7 @@
 import type { Customers } from '@cloudcommerce/api/types';
 import api from '@cloudcommerce/api';
 import { nickname as getNickname } from '@ecomplus/utils';
-import { map, computed, onSet } from 'nanostores';
+import { computed } from 'vue';
 import {
   getAuth,
   onAuthStateChanged,
@@ -9,8 +9,10 @@ import {
   signInWithEmailLink,
   // updateProfile,
 } from 'firebase/auth';
-import '@@storefront/scripts/firebase-app';
+import useStorage from './use-storage';
+import '../scripts/firebase-app';
 
+const storageKey = 'SESSION';
 const emptySession = {
   customer: {
     display_name: '',
@@ -18,37 +20,28 @@ const emptySession = {
   },
   auth: null,
 };
-const session = map<{
+const session = useStorage<{
   customer: Partial<Customers>,
   auth: null | {
     access_token: string,
     expires: string,
     customer_id: string,
   },
-}>(emptySession);
-const storageKey = 'SESSION';
-const sessionJson = localStorage.getItem(storageKey);
-if (sessionJson) {
-  try {
-    session.set(JSON.parse(sessionJson));
-  } catch (e) {
-    localStorage.removeItem(storageKey);
-  }
-}
-onSet(session, () => {
-  localStorage.setItem(storageKey, JSON.stringify(session.get()));
-});
+}>(storageKey, emptySession);
 
-const isAuthenticated = computed(session, ({ auth }) => {
+const isAuthenticated = computed(() => {
+  const { auth } = session;
   return auth && new Date(auth.expires).getTime() - Date.now() > 1000 * 10;
 });
-const customer = computed(session, (_session) => _session.customer);
-const customerName = computed(customer, (_customer) => getNickname(_customer) as string);
-const customerEmail = computed(customer, (_customer) => _customer.main_email);
-
-const setCustomerEmail = (email: string) => session.setKey('customer', {
-  ...customer.get(),
-  main_email: email,
+const customer = computed(() => session.customer);
+const customerName = computed(() => getNickname(customer.value) as string);
+const customerEmail = computed({
+  get() {
+    return customer.value.main_email;
+  },
+  set(email) {
+    session.customer.main_email = email;
+  },
 });
 
 const firebaseAuth = getAuth();
@@ -61,11 +54,12 @@ if (isSignInWithEmailLink(firebaseAuth, window.location.href)) {
   }
 }
 
-const isLogged = computed(isAuthenticated, (_isAuthenticated) => {
-  return _isAuthenticated || !!firebaseAuth.currentUser;
+const isLogged = computed(() => {
+  return isAuthenticated.value || !!firebaseAuth.currentUser;
 });
 const logout = () => {
-  session.set(emptySession);
+  session.auth = emptySession.auth;
+  session.customer = emptySession.customer;
   localStorage.removeItem(storageKey);
   firebaseAuth.signOut();
 };
@@ -81,36 +75,35 @@ const authenticate = async () => {
         Authorization: `Bearer ${authToken}`,
       },
     });
-    session.setKey('auth', await resAuth.json());
+    session.auth = await resAuth.json();
   } catch (err) {
     console.error(err);
   }
 };
 
 const getAccessToken = async () => {
-  if (!isAuthenticated.get()) {
+  if (!isAuthenticated.value) {
     await authenticate();
   }
-  return session.get().auth.access_token;
+  return session.auth.access_token;
 };
 
 const fetchCustomer = async () => {
   const accessToken = await getAccessToken();
-  const { auth } = session.get();
-  const { data } = await api.get(`customers/${auth.customer_id}`, {
+  const { data } = await api.get(`customers/${session.auth.customer_id}`, {
     accessToken,
   });
-  session.setKey('customer', data);
+  session.customer = data;
   return data;
 };
 
 onAuthStateChanged(firebaseAuth, async (user) => {
   if (user) {
     if (user.emailVerified) {
-      const isEmailChanged = user.email !== customerEmail.get();
-      if (isEmailChanged || !isAuthenticated.get()) {
+      const isEmailChanged = user.email !== customerEmail.value;
+      if (isEmailChanged || !isAuthenticated.value) {
         await authenticate();
-        if (isEmailChanged || !customerName.get()) {
+        if (isEmailChanged || !customerName.value) {
           await fetchCustomer();
         }
       }
@@ -128,7 +121,6 @@ export {
   customer,
   customerName,
   customerEmail,
-  setCustomerEmail,
   isLogged,
   logout,
   authenticate,

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

@@ -0,0 +1,89 @@
+import type { Carts } 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];
+
+const checkItems = (item: CartItem, newItem: CartItem) => {
+  if (!item.flags && !newItem.flags) {
+    return true;
+  }
+  if (
+    !item.flags
+    || !newItem.flags
+    || item.flags.length !== newItem.flags.length
+  ) {
+    return false;
+  }
+  return item.flags.every((flag) => newItem.flags.includes(flag));
+};
+
+export default ({ data, save }, emitter, [newItem, canSave = true]) => {
+  if (
+    typeof newItem.product_id !== 'string' ||
+    typeof newItem.quantity !== 'number' || !(newItem.quantity >= 0) ||
+    typeof newItem.price !== 'number' || !(newItem.price >= 0)
+  ) {
+    return null
+  }
+
+  let fixedItem
+  if (!newItem.kit_product) {
+    for (let i = 0; i < data.items.length; i++) {
+      const item = data.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.quantity += newItem.quantity
+        if (newItem.price) {
+          item.price = newItem.price
+        }
+        if (newItem.final_price) {
+          item.final_price = newItem.final_price
+        }
+        fixedItem = fixItemQuantity(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)
+  }
+  fixSubtotal(data)
+
+  /**
+   * @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 })
+
+  if (canSave) {
+    save(false)
+  }
+  return fixedItem
+}

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

@@ -0,0 +1,52 @@
+import type { CartSet } from '@cloudcommerce/api/types';
+import { computed } from 'vue';
+import useStorage from './use-storage';
+
+const storageKey = 'SHOPPING_CART';
+const emptyCart = {
+  items: [],
+};
+const cart = useStorage<CartSet>(storageKey, emptyCart);
+
+const cartItems = computed(() => {
+  return cart.items.map((item) => {
+    item.final_price = item.kit_product?.price && item.kit_product.pack_quantity
+      ? item.kit_product.price / item.kit_product.pack_quantity
+      : item.price;
+    if (Array.isArray(item.customizations)) {
+      item.customizations.forEach((customization) => {
+        if (customization.add_to_price) {
+          const { type, addition } = customization.add_to_price;
+          item.final_price += type === 'fixed'
+            ? addition
+            : item.price * (addition / 100);
+        }
+      });
+    }
+    return item;
+  });
+});
+const subtotal = computed(() => {
+  return cartItems.value.reduce((acc, item) => {
+    return acc + (item.quantity * item.final_price);
+  }, 0);
+});
+const shoppingCart = computed({
+  get() {
+    return {
+      ...cart,
+      subtotal: subtotal.value,
+    };
+  },
+  set(newCart) {
+    Object.assign(cart, newCart, {
+      subtotal: subtotal.value,
+    });
+  },
+});
+
+export default shoppingCart;
+
+export {
+  shoppingCart,
+};

package/packages/storefront/src/lib/state/use-storage.ts

@@ -0,0 +1,19 @@
+import { reactive, watch } from 'vue';
+
+export default <T extends {}>(key: string, initialValue: T, storage = localStorage) => {
+  let persistedValue: T | undefined | null;
+  const sessionJson = storage.getItem(key);
+  if (sessionJson) {
+    try {
+      persistedValue = JSON.parse(sessionJson);
+    } catch (e) {
+      persistedValue = null;
+      storage.removeItem(key);
+    }
+  }
+  const state = reactive<T>(persistedValue || initialValue);
+  watch(state, () => {
+    storage.setItem(key, JSON.stringify(state));
+  });
+  return state;
+};

package/packages/storefront/tailwind.config.cjs

@@ -1,6 +1,6 @@
 // IntelliSense for UnoCSS icons
 const defaultIcons = {
-  brandIcons: 'bxl',
+  brandIcons: 'fa6-brands',
   brandIconsShortcuts: [
     'facebook',
     'twitter',
@@ -13,6 +13,7 @@ const defaultIcons = {
     'telegram',
     'whatsapp',
     'messenger',
+    'pix',
   ],
   brandLogos: 'logos',
   brandLogosShortcuts: [
@@ -74,6 +75,10 @@ const genTailwindConfig = ({
   plugins: [
     ({ addUtilities }) => {
       addUtilities({
+        // To clear HTML element (0, 0, x) specificity styles from PicoCSS
+        '.unset': {
+          all: 'unset',
+        },
         // https://picocss.com/docs/containers.html
         '.container-fluid': {
           'max-width': 'var(--content-max-width)',

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "0.0.124",
+  "version": "0.0.126",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {

package/packages/storefront/dist/client/HeaderButtons.75084c8f.js

@@ -1 +0,0 @@
-import{_ as i}from"./chunks/HeaderButtons.d1f8a21f.js";import"./chunks/preload-helper.f15ab524.js";import"./chunks/runtime-dom.esm-bundler.9119f0ff.js";/* empty css                              */export{i as default};