@app-brew/brewery 1.0.0

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

@@ -0,0 +1,115 @@
+import * as React from 'react'
+import { useBlock, useCheckoutInfo } from '@gauntlet/state'
+import { Column } from '@gauntlet/components/atoms/flex'
+import { Text } from '@gauntlet/components/atoms/text'
+import { PriceText } from '@gauntlet/components/molecules/price-text'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { View } from 'react-native'
+import { Button } from '@gauntlet/ui-builder'
+
+export interface CheckoutBarV2Props {
+  screenId: string
+  componentId: string
+  instanceId: string
+}
+
+/**
+ * Web/Studio version of CheckoutBarV2
+ * Shows checkout bar UI using cart data from useCheckoutInfo
+ */
+export const CheckoutBarV2 = ({
+  screenId,
+  componentId,
+  instanceId,
+}: CheckoutBarV2Props) => {
+  const block = useBlock(screenId, componentId, instanceId)
+  let style = useBlockStyle(block)
+  let settings = useBlockSettings(block)
+  const { payment, count } = useCheckoutInfo(screenId)
+
+  if (settings?.options?.enableBottomSheetCheckout) {
+    style = style?.v2
+    settings = {
+      ...settings,
+      options: settings?.options?.v2,
+      source: settings?.source?.v2,
+    }
+  }
+
+  const amountToShow = settings?.options?.amountToShow ?? 'total'
+  const resolvedAmount = payment?.[amountToShow] ?? '0'
+  const infoText = settings?.options?.infoText ?? 'Price inclusive of all taxes'
+
+  if (count === 0) return null
+
+  // Default container style
+  const rootStyle = {
+    alignSelf: 'stretch' as const,
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    ...style?.root,
+  }
+
+  // Default checkout container style
+  const checkoutContainerStyle = {
+    flexDirection: 'row' as const,
+    alignSelf: 'stretch' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+    ...style?.checkoutContainer,
+  }
+
+  // Default price container style
+  const priceContainerStyle = {
+    flex: 1,
+    ...style?.priceContainer?.root,
+  }
+
+  // Default price text style
+  const priceTextStyle = {
+    fontSize: 18,
+    fontWeight: '600' as const,
+    ...style?.priceContainer?.text,
+  }
+
+  // Default info text style
+  const infoTextStyle = {
+    fontSize: 12,
+    color: '#666666',
+    marginTop: 4,
+    ...style?.priceContainer?.info?.text,
+  }
+
+  return (
+    <Column style={rootStyle}>
+      <View style={checkoutContainerStyle}>
+        <Column style={priceContainerStyle}>
+          <PriceText
+            style={priceTextStyle}
+            currencyCode={payment?.currencyCode}
+            priceTemplate={settings?.options?.priceTemplate}
+          >
+            {resolvedAmount}
+          </PriceText>
+          {Boolean(infoText) && (
+            <View style={{ marginTop: 4, ...style?.priceContainer?.info?.root }}>
+              <Text style={infoTextStyle}>{infoText}</Text>
+            </View>
+          )}
+        </Column>
+        <Button
+          style={style?.checkoutButton}
+          text={settings?.source?.buttonTitle ?? 'CHECKOUT'}
+          onPress={() => {
+            // No-op in Studio preview
+          }}
+          startIcon={settings?.options?.showCartIconInCheckoutButton ? 'cart' : undefined}
+          {...settings?.options?.checkoutButton}
+        />
+      </View>
+    </Column>
+  )
+}

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

