@app-brew/brewery 1.0.0

package/src/components/src/molecules/quantity-selector/index.tsx

@@ -0,0 +1,596 @@
+/* eslint-disable react-native/no-color-literals */
+import * as React from 'react'
+import { Pressable, ScrollView, TextInput, View } from 'react-native'
+
+import { Row, Spacer } from '../../atoms/flex'
+import { Text } from '../../atoms/text'
+import Toast from 'react-native-toast-message'
+import RadioGroup from 'react-native-radio-buttons-group'
+import { BaseLineItem, QuantitySelectorType } from '@gauntlet/types'
+import { useAppStore, useDeviceDimensions, useModal } from '@gauntlet/state'
+import { NavIconIds, getNavIcon } from '@gauntlet/icons'
+import { canAddToCartBasedOnGroupRestrictions } from '../product-components/add-to-cart'
+import { DropdownPicker } from '../dropdown-picker'
+import { Button, Icon } from '@gauntlet/ui-builder'
+import { getBorderRadiusValue } from '@gauntlet/components/style-utils'
+
+interface QuantitySelectorInterceptorResponse {
+  status: string
+  error?: {
+    code: string
+    message: string
+  }
+}
+export const quantitySelectorInterceptors: Array<
+  (
+    lineItem: BaseLineItem,
+    newQuantity: Number
+  ) => Promise<QuantitySelectorInterceptorResponse | undefined>
+> = []
+
+interface QuantitySelectorProviderProps {
+  type: QuantitySelectorType
+}
+
+interface QuantitySelectorProps {
+  disabled?: boolean
+  item: BaseLineItem
+  updateQuantity: (quantity: number) => void
+  style: any
+  enableQuantityRestriction: boolean
+  maxQuantityInCart: number
+  hideQuantityButtons?: boolean
+  maxVariantInventory?: number
+  quantityOptions?: {
+    prefix?: string
+    suffix?: string
+    dropdownPicker?: Record<string, any>
+  }
+}
+
+export function QuantitySelector({
+  type = QuantitySelectorType.INC_DEC,
+  disabled = false,
+  item,
+  updateQuantity = () => {},
+  enableQuantityRestriction,
+  style,
+  maxQuantityInCart,
+  hideQuantityButtons = false,
+  maxVariantInventory,
+  quantityOptions,
+}: QuantitySelectorProviderProps & QuantitySelectorProps) {
+  const quantitySelector: {
+    [type in QuantitySelectorType]: React.ReactElement
+  } = React.useMemo(() => {
+    return {
+      [QuantitySelectorType.MODAL]: (
+        <ModalQuantitySelector
+          disabled={disabled}
+          item={item}
+          updateQuantity={updateQuantity}
+          style={style}
+          enableQuantityRestriction={enableQuantityRestriction}
+          maxQuantityInCart={maxQuantityInCart}
+          hideQuantityButtons={hideQuantityButtons}
+          maxVariantInventory={maxVariantInventory}
+          quantityOptions={quantityOptions}
+        />
+      ),
+      [QuantitySelectorType.INC_DEC]: (
+        <IncDecQuantitySelector
+          disabled={disabled}
+          item={item}
+          updateQuantity={updateQuantity}
+          style={style}
+          enableQuantityRestriction={enableQuantityRestriction}
+          maxQuantityInCart={maxQuantityInCart}
+          hideQuantityButtons={hideQuantityButtons}
+          key={item.id}
+        />
+      ),
+
+      [QuantitySelectorType.DROPDOWN]: (
+        <DropdownQuantitySelector
+          disabled={disabled}
+          item={item}
+          updateQuantity={updateQuantity}
+          style={style}
+          enableQuantityRestriction={enableQuantityRestriction}
+          maxQuantityInCart={maxQuantityInCart}
+          hideQuantityButtons={hideQuantityButtons}
+          maxVariantInventory={maxVariantInventory}
+          quantityOptions={quantityOptions}
+        />
+      ),
+    }
+  }, [
+    disabled,
+    item,
+    updateQuantity,
+    style,
+    enableQuantityRestriction,
+    maxQuantityInCart,
+    hideQuantityButtons,
+    maxVariantInventory,
+    quantityOptions,
+  ])
+
+  return (
+    quantitySelector[type] ?? (
+      <IncDecQuantitySelector
+        disabled={disabled}
+        item={item}
+        updateQuantity={updateQuantity}
+        style={style}
+        enableQuantityRestriction={enableQuantityRestriction}
+        maxQuantityInCart={maxQuantityInCart}
+        hideQuantityButtons={hideQuantityButtons}
+      />
+    )
+  )
+}
+
+function ModalQuantitySelector({
+  disabled = false,
+  item,
+  updateQuantity,
+  style,
+  enableQuantityRestriction,
+  maxQuantityInCart,
+  hideQuantityButtons = false,
+  maxVariantInventory,
+  quantityOptions,
+}: QuantitySelectorProps) {
+  const Chevron = getNavIcon({ id: NavIconIds.chevron })
+
+  const { height } = useDeviceDimensions()
+  const modalHeight = style?.modal?.height ?? height / 2
+  const {
+    setModalContent,
+    setModalVisibility,
+    setModalHeight,
+    setShowCloseIcon,
+  } = useModal()
+
+  const onPress = () => {
+    if (hideQuantityButtons) return
+    setModalVisibility(true)
+    setModalContent(
+      <ModalContent
+        item={item}
+        updateQuantity={updateQuantity}
+        style={style?.modal}
+        enableQuantityRestriction={enableQuantityRestriction}
+        maxQuantityInCart={maxQuantityInCart}
+        disabled={disabled}
+        hideQuantityButtons={hideQuantityButtons}
+        maxVariantInventory={maxVariantInventory}
+        quantityOptions={quantityOptions}
+      />,
+      'quantity'
+    )
+    setModalHeight(modalHeight)
+    setShowCloseIcon(true)
+  }
+
+  return (
+    <Pressable
+      disabled={disabled || Number(item.priceAfterDiscount) === 0}
+      hitSlop={40}
+      onPress={onPress}
+    >
+      <Row style={{ alignItems: 'center' }}>
+        <Text
+          style={{ fontSize: 12, ...style?.text }}
+        >{`Quantity: ${item.quantity} `}</Text>
+        {disabled || hideQuantityButtons ? null : (
+          <Icon iconId="chevron-down" {...style?.chevronIcon} />
+        )}
+      </Row>
+    </Pressable>
+  )
+}
+
+function ModalContent({
+  item,
+  updateQuantity,
+  style,
+  enableQuantityRestriction,
+  maxQuantityInCart,
+  disabled,
+  hideQuantityButtons,
+  maxVariantInventory,
+  quantityOptions,
+}: QuantitySelectorProps) {
+  const [selectedQuantity, setSelectedQuantity] = React.useState<string>(
+    item.quantity.toString()
+  )
+
+  const makeRadioButtonProps = React.useMemo(() => {
+    let maxQuantity = maxQuantityInCart
+    if (maxQuantityInCart && maxVariantInventory) {
+      maxQuantity = Math.min(maxQuantityInCart, maxVariantInventory)
+    }
+    return Array.from(Array(maxQuantity), (_, i) => {
+      const option = (i + 1).toString()
+      return {
+        id: option,
+        label: option,
+        value: option,
+        size: 20,
+        containerStyle: {
+          ...style.radioButtonContainer,
+          backgroundColor: `${
+            selectedQuantity === option
+              ? style.radioButtonContainer.backgroundColor
+              : 'transparent'
+          }`,
+        },
+        labelStyle: style.radioButtonLabel,
+        onPress: (v: string) => setSelectedQuantity(v),
+        selected: selectedQuantity === option,
+      }
+    })
+  }, [
+    selectedQuantity,
+    style.radioButtonContainer,
+    style.radioButtonLabel,
+    maxQuantityInCart,
+    maxVariantInventory,
+  ])
+  return (
+    <View style={{ flex: 1 }}>
+      <Text style={style.title}>{item.title}</Text>
+      <Spacer height={16} />
+      <Text style={style.heading}>Update quantity</Text>
+      <Spacer height={16}></Spacer>
+      <ScrollView>
+        <RadioGroup
+          containerStyle={{
+            alignItems: 'flex-start',
+            ...style.radioGroupContainer,
+          }}
+          radioButtons={makeRadioButtonProps}
+        />
+      </ScrollView>
+      <Spacer height={16} />
+      <Button
+        text="Update Quantity"
+        onPress={() => {
+          updateQuantity && updateQuantity(Number(selectedQuantity))
+        }}
+        style={style.updateQuantityButtonV2 ?? style.updateQuantityButton}
+        disabled={disabled}
+      ></Button>
+    </View>
+  )
+}
+
+export function IncDecQuantitySelector({
+  disabled,
+  item,
+  updateQuantity,
+  style,
+  enableQuantityRestriction,
+  maxQuantityInCart,
+  hideQuantityButtons = false,
+}: QuantitySelectorProps) {
+  const PlusIcon = getNavIcon({ id: NavIconIds.plus })
+  const MinusIcon = getNavIcon({ id: NavIconIds.minus })
+  const rootStyle = style.root ?? {}
+  const enableGroupQuantityRestriction =
+    useAppStore(
+      (s) =>
+        s.config?.data?.settings?.['global']?.enableGroupQuantityRestriction
+    ) ?? false
+  const groupQuantityRestriction =
+    useAppStore(
+      (s) => s.config?.data?.settings?.['global']?.groupQuantityRestriction
+    ) ?? {}
+  const groupRestrictionsToQuantityMap = useAppStore(
+    (s) => s.cart?.data?.groupRestrictionsToQuantity
+  )
+  const productMaxGroupQuantityAllowed = useAppStore((s) => {
+    if (item.productHandle && enableGroupQuantityRestriction) {
+      return s.products.items[item.productHandle]?.data?.maxGroupQuantity
+    }
+    return { _default: 65535 }
+  })
+
+  /**
+   * if its a child item hide quantity selector action buttons
+   */
+
+  const isChildCartItem =
+    Boolean(item.customAttributes?.['_parentId']) || hideQuantityButtons
+
+  const resolvedStyle = React.useMemo(() => {
+    const borderRadius = getBorderRadiusValue(rootStyle)
+    if (borderRadius !== undefined) {
+      rootStyle.borderRadius = borderRadius
+    }
+    return rootStyle
+  }, [rootStyle])
+
+  return (
+    <Row
+      style={{
+        justifyContent: 'space-between',
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        ...resolvedStyle,
+      }}
+    >
+      {!isChildCartItem && (
+        <Pressable
+          hitSlop={16}
+          disabled={item.quantity < 2 || disabled}
+          onPress={async () => {
+            // quantitySelectorInterceptors
+            for (const interceptor of quantitySelectorInterceptors) {
+              const result = await interceptor(item, item.quantity - 1)
+              if (result?.status === 'error') {
+                console.log('in quantity selector', result?.error?.message)
+                return
+              }
+            }
+
+            const res: any = await updateQuantity(item.quantity - 1)
+            if (res.status === 'error') {
+              if (res.error.message) {
+                Toast.show({ type: 'error', text1: res.error.message })
+              }
+            }
+            if (res.warning) {
+              if (res.warning.message) {
+                Toast.show({ type: 'error', text1: res.warning.message })
+              }
+            }
+            return
+          }}
+          style={style.incDecButton}
+        >
+          <MinusIcon
+            {...style.incDecIcon}
+            width={style.incDecIcon.width}
+            fill={style.incDecIcon.color}
+            {...style.incDecIcon}
+          />
+        </Pressable>
+      )}
+      <TextInput
+        editable={false}
+        style={style.quantityInput}
+        value={String(item.quantity)}
+      />
+      {!isChildCartItem && (
+        <Pressable
+          hitSlop={16}
+          disabled={disabled}
+          onPress={async () => {
+            // quantitySelectorInterceptors
+            for (const interceptor of quantitySelectorInterceptors) {
+              const result = await interceptor(item, item.quantity + 1)
+              if (result?.status === 'error') {
+                return
+              }
+            }
+
+            if (!enableQuantityRestriction && !enableGroupQuantityRestriction) {
+              const res: any = await updateQuantity(item.quantity + 1)
+
+              if (res.status === 'error') {
+                if (res.error.message) {
+                  Toast.show({ type: 'error', text1: res.error.message })
+                }
+              }
+              if (res.warning) {
+                if (res.warning.message) {
+                  Toast.show({ type: 'error', text1: res.warning.message })
+                }
+              }
+              return
+            }
+
+            if (
+              enableQuantityRestriction &&
+              item.quantity >= maxQuantityInCart
+            ) {
+              Toast.show({
+                text1: `More than ${maxQuantityInCart} quantity of this item is not allowed.`,
+                type: 'error',
+              })
+              return
+            }
+
+            if (enableGroupQuantityRestriction) {
+              const { isAllowed, maxAllowed } =
+                canAddToCartBasedOnGroupRestrictions(
+                  groupRestrictionsToQuantityMap,
+                  groupQuantityRestriction,
+                  item.tags,
+                  item.quantity,
+                  productMaxGroupQuantityAllowed
+                )
+              if (!isAllowed) {
+                Toast.show({
+                  text1: `Max quantity ${maxAllowed} is allowed.`,
+                  type: 'error',
+                })
+                return
+              }
+            }
+
+            const res: any = await updateQuantity(item.quantity + 1)
+            if (res.status === 'error') {
+              if (res.error.message) {
+                Toast.show({ type: 'error', text1: res.error.message })
+              }
+            }
+            if (res.warning) {
+              if (res.warning.message) {
+                Toast.show({ type: 'error', text1: res.warning.message })
+              }
+            }
+          }}
+          style={style.incDecButton}
+        >
+          <PlusIcon
+            {...style.incDecIcon}
+            width={style.incIcon?.width ?? style.incDecIcon.width}
+            height={style.incIcon?.height ?? style.incDecIcon.height}
+            fill={style.incIcon?.fill ?? style.incDecIcon.color}
+            {...style.incDecIcon}
+          />
+        </Pressable>
+      )}
+    </Row>
+  )
+}
+
+function DropdownQuantitySelector({
+  enableQuantityRestriction,
+  item,
+  maxQuantityInCart,
+  style,
+  updateQuantity,
+  disabled,
+  hideQuantityButtons = false,
+  maxVariantInventory,
+  quantityOptions,
+}: QuantitySelectorProps) {
+  /**
+   * enableQuantityRestriction - no need to read enableQuantityRestriction flag here, because whatever maxQuantityInCart is passed, it will be used to restrict the quantity
+   */
+  const [selectedQuantity, setSelectedQuantity] = React.useState<string>(
+    item.quantity.toString()
+  )
+
+  React.useEffect(() => {
+    if (item.quantity !== Number(selectedQuantity))
+      setSelectedQuantity(item.quantity.toString())
+  }, [item.quantity]) // we should not included selectedQuantity
+
+  const enableGroupQuantityRestriction =
+    useAppStore.getState().config?.data?.settings?.['global']
+      ?.enableGroupQuantityRestriction ?? false
+
+  const productMaxGroupQuantityAllowed = useAppStore((s) => {
+    if (item.productHandle && enableGroupQuantityRestriction) {
+      return s.products.items[item.productHandle]?.data?.maxGroupQuantity
+    }
+    return { _default: 65535 }
+  })
+
+  const isChildCartItem =
+    Boolean(item.customAttributes?.['_parentId']) || hideQuantityButtons
+
+  const isDisabled = disabled || isChildCartItem
+
+  const quantities = React.useMemo(() => {
+    if (hideQuantityButtons) return
+    let maxQuantity = maxQuantityInCart
+    if (maxQuantityInCart && maxVariantInventory) {
+      maxQuantity = Math.min(maxQuantityInCart, maxVariantInventory)
+    }
+    const qtyList = Array.from(Array(maxQuantity), (_, i) => {
+      const option = (i + 1).toString()
+      return {
+        label: option,
+        value: option,
+      }
+    })
+    return qtyList
+  }, [maxQuantityInCart, maxVariantInventory, hideQuantityButtons])
+
+  const quantityPrefix = quantityOptions?.prefix ?? ''
+  const quantitySuffix = quantityOptions?.suffix ?? ''
+
+  const dropdownPickerStyle = React.useMemo(() => {
+    const disabledStyle = {
+      ...style.dropdownPicker,
+      ...style.dropdownPicker.disabled,
+      dropdown: {
+        ...style.dropdownPicker.dropdown,
+        opacity: 0.5,
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        ...style.dropdownPicker.disabled?.dropdown,
+      },
+    }
+    return !isDisabled ? style.dropdownPicker : disabledStyle
+  }, [isDisabled, style.dropdownPicker])
+
+  if (!quantities) return null
+
+  return (
+    <DropdownPicker
+      items={quantities}
+      onChange={async (value) => {
+        const groupQuantityRestriction =
+          useAppStore.getState().config?.data?.settings?.['global']
+            ?.groupQuantityRestriction ?? {}
+        const groupRestrictionsToQuantityMap =
+          useAppStore.getState().cart?.data?.groupRestrictionsToQuantity
+
+        for (const interceptor of quantitySelectorInterceptors) {
+          const result = await interceptor(item, Number(value))
+          if (result?.status === 'error') {
+            console.log('in quantity selector', result?.error?.message)
+            return
+          }
+        }
+
+        if (Number(value) > Number(selectedQuantity)) {
+          if (enableGroupQuantityRestriction) {
+            const { isAllowed, maxAllowed } =
+              canAddToCartBasedOnGroupRestrictions(
+                groupRestrictionsToQuantityMap,
+                groupQuantityRestriction,
+                item.tags,
+                Number(value),
+                productMaxGroupQuantityAllowed
+              )
+            if (!isAllowed) {
+              Toast.show({
+                text1: `Max quantity ${maxAllowed} is allowed.`,
+                type: 'error',
+              })
+              return
+            }
+          }
+        }
+
+        const res: any = await updateQuantity(Number(value))
+        setSelectedQuantity(value)
+        if (res.status === 'error') {
+          if (res.error.message) {
+            Toast.show({ type: 'error', text1: res.error.message })
+          }
+          setSelectedQuantity(item.quantity ? item.quantity.toString() : '0')
+          return
+        }
+        if (res.warning) {
+          if (res.warning.message) {
+            Toast.show({ type: 'error', text1: res.warning.message })
+          }
+        }
+      }}
+      selectedValue={selectedQuantity}
+      style={dropdownPickerStyle}
+      disable={isDisabled}
+      placeholder={`${item.quantity}`}
+      renderLeftIcon={
+        quantityPrefix
+          ? () => <Text style={style.qtyText}>{quantityPrefix}</Text>
+          : undefined
+      }
+      renderRightIcon={
+        quantitySuffix
+          ? () => <Text style={style.qtyText}>{quantitySuffix}</Text>
+          : undefined
+      }
+      {...quantityOptions?.dropdownPicker}
+    />
+  )
+}

