@app-brew/brewery 1.0.0

package/src/components/src/molecules/cart-goals/use-goal-success-modal.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useMemo } from 'react'
+import { useAppStore, useDeviceDimensions } from '@gauntlet/state'
+import { Goal, GoalSuccessModalOptions, SuccessModalOptions } from './types'
+import { GoalSuccessModalContent } from './components/success-modal'
+import { interpolateTemplate } from './utils'
+import { useTierChange } from './use-tier-change'
+
+interface UseGoalSuccessModalParams {
+  highestAchievedTierIndex: number | null
+  achievedGoal?: Goal | null
+  successModalOptions?: SuccessModalOptions
+  templateVariables: Record<string, any>
+  style?: any
+}
+
+const defaultTitle = 'Enjoy {{discountFormatted}} off'
+const defaultMessage = 'Goal achieved!'
+const defaultButtonText = 'Woohoo! Thanks'
+
+export function useGoalSuccessModal({
+  highestAchievedTierIndex,
+  achievedGoal,
+  successModalOptions,
+  templateVariables,
+  style,
+}: UseGoalSuccessModalParams) {
+  const modal = useAppStore((s) => s.modal)
+  const { width } = useDeviceDimensions()
+
+  // Merge global config with goal-level config (goal-level overrides global)
+  const mergedModalOptions = useMemo((): SuccessModalOptions | undefined => {
+    if (!successModalOptions?.enabled) return undefined
+
+    const goalModalOptions: GoalSuccessModalOptions | undefined =
+      achievedGoal?.successModal
+
+    if (!goalModalOptions) return successModalOptions
+
+    return {
+      ...successModalOptions,
+      ...goalModalOptions,
+      // Only override if goal-level value is defined
+      title: goalModalOptions.title ?? successModalOptions.title,
+      message: goalModalOptions.message ?? successModalOptions.message,
+      buttonText: goalModalOptions.buttonText ?? successModalOptions.buttonText,
+      iconId: goalModalOptions.iconId ?? successModalOptions.iconId,
+    }
+  }, [successModalOptions, achievedGoal])
+
+  const showSuccessModal = useCallback(() => {
+    if (!mergedModalOptions?.enabled) return
+
+    const title = interpolateTemplate(
+      mergedModalOptions.title ?? defaultTitle,
+      templateVariables
+    )
+    const message = interpolateTemplate(
+      mergedModalOptions.message ?? defaultMessage,
+      templateVariables
+    )
+    const buttonText = mergedModalOptions.buttonText ?? defaultButtonText
+
+    const handleClose = () => {
+      modal.setModalVisibility(false)
+    }
+
+    modal.setModalContent(
+      <GoalSuccessModalContent
+        title={title}
+        message={message}
+        buttonText={buttonText}
+        iconId={mergedModalOptions.iconId}
+        onClose={handleClose}
+        style={style?.successModal}
+      />,
+      'cart-goal-success'
+    )
+
+    modal.setModalHeight(260)
+    modal.setModalVisibility(true)
+    modal.setShowCloseIcon(false)
+    modal.setModalStyle({
+      root: {
+        padding: 0,
+        margin: 0,
+      },
+      modalContainer: {
+        padding: 0,
+        margin: 0,
+        marginBottom: 0,
+        backgroundColor: 'transparent',
+      },
+      contentContainer: {
+        padding: 0,
+        margin: 0,
+        paddingTop: 32,
+        width: width,
+      },
+    })
+  }, [mergedModalOptions, templateVariables, modal, width, style])
+
+  useTierChange(highestAchievedTierIndex, { onTierAchieved: showSuccessModal })
+}

package/src/components/src/molecules/cart-goals/use-tier-change.ts

