shopflo-appbrew 0.1.0 → 0.2.0

package/README.md

@@ -6,7 +6,7 @@ Shopflo one-click checkout. Replaces the native checkout flow with a Shopflo-hos
 
 Registered via `registerShopfloBlocks(r)`:
 
-- `shopflo-web-view` — WebView that loads the Shopflo checkout URL.
+- `shopflo-web-view` — WebView that loads a Shopflo checkout. Pass `page="cart"` to open Shopflo's cart instead; the registered cart screen does.
 
 ## Cart and checkout screens
 
@@ -25,7 +25,7 @@ The cart screen shows the native (config-driven) cart until Shopflo is usable, t
 | Shopflo enabled, cart empty | Native cart (Shopflo's token API rejects an empty cart) |
 | Shopflo enabled, cart has items | Shopflo WebView, kept after purchase so the thank-you page stays |
 
-The status is reactive: a cart opened before the health check settles switches to Shopflo when it lands. The health check retries once before falling back to native.
+The status is reactive: a cart opened before the health check settles switches to Shopflo when it lands. A failed health check (network error or non-2xx) is retried up to 3 times, 1 s apart, before falling back to native.
 
 ### What a registered screen has to provide
 
@@ -58,6 +58,7 @@ return (
           instanceId={shopfloBlock.instanceId}
           index={0}
           length={1}
+          page="cart"
         />
       </BlockOverrideContext.Provider>
     )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopflo-appbrew",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {

package/src/blocks/shopflo-web-view.tsx

@@ -22,31 +22,34 @@ import { ShopfloProvider } from '../provider'
 import { isHomePage, isThankYou } from '@gauntlet/components/utils'
 import { useIsFocused } from '@react-navigation/native'
 import {
+  isShopifyCartUrl,
   lastSegment,
-  toCartSignature,
   toShopfloCartUrl,
 } from '../utils/shopflo'
 import { toUpiAppUrl } from '../utils/payment-intents'
 import type { ShopfloPage } from '../types'
 
 type ShopfloWebviewProps = BaseBlockProps & {
-  // 'cart' opens Shopflo's cart (cart token); 'checkout' a checkout (Token V2)
+  // 'cart' opens Shopflo's cart (cart token); 'checkout' a checkout (Token V2).
+  // Defaults to 'checkout', what themes placing this block have always got
   page?: ShopfloPage
+  // Rendered by a registered screen, not placed by a theme: reaching the
+  // back_url closes this screen instead of navigating to 'cart'
+  isRegisteredScreen?: boolean
   // Set by the registered screens: they fall back to the native cart /
   // checkout when the token call fails, instead of the backup-checkout redirect
   onUnavailable?: () => void
 }
 
 export function ShopfloWebview(props: ShopfloWebviewProps) {
-  const { onUnavailable, page = 'cart' } = props
+  const { isRegisteredScreen, onUnavailable, page = 'checkout' } = props
   const webViewRef = React.useRef<WebView>(null)
   const [checkoutData, setCheckoutData] = React.useState<
     { checkoutUrl: string; tokenId: string; loadId: number } | undefined
   >()
   const isFocused = useIsFocused()
-  const cartSignature = useAppStore((s) => toCartSignature(s.cart.data.lineItems))
-  // Signature of the cart Shopflo currently shows; null until the first load
-  const loadedSignature = React.useRef<string | null>(null)
+  // Id of the newest token request; an older one resolving later is dropped
+  const latestRequest = React.useRef(0)
   const block = useBlock(props.screenId, props.componentId, props.instanceId)
   const settings = useBlockSettings(block)
   const { width, height } = useDeviceDimensions()
@@ -116,13 +119,13 @@ export function ShopfloWebview(props: ShopfloWebviewProps) {
     }
 
     // Get the URL from the provider
-    loadedSignature.current = toCartSignature(
-      useAppStore.getState().cart.data.lineItems
-    )
+    const request = ++latestRequest.current
     const result =
       page === 'checkout'
         ? await checkoutProvider.fetchCheckoutUrl()
         : await checkoutProvider.fetchCartUrl()
+    // A newer visit started another request while this was in flight
+    if (request !== latestRequest.current) return
     if (!result?.checkoutUrl || !result?.tokenId) {
       console.error('Failed to get checkout URL')
       if (onUnavailable) {
@@ -150,16 +153,20 @@ export function ShopfloWebview(props: ShopfloWebviewProps) {
     capturedCheckout.current = false
   }, [page, settings, gotoLink, setOverrideBack, onUnavailable])
 
-  // On every visit, reload only if the app's cart changed since Shopflo got it.
+  // Kept in a ref so only a new visit, not a re-created callback, reloads
+  const initializeRef = React.useRef(initializeWebView)
+  initializeRef.current = initializeWebView
+
+  // Every visit mints a fresh token from the app's cart; edits made inside
+  // Shopflo while it is open are only synced to the app cart, never reloaded.
   // An empty cart (after purchase) keeps the thank-you page up
   React.useEffect(() => {
-    if (!isFocused || !cartSignature) return
-    if (cartSignature === loadedSignature.current) return
-    initializeWebView()
-  }, [isFocused, cartSignature, initializeWebView])
+    if (!isFocused) return
+    if (!useAppStore.getState().cart.data.lineItems.length) return
+    initializeRef.current()
+  }, [isFocused])
 
-  // Shopflo already shows edits made inside it; record them as loaded so they
-  // don't trigger a reload of the cart the user is looking at
+  // Shopflo already shows edits made inside it; only the app cart needs them
   const syncFromShopflo = React.useCallback(
     async (apply: () => Promise<unknown>) => {
       try {
@@ -167,9 +174,6 @@ export function ShopfloWebview(props: ShopfloWebviewProps) {
       } catch (error) {
         console.warn('Syncing Shopflo cart change failed:', error)
       }
-      loadedSignature.current = toCartSignature(
-        useAppStore.getState().cart.data.lineItems
-      )
     },
     []
   )
@@ -261,14 +265,6 @@ export function ShopfloWebview(props: ShopfloWebviewProps) {
           // The cart view's close (X) posts CLOSE_CART_IFRAME, not FLO_EXIT_CHECKOUT
           case 'CLOSE_CART_IFRAME':
           case 'FLO_EXIT_CHECKOUT':
-            // On the cart screen Shopflo moved to checkout inside this WebView
-            // (is_cart_redirect); put it back on the cart so the next visit
-            // to the cart screen opens there
-            if (type === 'FLO_EXIT_CHECKOUT' && page === 'cart') {
-              setCheckoutData(
-                (prev) => prev && { ...prev, loadId: prev.loadId + 1 }
-              )
-            }
             if (settings?.source?.closeModalId) {
               openModal(settings.source.closeModalId)
             } else {
@@ -282,7 +278,7 @@ export function ShopfloWebview(props: ShopfloWebviewProps) {
         console.error('Error parsing message from WebView:', error)
       }
     },
-    [page, settings, back, openModal, syncFromShopflo]
+    [settings, back, openModal, syncFromShopflo]
   )
 
   if (!checkoutData) return null
@@ -330,11 +326,11 @@ export function ShopfloWebview(props: ShopfloWebviewProps) {
       onLoadStart={(event) => {
         const url = event.nativeEvent.url
         setWebUrl(url)
-        if (url.includes('/cart')) {
+        if (isShopifyCartUrl(url, shopifyDomain)) {
           webViewRef.current?.stopLoading()
           // On the cart screen, going to 'cart' again would stack another one
           // and mint a new token; on checkout this is back_url (exit). Leave
-          if (onUnavailable) {
+          if (isRegisteredScreen) {
             back()
             return
           }

package/src/provider.ts

@@ -6,7 +6,7 @@ import {
   SHOPFLO_API_BASE_URL,
   SHOPFLO_CHECKOUT_TOKEN_URL,
 } from './utils/constants'
-import { lastSegment } from './utils/shopflo'
+import { lastSegment, toShopifyCartUrl } from './utils/shopflo'
 import {
   CHECKOUT_UI_CONFIG,
   toCheckoutItemsAndDiscounts,
@@ -181,8 +181,8 @@ export class ShopfloProvider implements ICheckoutProvider {
           ui_config: CHECKOUT_UI_CONFIG,
           tags: ['app'],
           note_attributes: toNoteAttributes(cartData.cartAttributes),
-          // Mandatory. The WebView treats any /cart URL as "exit checkout"
-          back_url: `https://${shopifyConfig.domain}/cart`,
+          // Mandatory. The WebView treats reaching it as "exit checkout"
+          back_url: toShopifyCartUrl(shopifyConfig.domain),
         }),
       })
 

package/src/screens/shopflo-cart-screen.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { SafeAreaContainer, ScreenBrewery } from "@gauntlet/brewery";
 import type { CustomScreenProps } from "@gauntlet/brewery";
 import { BlockOverrideContext, useAppStore } from "@gauntlet/state";
+import { useIsFocused } from "@react-navigation/native";
 import { ShopfloWebview } from "../blocks/shopflo-web-view";
 import { useShopfloStatus } from "./use-shopflo-status";
 
@@ -32,10 +33,18 @@ export function ShopfloCartScreen({ options }: CustomScreenProps) {
   );
   // Shopflo's token API rejects an empty cart; the native screen owns the empty state
   const hasItems = useAppStore((s) => s.cart.data.lineItems.length > 0);
+  const isFocused = useIsFocused();
   const [unavailable, setUnavailable] = React.useState(false);
+  // A failed token call shows the native cart for this visit only; leaving
+  // the screen lets the next visit try Shopflo again
+  React.useEffect(() => {
+    if (!isFocused) setUnavailable(false);
+  }, [isFocused]);
   // Once shown, keep the WebView: the cart is reset on purchase, and swapping
-  // to the native screen then would hide Shopflo's thank-you page
+  // to the native screen then would hide Shopflo's thank-you page. Leaving
+  // with an empty cart ends that, so the next visit shows the native empty cart
   const showedShopflo = React.useRef(false);
+  if (!isFocused && !hasItems) showedShopflo.current = false;
   const onUnavailable = React.useCallback(() => setUnavailable(true), []);
 
   if (
@@ -66,6 +75,8 @@ export function ShopfloCartScreen({ options }: CustomScreenProps) {
           // Position in the screen's block list; it is the only block here
           index={0}
           length={1}
+          page="cart"
+          isRegisteredScreen
           onUnavailable={onUnavailable}
         />
       </BlockOverrideContext.Provider>

package/src/screens/shopflo-checkout-screen.tsx

@@ -58,6 +58,7 @@ export function ShopfloCheckoutScreen(_props: CustomScreenProps) {
           index={0}
           length={1}
           page="checkout"
+          isRegisteredScreen
           onUnavailable={toNativeCheckout}
         />
       </BlockOverrideContext.Provider>

package/src/utils/shopflo.ts

@@ -8,16 +8,24 @@ const SHOPFLO_DISABLED_STATUS: ShopfloHealthStatus = {
     clientMeta: {},
   }
 const HEALTH_URL = `${SHOPFLO_API_BASE_URL}/heimdall/api/v1/shopflo-health`
+// Retries after the first try before falling back to the native flow
+const HEALTH_RETRIES = 3
+const HEALTH_RETRY_DELAY_MS = 1000
 
 // Shopify ids are gids (gid://shopify/ProductVariant/123); Shopflo uses the bare id
 export const lastSegment = (id: string | number) =>
   String(id).split('/').pop() ?? ''
 
-// What Shopflo was last given; a different value means the token call must
-// run again so Shopflo's cart matches the app's
-export const toCartSignature = (
-  lineItems: Array<{ variantId: string; quantity: number }>
-) => lineItems.map((li) => `${li.variantId}:${li.quantity}`).join(',')
+// back_url given to Shopflo's checkout; reaching it means the user left
+export const toShopifyCartUrl = (domain: string) => `https://${domain}/cart`
+
+// Scheme, query, hash and a trailing slash don't matter; any other URL,
+// including Shopflo's own with /cart in the path, isn't the back_url
+export const isShopifyCartUrl = (url: string, domain: string) =>
+  url
+    .split(/[?#]/)[0]
+    .replace(/^https?:\/\//, '')
+    .replace(/\/$/, '') === `${domain}/cart`
 
 // The token's checkout_url already opens Shopflo's cart view (page=cart);
 // is_cart_redirect=true makes its Checkout button move to checkout inside the
@@ -43,26 +51,36 @@ export const getShopfloHealthStatus = async ({
     const query = new URLSearchParams({ 'shop-url': shopUrl })
     if (themeId) query.append('theme-id', themeId)
     if (applicationId) query.append('application-id', applicationId)
-  
-    try {
-      
-      const response = await fetch(`${HEALTH_URL}?${query.toString()}`, {
-        method: 'GET',
-        headers: { 'Content-Type': 'application/json' },
-      })
-      if (!response.ok) {
-        throw new Error(`Health check failed with status: ${response.status}`)
-      }
-  
-      const data = (await response.json())?.data
-      return {
-        isFloEnabled: data?.enabled === true,
-        isSSOEnabled: data?.sso_enabled === true,
-        isABEnabled: data?.ab_enabled === true,
-        clientMeta: data?.client_meta ?? {},
+    const url = `${HEALTH_URL}?${query.toString()}`
+
+    // A failed check disables Shopflo for the session, so blips get retried
+    for (let retry = 0; ; retry++) {
+      try {
+        return await fetchHealthStatus(url)
+      } catch (error) {
+        console.warn(`Shopflo health check failed (retry ${retry}):`, error)
+        if (retry === HEALTH_RETRIES) return SHOPFLO_DISABLED_STATUS
+        await new Promise<void>((resolve) =>
+          setTimeout(resolve, HEALTH_RETRY_DELAY_MS)
+        )
       }
-    } catch (error) {
-      console.warn('Shopflo health check failed:', error)
-      return SHOPFLO_DISABLED_STATUS
     }
-  }
+  }
+
+const fetchHealthStatus = async (url: string): Promise<ShopfloHealthStatus> => {
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json' },
+  })
+  if (!response.ok) {
+    throw new Error(`Health check failed with status: ${response.status}`)
+  }
+
+  const data = (await response.json())?.data
+  return {
+    isFloEnabled: data?.enabled === true,
+    isSSOEnabled: data?.sso_enabled === true,
+    isABEnabled: data?.ab_enabled === true,
+    clientMeta: data?.client_meta ?? {},
+  }
+}