cloudcommerce 0.28.0 → 0.28.2

package/packages/ssr/src/cloudflare/swr-worker.ts

@@ -88,7 +88,8 @@ export type Env = Record<`OVERRIDE_${string}`, string | undefined> & {
   PERMA_CACHE: KVNamespace | undefined;
 };
 
-const swr = async (_request: Request, env: Env, ctx: ExecutionContext) => {
+const swr = async (_rewritedReq: Request, env: Env, ctx: ExecutionContext) => {
+  const _request = new Request(_rewritedReq.url.replace('/__swr/', '/'), _rewritedReq);
   const url = new URL(_request.url);
   const { hostname, pathname } = url;
   const hostOverride = env[`OVERRIDE_${hostname}`];

package/packages/ssr/src/firebase/serve-storefront.ts

@@ -226,7 +226,7 @@ export default async (req: Request, res: Response) => {
     /* eslint-disable prefer-rest-params */
     // @ts-ignore
     res.writeHead = function writeHead(status: number, headers: OutgoingHttpHeaders) {
-      if (status === 200 && headers && cssFilepath) {
+      if (status === 200 && headers && cssFilepath && !headers.link) {
         // https://community.cloudflare.com/t/early-hints-need-more-data-before-switching-over/342888/21
         headers.Link = `<${cssFilepath}>; rel=preload; as=style`;
       }

package/packages/storefront/astro.config.mjs

@@ -36,9 +36,9 @@ const getIconUrl = (size) => {
 const _vitePWAOptions = {
   manifest: {
     name: settings.name || 'My Shop',
-    short_name: settings.short_name || settings.name || 'MyShop',
+    short_name: settings.shortName || settings.name || 'MyShop',
     description: settings.description || 'My PWA Shop',
-    background_color: settings.bg_color || '#f5f6fa',
+    background_color: settings.bgColor || '#f5f6fa',
     theme_color: primaryColor,
     crossorigin: 'use-credentials',
     icons: [{
@@ -165,6 +165,7 @@ viteAlias.push(
 
 const genAstroConfig = ({
   site = `https://${domain}`,
+  isPWA = false,
   vitePWAOptions = _vitePWAOptions,
 } = {}) => {
   const integrations = [
@@ -180,7 +181,6 @@ const genAstroConfig = ({
       injectReset: false,
       injectEntry: false,
     }),
-    AstroPWA(vitePWAOptions),
     AutoImport({
       include: [
         /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
@@ -203,6 +203,14 @@ const genAstroConfig = ({
       },
     },
   ];
+  if (isPWA && !isSSG) {
+    integrations.push(AstroPWA(vitePWAOptions));
+  } else {
+    viteAlias.push({
+      find: 'virtual:pwa-info',
+      replacement: joinPath(__dirname, 'config/astro/mock-pwa-info.mjs'),
+    });
+  }
   if (!isToServerless) {
     integrations.push(image({
       serviceEntryPoint: '@astrojs/image/sharp',
@@ -221,7 +229,9 @@ const genAstroConfig = ({
     site,
     compressHTML: isToServerless,
     build: {
+      assetsPrefix: !isSSG ? settings.assetsPrefix : undefined,
       inlineStylesheets: 'never',
+      ...settings.build,
     },
     vite: {
       plugins: [

package/packages/storefront/config/astro/mock-pwa-info.mjs

@@ -0,0 +1,3 @@
+/* eslint-disable */
+
+export const pwaInfo = false;

package/packages/storefront/config/storefront.config.mjs

@@ -50,6 +50,10 @@ export default () => {
     currencySymbol,
   } = config.get();
 
+  if (!settings.assetsPrefix && storeId === 1011 && domain === 'demo.ecomplus.app') {
+    settings.assetsPrefix = 'https://s2-demo.b-cdn.net';
+  }
+
   return {
     storeId,
     lang,

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -42,7 +42,7 @@
     "@iconify-json/heroicons": "^1.1.12",
     "@iconify-json/logos": "^1.1.37",
     "@vite-pwa/astro": "^0.1.3",
-    "@vueuse/core": "10.4.1",
+    "@vueuse/core": "10.5.0",
     "astro": "2.10.15",
     "astro-capo": "^0.0.1",
     "chroma-js": "^2.4.2",
@@ -53,9 +53,9 @@
     "semver": "^7.5.4",
     "sharp": "^0.32.6",
     "tailwindcss": "^3.3.3",
-    "unocss": "^0.56.4",
+    "unocss": "^0.56.5",
     "unplugin-auto-import": "^0.16.6",
-    "vite": "^4.4.9",
+    "vite": "^4.4.11",
     "vite-plugin-pwa": "^0.16.5",
     "vue": "^3.3.4"
   },

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

@@ -16,6 +16,7 @@
   top: 102%;
   margin-top: 5px;
   font-size: clamp(0.75rem, 90%, 1rem);
+  font-weight: 400;
   width: max-content;
   background-color: var(--background-color);
   color: var(--color);

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

@@ -9,7 +9,7 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  accountUrl: globalThis.$storefront.settings.account_url || '/app/account',
+  accountUrl: globalThis.$storefront.settings.accountUrl || '/app/account',
   returnUrl: globalThis.location?.href,
 });
 const href = computed(() => {
@@ -23,11 +23,11 @@ const href = computed(() => {
     return `${url}return_url=${props.returnUrl}`;
   }
   const { settings } = globalThis.$storefront;
-  if (props.to === 'orders' && settings.orders_url) {
-    return settings.orders_url;
+  if (props.to === 'orders' && settings.ordersUrl) {
+    return settings.ordersUrl;
   }
-  if (props.to === 'favorites' && settings.favorites_url) {
-    return settings.favorites_url;
+  if (props.to === 'favorites' && settings.favoritesUrl) {
+    return settings.favoritesUrl;
   }
   return `${url}/${props.to}`;
 });

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

@@ -1,20 +1,51 @@
 <script setup lang="ts">
+import type { CartItem } from '@@sf/composables/use-cart-item';
 import { computed } from 'vue';
 
 export interface Props {
   to?: 'cart' | 'checkout';
   cartUrl?: string;
   checkoutUrl?: string;
+  cartId?: CartItem['_id'];
+  cartItem?: Partial<CartItem> & { product_id: CartItem['product_id'] };
 }
 
 const props = withDefaults(defineProps<Props>(), {
   to: 'cart',
-  cartUrl: globalThis.$storefront.settings.cart_url || '/app/#/cart',
-  checkoutUrl: globalThis.$storefront.settings.checkout_url || '/app/#/checkout',
+  cartUrl: globalThis.$storefront.settings.cartUrl || '/app/#/cart',
+  checkoutUrl: globalThis.$storefront.settings.checkoutUrl || '/app/#/checkout',
 });
 const href = computed(() => {
-  if (props.to === 'cart') return props.cartUrl;
-  return props.checkoutUrl;
+  let url = (props.to === 'cart') ? props.cartUrl : props.checkoutUrl;
+  if (props.cartId) {
+    url += `/${props.cartId}`;
+  } else if (props.cartItem) {
+    const params: Record<string, string> = {
+      product_id: props.cartItem.product_id,
+    };
+    const {
+      variation_id: variationId,
+      quantity,
+      sku,
+      customizations,
+    } = props.cartItem;
+    if (variationId) params.variation_id = variationId;
+    if (quantity) params.quantity = String(quantity);
+    if (sku) params.sku = sku;
+    if (customizations) {
+      customizations.forEach(({ label, option, attachment }, i) => {
+        const prefix = `customizations.${i}.`;
+        if (label) params[prefix + 'label'] = label;
+        if (option) {
+          if (option._id) params[prefix + 'option._id'] = option._id;
+          params[prefix + 'option.text'] = option.text;
+        }
+        if (attachment) params[prefix + 'attachment'] = attachment;
+      });
+    }
+    url += '?' + new URLSearchParams(params).toString();
+  }
+  return url;
 });
 </script>
 

package/packages/storefront/src/lib/composables/use-sku-selector.ts

@@ -0,0 +1,151 @@
+import type {
+  ResourceId,
+  Products,
+  GridsList,
+} from '@cloudcommerce/api/types';
+import {
+  ref,
+  computed,
+  reactive,
+  shallowReactive,
+  watch,
+  toRef,
+} from 'vue';
+import api from '@cloudcommerce/api';
+import {
+  specValueByText as getSpecValueByText,
+  specTextValue as getSpecTextValue,
+  variationsGrids as getVariationsGrids,
+  gridTitle as _getGridTitle,
+} from '@ecomplus/utils';
+
+export interface Props {
+  variations: Exclude<Products['variations'], undefined>;
+  variationId?: ResourceId | null;
+}
+
+const useSkuSelector = (props: Props) => {
+  let grids = shallowReactive<GridsList<null>>(globalThis.$storefront.data.grids);
+  if (!grids) {
+    grids = shallowReactive([]);
+    api.get('grids').then(({ data: { result } }) => {
+      result.forEach((grid) => grids.push(grid));
+    });
+  }
+  const variationsGrids = reactive<Record<string, string[]>>({});
+  const activeVariationsGrids = reactive<Record<string, string[]>>({});
+  watch(toRef(props, 'variations'), () => {
+    Object.assign(activeVariationsGrids, getVariationsGrids(props, undefined, true));
+    const allVariationsGrids = getVariationsGrids(props);
+    Object.keys(allVariationsGrids).forEach((gridId) => {
+      if (activeVariationsGrids[gridId]) {
+        variationsGrids[gridId] = activeVariationsGrids[gridId];
+      } else {
+        delete variationsGrids[gridId];
+      }
+    });
+  }, { immediate: true });
+
+  const orderedGridIds = computed(() => Object.keys(variationsGrids));
+  const selectedOptions = reactive<Record<string, string>>({});
+  const variationId = ref<ResourceId | null | undefined>();
+  const selectOption = ({ optionText, gridId, gridIndex }: {
+    optionText: string,
+    gridId: string,
+    gridIndex: number,
+  }) => {
+    selectedOptions[gridId] = optionText;
+    const filteredGrids = {};
+    for (let i = 0; i <= gridIndex; i++) {
+      const _gridId = orderedGridIds[i];
+      if (selectedOptions[_gridId]) {
+        filteredGrids[_gridId] = selectedOptions[_gridId];
+      }
+    }
+    const nextFilteredGrids = getVariationsGrids(props, filteredGrids, true);
+    for (let i = gridIndex + 1; i < orderedGridIds.value.length; i++) {
+      const _gridId = orderedGridIds[i];
+      const options = nextFilteredGrids[_gridId];
+      activeVariationsGrids[_gridId] = options;
+      if (selectedOptions[_gridId] && !options.includes(selectedOptions[_gridId])) {
+        delete selectedOptions[_gridId];
+      }
+    }
+    const variations = props.variations.slice(0);
+    for (let i = 0; i < variations.length; i++) {
+      const variation = variations[i];
+      const { specifications } = variation;
+      const gridIds = Object.keys(specifications);
+      for (let ii = 0; ii < gridIds.length; ii++) {
+        const _gridId = gridIds[ii];
+        // @ts-ignore
+        if (selectedOptions[_gridId] !== getSpecTextValue(variation, _gridId)) {
+          variations.splice(i, 1);
+          i -= 1;
+          break;
+        }
+      }
+    }
+    variationId.value = variations[0]?._id || null;
+  };
+  watch(toRef(props, 'variationId'), (_variationId) => {
+    if (!_variationId || _variationId === variationId.value) {
+      return;
+    }
+    const selectedVariation = props.variations.find((variation) => {
+      return variation._id === _variationId;
+    });
+    if (!selectedVariation) {
+      variationId.value = null;
+      return;
+    }
+    const { specifications } = selectedVariation;
+    const specs = Object.keys(specifications);
+    const nextSpec = (specIndex = 0) => {
+      const gridId = specs[specIndex];
+      if (
+        specs[specIndex]
+        && specifications[gridId]
+        && specifications[gridId].length === 1
+      ) {
+        const optionText = specifications[gridId][0].text;
+        if (variationsGrids[gridId].find((option) => option === optionText)) {
+          selectOption({
+            optionText,
+            gridId,
+            gridIndex: orderedGridIds.value.indexOf(gridId),
+          });
+          nextSpec(specIndex + 1);
+        }
+      }
+    };
+    nextSpec();
+  }, { immediate: true });
+
+  const getGridTitle = (gridId: string) => {
+    return _getGridTitle(gridId, grids);
+  };
+  const getColorOptionBg = (optionText: string) => {
+    const rgbs = optionText.split(',').map((colorName) => {
+      return getSpecValueByText(props.variations, colorName.trim(), 'colors');
+    });
+    return rgbs.length > 1
+      ? `background:linear-gradient(to right bottom, ${rgbs[0]} 50%, ${rgbs[1]} 50%)`
+      : `background:${rgbs[0]}`;
+  };
+
+  return {
+    grids,
+    variationsGrids,
+    activeVariationsGrids,
+    selectOption,
+    selectedOptions,
+    variationId,
+    getGridTitle,
+    getColorOptionBg,
+  };
+};
+
+export default useSkuSelector;
+
+export { useSkuSelector };

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

@@ -7,6 +7,8 @@ export interface Props {
   hasViewTransitions?: boolean;
 }
 
+// @ts-ignore
+const isPWA = pwaInfo !== false; // config/astro/mock-pwa-info.mjs
 const hasViewTransitions = Astro.props.hasViewTransitions !== false;
 const deployRand = import.meta.env.DEPLOY_RAND || '_';
 const getIconUrl = (size: number) => {
@@ -161,13 +163,15 @@ const inlineJSONLd = JSON.stringify({
   <meta name="twitter:site" content={metatagsContent.twitterUsername} />}
 <meta name="ecom-store-id" content={String(storeId)}>
 
-<script>
-  import { registerSW } from 'virtual:pwa-register';
-  registerSW({ immediate: false });
-</script>
-{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
-{(!pwaInfo && !import.meta.env.DEV) &&
-  <link rel="manifest" href="/manifest.webmanifest" />}
+{isPWA && <>
+  <script>
+    import { registerSW } from 'virtual:pwa-register';
+    registerSW({ immediate: false });
+  </script>
+  {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+  {(!pwaInfo && !import.meta.env.DEV) &&
+    <link rel="manifest" href="/manifest.webmanifest" />}
+</>}
 
 <script is:inline set:html={inlineClientJS} transition:persist />
 <script type="application/ld+json" set:html={inlineJSONLd} />

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

@@ -14,8 +14,8 @@ export type StorefrontConfig = {
   currency: BaseConfig['currency'],
   currencySymbol: BaseConfig['currencySymbol'],
   domain: SettingsContent['domain'],
-  primaryColor: SettingsContent['primary_color'],
-  secondaryColor: SettingsContent['secondary_color'],
+  primaryColor: SettingsContent['primaryColor'],
+  secondaryColor: SettingsContent['secondaryColor'],
   settings: SettingsContent,
   getContent: ContentGetter,
 };
@@ -179,12 +179,19 @@ const loadRouteContext = async (Astro: Readonly<AstroGlobal>, {
     throw err;
   }
   Astro.response.headers.set('X-Load-Took', String(Date.now() - startedAt));
+  if (import.meta.env.PROD) {
+    const { assetsPrefix } = config.settings;
+    if (assetsPrefix && assetsPrefix.startsWith('https://')) {
+      const cdnURL = assetsPrefix.replace(/(https:\/\/[^/]+).*/, '$1');
+      Astro.response.headers.set('Link', `<${cdnURL}/>; rel=preconnect`);
+    }
+  }
   if (urlPath === '/~fallback') {
     setResponseCache(Astro, 3600, 86400);
   } else if (isHomepage) {
-    setResponseCache(Astro, 180, 300);
+    setResponseCache(Astro, 180);
   } else {
-    setResponseCache(Astro, 120, 300);
+    setResponseCache(Astro, 120, 180);
   }
   const routeContext = {
     ...config,

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "description": "E-Com Plus Cloud Commerce basic setup for testing",
   "main": "lib/index.js",
   "repository": {

package/packages/types/index.ts

@@ -100,6 +100,7 @@ type SettingsContent = {
   primaryColor: string,
   secondaryColor?: string,
   bgColor?: string,
+  assetsPrefix?: string,
   email: string,
   phone: string,
   address: string,

package/packages/types/package.json

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