@@ -0,0 +1,73 @@
+import React from 'react'
+import { CartState, CartActions, useAppStore } from '@gauntlet/state'
+import { GlobalSettings } from '@gauntlet/types'
+import OutOfStockContent from './out-of-stock-modal'
+
+const MODAL_ID = 'out-of-stock-modal'
+const MODAL_BLOCK_ID = `${MODAL_ID}`
+
+export function checkOutOfStockInterceptor(
+  cartData: CartState & CartActions
+): Promise<{ status: 'ok' | 'error'; message?: string }> {
+  // Returning promise to be able to move ahead with checkout only after user interaction
+  // in case of out of stock items
+  return new Promise((resolve) => {
+    const globalSettings = (useAppStore.getState().config.data?.settings?.[
+      'global'
+    ] || {}) as GlobalSettings
+    // Feature is disabled by default. Only enable if explicitly set to true
+    if (!globalSettings.enableOutOfStockCheckOnCart) {
+      return resolve({ status: 'ok' })
+    }
+    const block =
+      useAppStore.getState().config.data?.settings?.[MODAL_BLOCK_ID] ?? {}
+    const styles: any =
+      useAppStore.getState().config.data?.theme?.[MODAL_BLOCK_ID] ?? {}
+    const modal = useAppStore.getState().modal
+    const giftItemIdSet = new Set(
+      cartData.data.giftItemsInCart.map((item) => item.productId)
+    )
+    const outOfStockItems = cartData.data.lineItemsV2
+      .filter((item) => item.merchandise?.availableForSale === false)
+      .filter((item) => !giftItemIdSet.has(item.merchandise.product.id))
+    if (outOfStockItems.length > 0) {
+      // If modal is already open with same ID, resolve to prevent duplicate modals
+      // The existing modal will handle the user interaction
+      if (
+        modal.modalState.isModalOpen &&
+        modal.modalState.currentModalID === MODAL_ID
+      ) {
+        return resolve({
+          status: 'error',
+          message: 'Out of stock modal is already displayed.',
+        })
+      }
+      modal.setShowCloseIcon(false)
+      modal.setModalStyle(styles?.outOfStockModal)
+      modal.setModalContent(
+        <OutOfStockContent
+          options={block?.options}
+          source={block?.source}
+          style={styles?.outOfStockModalContent}
+          outOfStockItems={outOfStockItems}
+          onCheckout={() => {
+            modal.setModalVisibility(false)
+            resolve({ status: 'ok' })
+          }}
+          onCancel={() => {
+            modal.setModalVisibility(false)
+            resolve({
+              status: 'error',
+              message: 'No items available for checkout.',
+            })
+          }}
+        />,
+        MODAL_ID
+      )
+      modal.setModalVisibility(true)
+      modal.setModalHeight(block?.options?.modalHeight ?? 370)
+    } else {
+      return resolve({ status: 'ok' })
+    }
+  })
+}

