cloudcommerce 0.29.0 → 0.30.0

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

@@ -0,0 +1,71 @@
+import { ref, watch } from 'vue';
+import { useUrlSearchParams } from '@vueuse/core';
+import {
+  getAuth,
+  sendSignInLinkToEmail,
+  signInWithEmailAndPassword,
+} from 'firebase/auth';
+import {
+  EMAIL_STORAGE_KEY,
+  customerEmail as email,
+} from '@@sf/state/customer-session';
+
+export interface Props {
+  canUseUrlParams?: boolean;
+}
+
+const useLoginForm = (props?: Props) => {
+  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 submitLogin = async () => {
+    const firebaseAuth = getAuth();
+    if (!email.value) return;
+    window.localStorage.setItem(EMAIL_STORAGE_KEY, email.value);
+    try {
+      if (isLinkSignIn.value) {
+        const url = new URL(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);
+    }
+  };
+  return {
+    isLinkSignIn,
+    isSignUp,
+    email,
+    password,
+    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/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,8 @@ import { computed } from 'vue';
 import { requestIdleCallback } from '@@sf/sf-lib';
 import useStorage from '@@sf/state/use-storage';
 
+export const EMAIL_STORAGE_KEY = 'emailForSignIn';
+
 const storageKey = 'ecomSession';
 const emptySession = {
   customer: {
@@ -132,7 +134,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.30.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.30.0",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {

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

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import {
-  i19accessMyAccount,
-  i19createAnAccount,
-  i19enterWithPassword,
-  i19iForgotMyPassword,
-  i19password,
-  i19sendLoginCodeByEmail,
-  i19signUp,
-} from '@@i18n';
-import {
-  getAuth,
-  sendSignInLinkToEmail,
-  signInWithEmailAndPassword,
-} from 'firebase/auth';
-import {
-  customerName,
-  customerEmail as email,
-  isLogged,
-} from '@@sf/state/customer-session';
-
-// eslint-disable-next-line no-spaced-func, func-call-spacing
-const emit = defineEmits<{
-  (e: 'set:is-logged', value: boolean): void
-  (e: 'set:email', value: string): void
-  (e: 'set:customer-name', value: string): void
-}>();
-watch(isLogged, (_isLogged) => {
-  emit('set:is-logged', _isLogged);
-  emit('set:customer-name', customerName.value);
-}, {
-  immediate: true,
-});
-watch(email, (_email) => {
-  emit('set:email', _email as string);
-}, {
-  immediate: true,
-});
-const isLinkSignIn = ref(true);
-const isSignUp = ref(false);
-watch(isSignUp, (_isSignUp) => {
-  if (_isSignUp) {
-    isLinkSignIn.value = true;
-  }
-});
-const password = ref('');
-const submitLogin = async () => {
-  const firebaseAuth = getAuth();
-  if (!email.value) return;
-  window.localStorage.setItem('emailForSignIn', email.value);
-  try {
-    if (isLinkSignIn.value) {
-      const url = new URL(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);
-  }
-};
-</script>
-
-<template>
-  <form
-    class="login-form text-base"
-    @submit.prevent="submitLogin"
-  >
-    <label v-if="isLinkSignIn" for="login-form-email">
-      {{ i19sendLoginCodeByEmail }}
-    </label>
-    <input
-      id="login-form-email"
-      type="email"
-      placeholder="email@mail.com"
-      v-model="email"
-      required
-    >
-    <input
-      v-if="!isLinkSignIn"
-      type="password"
-      class="lowercase"
-      :placeholder="i19password"
-      v-model="password"
-      required
-    >
-    <small v-show="!isSignUp" class="text-right lowercase">
-      <a
-        href="#"
-        class="text-muted"
-        @click.prevent="isLinkSignIn = !isLinkSignIn"
-      >
-        {{ isLinkSignIn ? i19enterWithPassword : i19iForgotMyPassword }}
-      </a>
-    </small>
-    <button type="submit">
-      <slot name="button-content" v-bind="{ isSignUp }">
-        {{ isSignUp ? i19signUp : i19accessMyAccount }}
-      </slot>
-    </button>
-    <a
-      href="#"
-      class="block text-center"
-      @click.prevent="isSignUp = !isSignUp"
-    >
-      {{ isSignUp ? i19accessMyAccount : i19createAnAccount }}
-    </a>
-  </form>
-</template>