package/src/components/src/molecules/review-label/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Text } from '@gauntlet/components/atoms/text'
+import { View } from 'react-native'
+
+interface ReviewLabelProps {
+  style: Record<string, any>
+  avgRatings?: string
+  numberOfReviews?: string
+}
+export function ReviewLabel({
+  style,
+  avgRatings,
+  numberOfReviews,
+}: ReviewLabelProps) {
+  if (Number(avgRatings) > 0 && Number(numberOfReviews) > 0)
+    return (
+      <View
+        style={[
+          {
+            backgroundColor: '#fff',
+            paddingHorizontal: 4,
+            marginHorizontal: 8,
+          },
+          style?.root,
+        ]}
+      >
+        <Text style={style?.text}>
+          {avgRatings} &#9733; | {numberOfReviews}
+        </Text>
+      </View>
+    )
+  return null
+}

package/src/components/src/molecules/rich-text/index.tsx

@@ -0,0 +1 @@
+export * from './rich-text'

package/src/components/src/molecules/rich-text/rich-text.tsx

@@ -0,0 +1 @@
+export { RichText, InternalRichText, type RichTextProps } from '@gauntlet/ui-builder'

package/src/components/src/molecules/rich-text/rich-text.web.tsx

@@ -0,0 +1 @@
+export { RichText } from '@gauntlet/ui-builder'