package/src/components/src/molecules/checkout-bar-v2/out-of-stock-modal/index.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react'
+import { View, ScrollView } from 'react-native'
+import { Text } from '@gauntlet/components/atoms/text'
+import { Button, Icon } from '@gauntlet/ui-builder'
+import {
+  BaseLineItemV2,
+  useAppStore,
+  useRemoveItemFromCart,
+  useWishlist,
+} from '@gauntlet/state'
+import { styles } from './styles'
+import { deepMerge } from '@gauntlet/components/utils'
+import { OutOfStockItem } from './item'
+import { EnhancedProduct, GiftLineItem } from '@gauntlet/types'
+import { Header } from '@gauntlet/components/atoms/header'
+import { HeaderOptions } from '@gauntlet/components/atoms/header/types'
+
+interface OutOfStockContentProps {
+  outOfStockItems: Array<BaseLineItemV2>
+  onCheckout: () => void
+  onCancel: () => void
+  source?: {
+    removeButton?: string
+    wishlistButton?: string
+    title?: string
+    subtitle?: string
+    message?: string
+  }
+  options?: HeaderOptions
+  style?: Record<string, any>
+}
+
+const defaultLabels = {
+  removeButton: 'Remove',
+  wishlistButton: 'Move to Wishlist',
+  title: 'Instead Move to Wishlist?',
+  subtitle: 'Sorry for the inconvenience caused',
+  message: '{{itemCount}} item{{plural}} {{are-or-is}} Out of stock', // are or is out of stock
+}
+
+const headerOptions = {
+  heading: {
+    numberOfLines: 1,
+  },
+  subHeading: {
+    numberOfLines: 1,
+  },
+}
+
+export function OutOfStockContent({
+  outOfStockItems,
+  onCheckout,
+  onCancel,
+  source = {},
+  style = {},
+  options = headerOptions,
+}: OutOfStockContentProps) {
+  const contentLabels = source ?? defaultLabels
+  const removeItemFromCart = useRemoveItemFromCart()
+  const { addItemsToWishlist, isPresentInWishlist } = useWishlist()
+
+  const itemCount = outOfStockItems.length
+  const plural = itemCount > 1 ? 's' : ''
+  const areOrIs = itemCount > 1 ? 'are' : 'is'
+
+  const title = contentLabels.title ?? defaultLabels.title
+  const subtitle = contentLabels.subtitle ?? defaultLabels.subtitle
+  const removeButton = contentLabels.removeButton ?? defaultLabels.removeButton
+  const wishlistButton =
+    contentLabels.wishlistButton ?? defaultLabels.wishlistButton
+  const message = contentLabels.message ?? defaultLabels.message
+  const formattedMessage = message
+    .replace('{{itemCount}}', itemCount.toString())
+    .replace('{{plural}}', plural)
+    .replace('{{are-or-is}}', areOrIs)
+
+  const getProductByHandles = useAppStore(
+    (store) => store.products.getByHandles
+  )
+
+  const mergedStyles = React.useMemo(() => {
+    return deepMerge(styles, style)
+  }, [styles, style])
+
+  const removeItemsFromCart = async (lineItems: BaseLineItemV2[]) => {
+    return await removeItemFromCart(lineItems.map((item) => item.id))
+  }
+
+  const addItemsToWishlistWithProductCacheFetch = async (
+    lineItems: BaseLineItemV2[]
+  ) => {
+    const productLineItems = lineItems.filter(
+      (item) => item.merchandise.price.amount > 0
+    )
+    if (productLineItems.length === 0) return
+    const variantMap: Map<string, BaseLineItemV2['merchandise']['id']> =
+      new Map()
+    productLineItems.forEach((item) => {
+      if (item.merchandise?.id && item.merchandise?.product?.handle) {
+        variantMap.set(item.merchandise.product.handle, item.merchandise.id)
+      }
+    })
+    const products = await getProductByHandles(
+      productLineItems.map((item) => item.merchandise.product.handle)
+    )
+    const productHandleMap = new Map<string, EnhancedProduct>()
+    products.forEach((p) => {
+      if (p.status === 'idle') {
+        productHandleMap.set(p.data.handle, p.data)
+      }
+    })
+    const uniqueProductsToAdd = Array.from(productHandleMap.keys())
+      .filter((handle) => !isPresentInWishlist(handle))
+      .map((handle) => productHandleMap.get(handle) as EnhancedProduct)
+    return await addItemsToWishlist(
+      uniqueProductsToAdd.map((p) => ({
+        handle: p.handle,
+        variantId: variantMap.get(
+          p.handle
+        ) as BaseLineItemV2['merchandise']['id'],
+      }))
+    )
+  }
+
+  const handleRemove = async () => {
+    await removeItemsFromCart(outOfStockItems)
+    if (getCartItemsCount() === 0) {
+      onCancel()
+      return
+    }
+    onCheckout()
+  }
+
+  const handleMoveToWishlist = async () => {
+    const moveToWishlistTasks = Promise.all([
+      addItemsToWishlistWithProductCacheFetch(outOfStockItems),
+      removeItemsFromCart(outOfStockItems),
+    ])
+    await moveToWishlistTasks
+    if (getCartItemsCount() === 0) {
+      onCancel()
+      return
+    }
+    onCheckout()
+  }
+
+  const getCartItemsCount = () => {
+    const newItems = useAppStore.getState().cart.data.lineItemsV2
+    const giftItems = useAppStore.getState().cart.data.giftItemsInCart
+    const giftItemsIdSet = new Set(giftItems.map((item) => item.productId))
+    return newItems.filter(
+      (item) => !giftItemsIdSet.has(item.merchandise.product.id)
+    ).length
+  }
+
+  return (
+    <View style={mergedStyles.container}>
+      <Header
+        heading={title}
+        subHeading={subtitle}
+        style={mergedStyles.header}
+        options={options}
+      />
+      <View style={mergedStyles.separator} />
+      <View style={mergedStyles.itemsContainer}>
+        <View style={mergedStyles.messageContainer}>
+          <Icon
+            iconId="cartCancel"
+            width={mergedStyles.cartCancelIcon.width}
+            height={mergedStyles.cartCancelIcon.height}
+            style={mergedStyles.cartCancelIcon}
+          />
+          <Text style={mergedStyles.message}>{formattedMessage}</Text>
+        </View>
+        <ScrollView
+          style={mergedStyles.scrollContainer}
+          contentContainerStyle={mergedStyles.listContainer}
+          horizontal
+        >
+          {outOfStockItems.map((item, index) => (
+            <OutOfStockItem
+              item={item}
+              style={mergedStyles}
+              key={item.id}
+              index={index}
+            />
+          ))}
+        </ScrollView>
+      </View>
+      <View style={mergedStyles.actionsContainer}>
+        <View style={mergedStyles.removeButtonContainer}>
+          <Button
+            text={removeButton}
+            style={{
+              kind: 'secondary',
+              ...mergedStyles.removeButton,
+            }}
+            onPress={handleRemove}
+          />
+        </View>
+        <View style={mergedStyles.wishlistButtonContainer}>
+          <Button
+            text={wishlistButton}
+            style={{
+              kind: 'primary',
+              ...mergedStyles.wishlistButton,
+            }}
+            onPress={handleMoveToWishlist}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default OutOfStockContent

package/src/components/src/molecules/checkout-bar-v2/out-of-stock-modal/item.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { ScaledImage } from '@gauntlet/components/atoms/image'
+import { Text } from '@gauntlet/components/atoms/text'
+import { View } from 'react-native'
+import { PriceText } from '@gauntlet/components/molecules/price-text'
+import { BaseLineItemV2 } from '@gauntlet/state'
+
+interface OutOfStockItemProps {
+  item: BaseLineItemV2
+  index: number
+  style: Record<string, any>
+}
+
+export function OutOfStockItem({
+  item,
+  style,
+  index,
+}: OutOfStockItemProps): JSX.Element {
+  return (
+    <View
+      style={[style.itemContainer, index === 0 && style.firstItemContainer]}
+    >
+      <View style={style.imageContainer}>
+        {Boolean(item.merchandise?.image?.url) ? (
+          <ScaledImage
+            uri={item.merchandise.image.url}
+            width={style?.image?.width ?? 80}
+            height={style?.image?.height ?? 80}
+            aspectRatio={style?.image?.aspectRatio}
+            resizeMode={style?.image?.resizeMode ?? 'contain'}
+            style={style.image}
+          />
+        ) : (
+          <View style={style.placeholderImage} />
+        )}
+      </View>
+      <View style={style.detailsContainer}>
+        <View>
+          <Text style={style.itemTitle} numberOfLines={2} ellipsizeMode="tail">
+            {item.merchandise?.product?.title || item.merchandise?.title || ''}
+          </Text>
+          {item.merchandise?.selectedOptions?.map((option) => {
+            const variantValue = option?.value?.toLowerCase()
+            if (variantValue === 'default title') return null
+            return (
+              <Text key={option.name} style={style.variantText}>
+                {`${option.name}: ${option.value}`}
+              </Text>
+            )
+          })}
+        </View>
+        <View style={style.priceRow}>
+          {!!item.merchandise?.price && (
+            <>
+              <PriceText
+                style={style.discountedPrice}
+                currencyCode={item.merchandise.price.currencyCode}
+                priceTemplate="{{symbol}}{{price}}"
+              >
+                {String(item.merchandise.price.amount)}
+              </PriceText>
+              {!!item.merchandise.compareAtPrice &&
+                Number(item.merchandise.compareAtPrice.amount) >
+                  Number(item.merchandise.price.amount) && (
+                  <>
+                    <PriceText
+                      style={style.compareAtPrice}
+                      currencyCode={
+                        item.merchandise.compareAtPrice.currencyCode
+                      }
+                      priceTemplate="{{symbol}}{{price}}"
+                    >
+                      {String(item.merchandise.compareAtPrice.amount)}
+                    </PriceText>
+                    <View style={style.savingsChip}>
+                      <Text style={style.savingsText}>
+                        {Math.round(
+                          (1 -
+                            Number(item.merchandise.price.amount) /
+                              Number(item.merchandise.compareAtPrice.amount)) *
+                            100
+                        )}
+                        % OFF
+                      </Text>
+                    </View>
+                  </>
+                )}
+            </>
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/components/src/molecules/checkout-bar-v2/out-of-stock-modal/styles.ts

@@ -0,0 +1,136 @@
+import { StyleSheet } from 'react-native'
+// Combined styles with default styling
+export const styles = {
+  messageContainer: {
+    flexDirection: 'row',
+    marginLeft: 16,
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  message: {
+    kind: 'heading-s',
+    color: 'textdanger',
+  },
+  imageContainer: {
+    marginRight: 12,
+    height: 80,
+    width: 80,
+  },
+  image: {
+    borderRadius: 6,
+  },
+  placeholderImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+  },
+  detailsContainer: {
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+  },
+  itemTitle: {
+    kind: 'label-s',
+    color: 'textprimary',
+  },
+  cartCancelIcon: {
+    color: 'textdanger',
+    marginRight: 8,
+    width: 20,
+    height: 20,
+  },
+  variantText: {
+    kind: 'paragraph-xs',
+    marginBottom: 2,
+    color: 'textsecondary',
+  },
+  priceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 'auto',
+    alignSelf: 'flex-start',
+  },
+  discountedPrice: {
+    marginRight: 8,
+    kind: 'heading-s',
+    color: 'textprimary',
+  },
+  compareAtPrice: {
+    marginRight: 8,
+    kind: 'label-s',
+    textDecorationLine: 'line-through',
+    color: 'texttertiary',
+  },
+  savingsChip: {
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    marginLeft: 4,
+    backgroundColor: 'brandprimary',
+    borderRadius: 8,
+  },
+  savingsText: {
+    kind: 'label-xs',
+    color: 'textprimaryinverse',
+  },
+  actionsContainer: {
+    marginTop: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent',
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    paddingTop: 16,
+  },
+  contentContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  itemsContainer: {
+    flex: 1,
+    paddingVertical: 16,
+    overflow: 'hidden',
+    borderRadius: 16,
+    backgroundColor: 'bgdanger',
+  },
+  removeButtonContainer: {
+    marginRight: 16,
+  },
+  wishlistButtonContainer: {
+    flex: 1,
+  },
+  header: {
+    kind: 'header-m',
+    root: { flex: 0 },
+  },
+  separator: {
+    height: 1,
+    marginBottom: 16,
+    backgroundColor: 'borderdefault',
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  headerContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  listContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  itemContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    width: 272,
+    marginRight: 16,
+  },
+  firstItemContainer: {
+    marginLeft: 16,
+  },
+}