cloudcommerce 0.29.0 → 0.31.0

package/packages/storefront/src/lib/components/ViewTransitions.astro

@@ -288,7 +288,10 @@ const { fallback = 'animate' } = Astro.props as Props;
     document.head.append(link);
   }
 
-  if (supportsViewTransitions || getFallback() !== 'none') {
+  if (
+    (supportsViewTransitions || getFallback() !== 'none') &&
+    !location.pathname.startsWith('/app/')
+  ) {
     markScriptsExec();
 
     document.addEventListener('click', (ev) => {
@@ -302,7 +305,10 @@ const { fallback = 'animate' } = Astro.props as Props;
       if (
         !link ||
         !(link instanceof HTMLAnchorElement) ||
+        link.dataset.astroReload !== undefined ||
+        link.hasAttribute('download') ||
         !link.href ||
+        link.pathname.startsWith('/app/') || // "real" SPA routes
         (link.target && link.target !== '_self') ||
         link.origin !== location.origin ||
         ev.button !== 0 || // left clicks only
@@ -382,6 +388,13 @@ const { fallback = 'animate' } = Astro.props as Props;
             if (
               el.origin === location.origin &&
               el.pathname !== location.pathname &&
+              !el.pathname.startsWith('/app/') && // "real" SPA routes
+              el.dataset.astroReload === undefined &&
+              !el.hasAttribute('download') &&
+              /* <a role=button> commonly used as no-JS interaction fallback,
+                thus, on-click redirect may be prevented after component hydration.
+                Shouldn't prefetch. */
+              el.role !== 'button' &&
               transitionEnabledOnThisPage()
             ) {
               maybePrefetch(el.pathname);

package/packages/storefront/src/lib/composables/use-login-form.ts

@@ -0,0 +1,80 @@
+import { ref, watch } from 'vue';
+import { useUrlSearchParams, useThrottleFn } from '@vueuse/core';
+import {
+  getAuth,
+  sendSignInLinkToEmail,
+  signInWithEmailAndPassword,
+} from 'firebase/auth';
+import {
+  EMAIL_STORAGE_KEY,
+  customerEmail as email,
+  initializeFirebaseAuth,
+} from '@@sf/state/customer-session';
+
+export interface Props {
+  canUseUrlParams?: boolean;
+}
+
+const useLoginForm = (props?: Props) => {
+  initializeFirebaseAuth();
+  const canUseUrlParams = props?.canUseUrlParams !== false;
+  const params = canUseUrlParams ? useUrlSearchParams('history') : {};
+  const isInitSignUp = params.sign_up !== undefined && params.sign_up !== '0';
+  const isInitPasswordSignIn = params.password !== undefined && params.password !== '0';
+  const isSignUp = ref(isInitSignUp);
+  const isLinkSignIn = ref(!isInitSignUp && !isInitPasswordSignIn);
+  watch(isSignUp, (_isSignUp) => {
+    if (_isSignUp) {
+      isLinkSignIn.value = true;
+      params.sign_up = '1';
+    } else {
+      params.sign_up = '0';
+    }
+  });
+  watch(isLinkSignIn, (_isLinkSignIn) => {
+    params.password = _isLinkSignIn ? '0' : '1';
+  });
+  const password = ref('');
+  const isSubmitting = ref(false);
+  const submitLogin = useThrottleFn(async (linkActionUrl?: string | null) => {
+    isSubmitting.value = true;
+    const timestamp = Date.now();
+    const firebaseAuth = getAuth();
+    if (!email.value) return;
+    window.localStorage.setItem(EMAIL_STORAGE_KEY, email.value);
+    try {
+      if (isLinkSignIn.value) {
+        const url = new URL(linkActionUrl || window.location.toString());
+        url.searchParams.append('email', email.value);
+        await sendSignInLinkToEmail(firebaseAuth, email.value, {
+          url: url.toString(),
+          handleCodeInApp: true,
+        });
+      } else {
+        await signInWithEmailAndPassword(
+          firebaseAuth,
+          email.value,
+          password.value,
+        );
+      }
+    } catch (error: any) {
+      console.warn(error.code);
+      console.error(error);
+    }
+    setTimeout(() => {
+      isSubmitting.value = false;
+    }, Math.min(2000 - (Date.now() - timestamp), 1));
+  }, 2000);
+  return {
+    isLinkSignIn,
+    isSignUp,
+    email,
+    password,
+    isSubmitting,
+    submitLogin,
+  };
+};
+
+export default useLoginForm;
+
+export { useLoginForm };

package/packages/storefront/src/lib/composables/use-sticky-header.ts

@@ -12,7 +12,7 @@ import {
   useScroll,
   watchDebounced,
 } from '@vueuse/core';
-import { isMobile } from '@@sf/sf-lib';
+import { isMobile, isScreenXs } from '@@sf/sf-lib';
 
 export interface Props {
   header: Ref<HTMLElement | null>;
@@ -34,13 +34,16 @@ const useStickyHeader = (props: Props) => {
     canCreateHeightDiv: true,
     ...props,
   };
-  const { ready, start } = useTimeout(100, { controls: true, immediate: false });
+  const { ready, start } = useTimeout(100, {
+    controls: true,
+    immediate: false,
+  });
   const staticHeight = ref(0);
   const staticY = ref(0);
   let heightDiv: HTMLElement | undefined;
-  const { y: _y } = !import.meta.env.SSR && (isShownOnMobile || !isMobile)
-    ? useScroll(document)
-    : { y: ref(0) };
+  const canWatchScroll = !import.meta.env.SSR
+    && (isShownOnMobile || (!isMobile && !isScreenXs));
+  const { y: _y } = canWatchScroll ? useScroll(document) : { y: ref(0) };
   const y = ref(0);
   watchDebounced(_y, (nextY) => {
     y.value = nextY;

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

@@ -9,7 +9,8 @@ export interface Props {
 
 // @ts-ignore
 const isPWA = pwaInfo !== false; // config/astro/mock-pwa-info.mjs
-const hasViewTransitions = Astro.props.hasViewTransitions !== false;
+const hasViewTransitions = Astro.props.hasViewTransitions !== false
+  && !Astro.url.pathname.startsWith('/app/');
 const deployRand = import.meta.env.DEPLOY_RAND || '_';
 const getIconUrl = (size: number) => {
   return `/_image?f=png&w=${size}&h=${size}`

package/packages/storefront/src/lib/scripts/vbeta-app.ts

@@ -0,0 +1,44 @@
+import { watch } from 'vue';
+import {
+  GET_PASSPORT_API_URI,
+  session,
+  isAuthenticated,
+  customer,
+} from '@@sf/state/customer-session';
+
+// https://github.com/ecomplus/storefront/tree/master/%40ecomplus/storefront-app compat
+if (!import.meta.env.SSR) {
+  const onLoad = () => {
+    const { ecomPassport } = window as Record<string, any>;
+    watch(isAuthenticated, async () => {
+      if (isAuthenticated.value) {
+        // @ts-ignore
+        window.ECOMCLIENT_API_PASSPORT = GET_PASSPORT_API_URI();
+        ecomPassport.setSession({
+          auth: {
+            ...session.auth,
+            id: session.auth?.customer_id,
+            level: 3,
+          },
+          customer: customer.value,
+        });
+      } else if (ecomPassport.checkLogin()) {
+        ecomPassport.logout();
+      }
+    }, {
+      immediate: true,
+    });
+    watch(customer, (_customer) => {
+      if (_customer.display_name || _customer.main_email) {
+        ecomPassport.setCustomer(_customer);
+      }
+    }, {
+      immediate: true,
+    });
+  };
+
+  const appScript = document.createElement('script');
+  appScript.src = 'https://cdn.jsdelivr.net/npm/@ecomplus/storefront-app@2.0.0-beta.186/dist/lib/js/app.js';
+  appScript.onload = onLoad;
+  document.body.appendChild(appScript);
+}

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

@@ -29,6 +29,11 @@ if (!globalThis.$apiMergeConfig) {
     canCache: true,
   };
 }
+declare global {
+  /* eslint-disable no-var, vars-on-top */
+  var $apiPrefetchEndpoints: Array<ApiEndpoint | ':slug'>;
+  /* eslint-enable no-var */
+}
 if (!globalThis.$apiPrefetchEndpoints) {
   globalThis.$apiPrefetchEndpoints = [];
 }
@@ -42,12 +47,25 @@ if (!globalThis.$storefront) {
   };
 }
 
+declare global {
+  /* eslint-disable no-var, vars-on-top */
+  var $storefrontCacheController: undefined
+    | ((Astro: AstroGlobal, maxAge: number, sMaxAge?: number) => string | null);
+  /* eslint-enable no-var */
+}
 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}`;
-  if (sMaxAge || maxAge >= 60) cacheControl += `, stale-while-revalidate=604800`;
-  Astro.response.headers.set(headerName, cacheControl);
+  let cacheControl: string | null = null;
+  if (globalThis.$storefrontCacheController) {
+    cacheControl = globalThis.$storefrontCacheController(Astro, maxAge, sMaxAge);
+  } else {
+    cacheControl = `public, max-age=${maxAge}, must-revalidate`;
+    if (sMaxAge) cacheControl += `, s-maxage=${sMaxAge}`;
+    if (sMaxAge || maxAge >= 60) cacheControl += `, stale-while-revalidate=604800`;
+  }
+  if (cacheControl) {
+    Astro.response.headers.set(headerName, cacheControl);
+  }
 };
 
 export type ApiPrefetchEndpoints = Array<ApiEndpoint | ':slug'>;
@@ -99,7 +117,7 @@ const loadRouteContext = async (Astro: Readonly<AstroGlobal>, {
   } else if (slug) {
     if (contentCollection) {
       cmsContent = await config.getContent(`${contentCollection}/${slug}`);
-    } else if (slug.startsWith('api/')) {
+    } else if (slug.startsWith('_api/')) {
       const err: any = new Error('/api/* routes not implemented on SSR directly');
       Astro.response.status = 501;
       err.responseHTML = `<head></head><body>${err.message}</body>`;

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

@@ -6,6 +6,13 @@ import { computed } from 'vue';
 import { requestIdleCallback } from '@@sf/sf-lib';
 import useStorage from '@@sf/state/use-storage';
 
+export const EMAIL_STORAGE_KEY = 'emailForSignIn';
+
+export const GET_PASSPORT_API_URI = () => {
+  const { domain } = globalThis.$storefront.settings;
+  return `https://${domain}/_api/passport/`;
+};
+
 const storageKey = 'ecomSession';
 const emptySession = {
   customer: {
@@ -61,9 +68,8 @@ const authenticate = async () => {
     throwNoAuth('Can\'t get Firebase user ID token');
     return;
   }
-  const { domain } = window.$storefront.settings;
   try {
-    const resAuth = await fetch(`https://${domain}/_api/passport/token`, {
+    const resAuth = await fetch(`${GET_PASSPORT_API_URI()}token`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -95,8 +101,11 @@ const fetchCustomer = async () => {
 };
 
 let isAuthInitialized = false;
-const initializeFirebaseAuth = (canWaitIdle = !window.location.pathname.startsWith('/app/')) => {
+const initializeFirebaseAuth = (canWaitIdle?: boolean) => {
   if (import.meta.env.SSR || isAuthInitialized) return;
+  if (canWaitIdle === undefined) {
+    canWaitIdle = !window.location.pathname.startsWith('/app/');
+  }
   isAuthInitialized = true;
   const runImport = () => import('../scripts/firebase-app')
     .then(({
@@ -132,7 +141,7 @@ const initializeFirebaseAuth = (canWaitIdle = !window.location.pathname.startsWi
         const email = urlParams.get('email');
         if (email) {
           signInWithEmailLink(firebaseAuth, email, window.location.href)
-            .then(() => window.localStorage.removeItem('emailForSignIn'))
+            .then(() => window.localStorage.removeItem(EMAIL_STORAGE_KEY))
             .catch(console.error);
         }
       }

package/packages/test-base/package.json

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

package/packages/types/package.json

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