@@ -0,0 +1,42 @@
+import { useRef, useEffect } from 'react'
+
+export interface TierChangeCallbacks {
+  onTierAchieved?: () => void
+  onTierLost?: () => void
+}
+
+/**
+ * Hook to detect tier changes and trigger callbacks.
+ * Skips the initial render to avoid false positives.
+ *
+ * @param highestAchievedTierIndex - The 0-based index of the highest achieved tier, or null if no tier achieved
+ * @param callbacks - Optional callbacks for tier achievement or loss
+ */
+export function useTierChange(
+  highestAchievedTierIndex: number | null,
+  callbacks: TierChangeCallbacks
+) {
+  const prevTierIndexRef = useRef<number | null | undefined>(undefined)
+  const { onTierAchieved, onTierLost } = callbacks
+
+  useEffect(() => {
+    const prevTierIndex = prevTierIndexRef.current
+
+    // Only trigger after initial render (when prevTierIndex is not undefined)
+    if (prevTierIndex !== undefined) {
+      const prevAchievedCount = prevTierIndex !== null ? prevTierIndex + 1 : 0
+      const currentAchievedCount =
+        highestAchievedTierIndex !== null ? highestAchievedTierIndex + 1 : 0
+
+      if (currentAchievedCount > prevAchievedCount) {
+        // Achieved a new tier (moving forward)
+        onTierAchieved?.()
+      } else if (currentAchievedCount < prevAchievedCount) {
+        // Lost a tier (moving backward)
+        onTierLost?.()
+      }
+    }
+
+    prevTierIndexRef.current = highestAchievedTierIndex
+  }, [highestAchievedTierIndex, onTierAchieved, onTierLost])
+}

package/src/components/src/molecules/cart-goals/utils.ts

@@ -0,0 +1,153 @@
+import { Goal, DiscountReward, CouponReward, GoalType, CartGoal } from './types'
+
+function roundToTwoDecimals(n: number): number {
+  if (!Number.isFinite(n)) return 0
+  return Math.round(n * 100) / 100
+}
+
+export function interpolateTemplate(
+  template: string | undefined,
+  variables: Record<string, string | number | undefined>
+): string {
+  if (!template) return ''
+  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+    const value = variables[key]
+    return value !== undefined && value !== null ? String(value) : match
+  })
+}
+
+export function isDiscountReward(goal: Goal): goal is Goal & DiscountReward {
+  return goal.rewardType === 'discount'
+}
+
+export function isCouponReward(goal: Goal): goal is Goal & CouponReward {
+  return goal.rewardType === 'coupon'
+}
+
+export function isGiftItem(item: any): boolean {
+  const price = parseFloat(item?.priceAfterDiscount)
+  return Number.isFinite(price) && price <= 0
+}
+
+export function isItemEligible(item: any, goal: CartGoal): boolean {
+  if (isGiftItem(item)) return false
+
+  const collectionIds = (item as any).collectionIds as Set<string> | undefined
+
+  const isIncludedCollection =
+    goal.includedCollections && goal.includedCollections.length > 0
+      ? goal.includedCollections.some((id: string) => collectionIds?.has(id))
+      : true
+  const isExcludedCollection =
+    goal.excludedCollections && goal.excludedCollections.length > 0
+      ? goal.excludedCollections.some((id: string) => collectionIds?.has(id))
+      : false
+  const isIncludedProduct =
+    goal.includedProducts && goal.includedProducts.length > 0
+      ? goal.includedProducts.includes(String(item.productId))
+      : true
+  const isExcludedProduct =
+    goal.excludedProducts && goal.excludedProducts.length > 0
+      ? goal.excludedProducts.includes(String(item.productId))
+      : false
+
+  if (isExcludedCollection || isExcludedProduct) return false
+  if (!isIncludedCollection || !isIncludedProduct) return false
+  return true
+}
+
+export function calculateCartValue(
+  lineItems: any[],
+  goalType: 'amount' | 'quantity',
+  goal: CartGoal
+): {
+  cartValue: number
+  cartMonetaryValue: number
+  ineligibleItemsCount: number
+} {
+  const eligibleItems = lineItems.filter((item) => isItemEligible(item, goal))
+  const ineligibleItems = lineItems.filter(
+    (item) => !isItemEligible(item, goal)
+  )
+
+  const safePriceAfterDiscount = (item: any): number =>
+    Number(parseFloat(item?.priceAfterDiscount)) || 0
+  const safeQuantity = (item: any): number => Number(item?.quantity) || 0
+
+  let monetaryValueOriginal = eligibleItems.reduce((sum, item) => {
+    const sellingPrice =
+      Number(parseFloat(item?.price)) || safePriceAfterDiscount(item)
+    return sum + sellingPrice * safeQuantity(item)
+  }, 0)
+  monetaryValueOriginal = roundToTwoDecimals(monetaryValueOriginal)
+
+  const ineligibleCount = ineligibleItems.reduce(
+    (sum, item) => sum + safeQuantity(item),
+    0
+  )
+
+  if (goalType === 'amount') {
+    return {
+      cartValue: monetaryValueOriginal,
+      cartMonetaryValue: monetaryValueOriginal,
+      ineligibleItemsCount: ineligibleCount,
+    }
+  } else {
+    const eligibleQuantity = eligibleItems.reduce(
+      (sum, item) => sum + safeQuantity(item),
+      0
+    )
+    return {
+      cartValue: eligibleQuantity,
+      cartMonetaryValue: monetaryValueOriginal,
+      ineligibleItemsCount: ineligibleCount,
+    }
+  }
+}
+
+/**
+ * Actual amount saved from all discounts (product-level + order-level), no overlap.
+ * Prefers cart payment totals (lineItemsSubTotal - subTotal) as single source of truth.
+ * Fallback: sum of (selling price - priceAfterDiscount) * quantity per line item.
+ */
+export function getActualAmountSaved(
+  lineItems: any[],
+  payment?: { lineItemsSubTotal?: string; subTotal?: string } | null
+): number {
+  const lineItemsSubTotal = Number(payment?.lineItemsSubTotal ?? 0) || 0
+  const subTotal = Number(payment?.subTotal ?? 0) || 0
+  if (lineItemsSubTotal > 0 && subTotal >= 0 && lineItemsSubTotal > subTotal) {
+    return lineItemsSubTotal - subTotal
+  }
+  const safeSellingPrice = (item: any): number =>
+    Number(parseFloat(item?.price)) || 0
+  const safePriceAfterDiscount = (item: any): number =>
+    Number(parseFloat(item?.priceAfterDiscount)) || 0
+  const safeQuantity = (item: any): number => Number(item?.quantity) || 0
+  const fromLineItems = (lineItems ?? []).reduce((sum, item) => {
+    const original = safeSellingPrice(item) * safeQuantity(item)
+    const after = safePriceAfterDiscount(item) * safeQuantity(item)
+    return sum + Math.max(0, original - after)
+  }, 0)
+  return roundToTwoDecimals(fromLineItems)
+}
+
+export function formatAmount(amount: number, currencySymbol: string): string {
+  const r = roundToTwoDecimals(amount)
+  return r === Math.round(r)
+    ? `${currencySymbol}${r}`
+    : `${currencySymbol}${r.toFixed(2)}`
+}
+
+export function formatValue(
+  value: number,
+  goalType: GoalType,
+  currencySymbol: string
+): string {
+  if (goalType === 'amount') {
+    return formatAmount(value, currencySymbol)
+  }
+  return String(Math.round(value))
+}
+
+export const emptyObject = {}

package/src/components/src/molecules/checkout-bar/index.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react'
+import {
+  useAddress,
+  useAnalytics,
+  useAppStore,
+  useBlock,
+  useBottomSheetModal,
+  useCart,
+  useCheckoutInfo,
+  useUser,
+} from '@gauntlet/state'
+import { Column, Row, Spacer } from '../../atoms/flex'
+import { Text } from '@gauntlet/components/atoms/text'
+import { AnalyticsEvent } from '@gauntlet/types'
+import { PriceText } from '../price-text'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { View } from 'react-native'
+import { Button } from '@gauntlet/ui-builder'
+import { CheckoutBarV2 } from '../checkout-bar-v2'
+import { CartGoalsWrapper } from '../checkout-bar-v2/goals'
+export interface CheckoutBarProps {
+  screenId: string
+  componentId: string
+  instanceId: string
+}
+export const CheckoutBar = ({
+  screenId,
+  componentId,
+  instanceId,
+}: CheckoutBarProps) => {
+  const block = useBlock(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const settings = useBlockSettings(block)
+  const { payment, count, next } = useCheckoutInfo(screenId)
+  const enableBottomSheetCheckout = settings?.options?.enableBottomSheetCheckout
+  const enableCartGoals = settings?.options?.enableCartGoals
+  if (enableBottomSheetCheckout) {
+    return (
+      <CheckoutBarV2
+        screenId={screenId}
+        componentId={componentId}
+        instanceId={instanceId}
+      />
+    )
+  }
+  if (count === 0) return null
+  const infoText = settings?.options?.infoText ?? 'Price inclusive of all taxes'
+  const paddingTop =
+    style?.root?.paddingTop ??
+    style?.root?.paddingVertical ??
+    style?.root?.padding ??
+    0
+  const paddingLeft =
+    style?.root?.paddingLeft ??
+    style?.root?.paddingHorizontal ??
+    style?.root?.padding ??
+    0
+  const paddingRight =
+    style?.root?.paddingRight ??
+    style?.root?.paddingHorizontal ??
+    style?.root?.padding ??
+    0
+  return (
+    <View style={{ ...style?.root, flexDirection: 'column' }}>
+      <CartGoalsWrapper
+        topOffSet={paddingTop}
+        leftOffSet={paddingLeft}
+        rightOffSet={paddingRight}
+        enableCartGoals={enableCartGoals}
+        style={style.cartGoals}
+      />
+      <Row>
+        <Column style={style?.priceDetails?.root}>
+          <PriceText style={style?.price} currencyCode={payment?.currencyCode}>
+            {payment?.total}
+          </PriceText>
+          <View style={{ marginTop: 4, ...style.infoRoot }}>
+            <Text style={style?.info}>{infoText}</Text>
+          </View>
+        </Column>
+        <Spacer width={16} {...style.spacer} />
+        <CheckoutButton
+          next={next}
+          style={
+            style?.checkoutButtonV2 ?? {
+              root: style?.checkoutButton?.root,
+              text: style?.checkoutButton?.text,
+            }
+          }
+          signinModal={settings?.options?.signinModal}
+          settings={settings}
+        />
+      </Row>
+    </View>
+  )
+}
+const CheckoutButton = ({
+  next,
+  style,
+  signinModal,
+  settings,
+}: {
+  next: string
+  style: any
+  signinModal: {
+    show?: boolean
+    showSkip?: boolean
+    description?: string
+  }
+  settings: any
+}) => {
+  const gotoLink = useAppStore((s) => s.route.gotoLink)
+  const analytics = useAnalytics()
+  const cart = useCart()
+  const address = useAddress()
+  const user = useUser()
+  const { openModal } = useBottomSheetModal()
+  const [status, setStatus] = React.useState('init')
+  return (
+    <Button
+      style={style}
+      text={settings?.source?.buttonTitle ?? 'CHECKOUT'}
+      onPress={async () => {
+        analytics?.sendEvent(AnalyticsEvent.BEGIN_CHECKOUT)
+        if (user.isUserAuthenticated() && address.getFormValidity()) {
+          setStatus('loading')
+          await cart.updateShippingAddress()
+          setStatus('idle')
+        }
+        if (signinModal?.show && !user.data.userDetails.data) {
+          openModal(`checkout-signin-modal`, {
+            signinModal: {
+              showSkip: signinModal?.showSkip,
+              onSkip: () => {
+                gotoLink({ kind: 'screen', value: next })
+              },
+              description: signinModal?.description,
+            },
+          })
+        } else
+          gotoLink({
+            kind: 'screen',
+            value: next,
+            params: { redirectTo: 'cart' },
+          })
+      }}
+      startIcon={settings.options.showCartIconInCheckoutButton && 'cart'}
+      {...settings.options.checkoutButton}
+      loading={status === 'loading'}
+    />
+  )
+}

package/src/components/src/molecules/checkout-bar-v2/cart-custom-attributes-interceptor.tsx

@@ -0,0 +1,130 @@
+import { CartActions, CartState, useAppStore } from '@gauntlet/state'
+import { LocalStorage } from '@gauntlet/local-storage'
+
+const CART_CUSTOM_ATTRIBUTES_BLOCK_ID = 'cart-custom-attributes'
+const CART_CUSTOM_ATTRIBUTES_STORAGE_KEY = 'cart-custom-attributes'
+
+export async function cartCustomAttributesInterceptor(
+  cartData: CartState & CartActions
+): Promise<{ status: 'ok' | 'error'; message?: string }> {
+  try {
+    const config = useAppStore.getState().config.data
+    const currentRoute = useAppStore.getState().route.current()
+    const screenId = currentRoute?.name
+
+    if (!screenId || !config?.screens) {
+      return { status: 'ok' }
+    }
+
+    // Get the current screen
+    const screens = config.screens
+    let screen = screens[screenId]
+
+    // Try to find screen with template variants if they exist
+    // Check common template patterns
+    const possibleScreenKeys = Object.keys(screens).filter((key) =>
+      key.startsWith(`${screenId}--`)
+    )
+    if (possibleScreenKeys.length > 0) {
+      // Use the first template variant found, or fallback to base screenId
+      screen = screens[possibleScreenKeys[0]] ?? screen
+    }
+
+    if (!screen?.layout?.blocks) {
+      return { status: 'ok' }
+    }
+
+    // Find cart-custom-attributes block(s) on the screen
+    const customAttributesBlocks = screen.layout.blocks.filter(
+      (block: any) => block.componentId === CART_CUSTOM_ATTRIBUTES_BLOCK_ID
+    )
+
+    if (customAttributesBlocks.length === 0) {
+      return { status: 'ok' }
+    }
+
+    // Get settings for each block and merge them
+    const settings = config.settings || {}
+    const lineItems = cartData.data.lineItems || []
+
+    if (lineItems.length === 0) {
+      return { status: 'ok' }
+    }
+
+    // Get all stored attribute key-value pairs from LocalStorage (once for all blocks)
+    const storage = LocalStorage.getInstance()
+    const storedAttributes =
+      storage.getJson<Record<string, string>>(
+        CART_CUSTOM_ATTRIBUTES_STORAGE_KEY
+      ) || {}
+
+    // Skip if no attributes stored
+    if (Object.keys(storedAttributes).length === 0) {
+      return { status: 'ok' }
+    }
+
+    // Process each cart-custom-attributes block
+    for (const block of customAttributesBlocks) {
+      const variant = block.variant
+      const componentId = block.componentId
+
+      // Get merged settings (matching useBlockSettings logic)
+      const globalSettings =
+        settings[`${componentId}--${variant}`] ?? settings[componentId] ?? {}
+      const localSettings = {
+        options: block.options ?? {},
+        source: block.source ?? {},
+      }
+
+      const mergedSettings = {
+        ...globalSettings,
+        ...localSettings,
+        options: {
+          ...globalSettings.options,
+          ...localSettings.options,
+        },
+        source: {
+          ...globalSettings.source,
+          ...localSettings.source,
+        },
+      }
+
+      // Determine which line items to update
+      const lineItemsToUpdate =
+        mergedSettings.options?.applyToAllItems !== false
+          ? lineItems.map((item) => ({
+              id: item.id,
+              customAttributes: {
+                ...(item.customAttributes || {}),
+                ...storedAttributes,
+              } as Record<string, string>,
+            }))
+          : mergedSettings.options?.specificLineItemId
+          ? lineItems
+              .filter(
+                (item) => item.id === mergedSettings.options?.specificLineItemId
+              )
+              .map((item) => ({
+                id: item.id,
+                customAttributes: {
+                  ...(item.customAttributes || {}),
+                  ...storedAttributes,
+                } as Record<string, string>,
+              }))
+          : []
+
+      if (lineItemsToUpdate.length === 0) {
+        continue
+      }
+
+      // Update custom attributes with all stored key-value pairs
+      await cartData.updateCustomAttributesForLineItems(lineItemsToUpdate)
+    }
+
+    return { status: 'ok' }
+  } catch (error) {
+    console.error('Error in cartCustomAttributesInterceptor:', error)
+    // Don't block checkout on error, just log it
+    return { status: 'ok' }
+  }
+}

package/src/components/src/molecules/checkout-bar-v2/circle.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import Svg, { Circle } from 'react-native-svg'
+
+export const CircularProgressWrapper = ({
+  size = 40,
+  strokeWidth = 1.5,
+  strokeColor = "#f0f0f0",
+  progress = 0,
+  color = '#009253',
+  fill = 'none',
+  children,
+}) => {
+  const spacing = 8 // 2px spacing between content and border
+  const center = size / 2
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const contentSize = size - (strokeWidth + spacing) * 2
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Svg width={size} height={size} style={StyleSheet.absoluteFill}>
+        {/* Background Circle */}
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          fill={fill}
+        />
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={circumference * (1 - progress / 100)}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${center} ${center})`}
+        />
+      </Svg>
+      <View
+        style={[styles.content, { width: contentSize, height: contentSize }]}
+      >
+        {children}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})