@app-brew/brewery 1.0.0

package/src/components/src/organisms/discount-code-input/index.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react'
+import {
+  useAppStore,
+  useApplyDiscountCode,
+  useBlock,
+  useDeviceDimensions,
+  useLineItems,
+  useRemoveDiscountCode,
+} from '@gauntlet/state'
+import { Button } from '../../atoms/button'
+import { Section } from '../../atoms/section'
+import { Text } from '../../atoms/text'
+import { Pressable, TextInput, View } from 'react-native'
+import { getNavIcon } from '@gauntlet/icons'
+import { Row } from '../../atoms/flex'
+import { BaseBlockProps, DiscountCodeInputConfig } from '@gauntlet/types'
+import { useBlockStyle } from '../../style-utils'
+
+export function DiscountCodeInput({
+  screenId,
+  componentId,
+  instanceId,
+}: BaseBlockProps) {
+  const block = useBlock<DiscountCodeInputConfig>(
+    screenId,
+    componentId,
+    instanceId
+  )
+  const style = useBlockStyle(block) as DiscountCodeInputConfig['style']
+  const { data } = useAppStore((store) => {
+    return store.cart
+  })
+  const applyDiscountCode = useApplyDiscountCode()
+  const removeDiscountCode = useRemoveDiscountCode()
+  const { width } = useDeviceDimensions()
+  const inputRef = React.useRef<any>(null)
+  const hideOnNewerVersion = block?.options?.hideOnNewerVersion
+
+  const [couponCode, setCouponCode] = React.useState<string>('')
+  const [error, setError] = React.useState<string>('')
+  const { items } = useLineItems()
+
+  if (!block || items.length === 0 || hideOnNewerVersion) return null
+
+  const onPress = async () => {
+    if (!couponCode) {
+      return
+    }
+
+    const cart = await applyDiscountCode(couponCode)
+    if (cart?.discount?.error?.trim()) {
+      setError(cart?.discount?.error as string)
+    }
+    return cart
+  }
+  const Discount = getNavIcon({ id: block?.source?.couponCard?.discount?.icon })
+  const Cancel = getNavIcon({ id: block?.source?.couponCard?.cancel?.icon })
+  const inputWidth = width * 0.7
+  return (
+    <Section
+      style={{
+        ...style?.root,
+      }}
+    >
+      <Text
+        style={{
+          ...style.title,
+        }}
+      >
+        {block.source?.static?.title}
+      </Text>
+      <Row
+        style={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flex: 1,
+        }}
+      >
+        <TextInput
+          ref={inputRef}
+          style={{
+            width: inputWidth,
+            borderColor: error
+              ? style?.input?.error?.borderColor
+              : style?.input?.success?.borderColor,
+            ...style?.input?.root,
+          }}
+          placeholder={block.source?.inputFieldPlaceholder as string}
+          placeholderTextColor={style?.input?.placeholder?.color}
+          onChangeText={(text) => {
+            setCouponCode(text)
+            setError('')
+          }}
+        />
+        <Button
+          title={block.source?.buttonText as string}
+          onPress={onPress}
+          style={{
+            text: { ...style?.applyButton?.text },
+            ...style?.applyButton?.root,
+          }}
+        />
+      </Row>
+      {!!error && (
+        <Text
+          style={{
+            width: inputWidth,
+            ...style?.errorMessage,
+          }}
+        >
+          {error}
+        </Text>
+      )}
+      {data?.discount?.code && (
+        <Row style={{ marginTop: 16 }}>
+          <View
+            style={{
+              ...style?.couponCode?.root,
+            }}
+          >
+            <Discount
+              height={style?.couponCode?.icon?.height}
+              width={style?.couponCode?.icon?.width}
+              fill={style?.couponCode?.icon?.fill}
+            />
+            <Text
+              style={{
+                ...style?.couponCode?.text,
+              }}
+            >
+              {data?.discount?.code}
+            </Text>
+            <Pressable
+              onPress={() => {
+                inputRef.current.value = ''
+                removeDiscountCode()
+              }}
+              hitSlop={80}
+              style={{ height: 12, width: 12 }}
+            >
+              <Cancel
+                height={style?.couponCode?.icon?.height}
+                width={style?.couponCode?.icon?.width}
+                fill={style?.couponCode?.icon?.fill}
+              />
+            </Pressable>
+          </View>
+        </Row>
+      )}
+    </Section>
+  )
+}

package/src/components/src/organisms/divider-heading/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Text } from '@gauntlet/components/index'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { useBlock, useSearchKey } from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import { View } from 'react-native'
+import { StyleSheet } from 'react-native'
+
+export function DividerHeading(props: BaseBlockProps) {
+  const block = useBlock(props.screenId, props.componentId, props.instanceId)
+  const style = useBlockStyle(block)
+  const { options } = useBlockSettings(block)
+
+  const searchKey = useSearchKey()
+
+  const heading = options?.heading ?? 'Heading'
+
+  if (options?.disappearOnSearch && searchKey.length > 0) return null
+
+  return (
+    <View style={[defaultStyle.root, style?.root]}>
+      <View style={[defaultStyle.divider, style?.divider, style?.leftDivider]} />
+      <Text style={[defaultStyle.heading, style?.heading]}>{heading}</Text>
+      <View style={[defaultStyle.divider, style?.divider, style?.rightDivider]} />
+    </View>
+  )
+}
+
+const defaultStyle = StyleSheet.create({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginHorizontal: 16,
+  },
+  heading: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 24,
+    marginHorizontal: 12,
+  },
+  divider: {
+    height: 1,
+    flex: 1,
+    backgroundColor: '#E6E9EF',
+  },
+})

package/src/components/src/organisms/edit-address/index.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { useAppStore, useBlock, useUser } from '@gauntlet/state'
+import { useBlockStyle } from '../../style-utils'
+import Toast from 'react-native-toast-message'
+import { AddressForm } from '../../molecules/address-form'
+
+export interface EditAddressProps {
+  screenId: string
+  componentId: string
+  instanceId: string
+  addressId: string
+}
+
+export function EditAddress(props: EditAddressProps) {
+  const gotoPath = useAppStore((s) => s.route.gotoPath)
+  const { screenId, componentId, instanceId, addressId } = props
+  const block = useBlock(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const { title, sections = [] } = block.layout
+  const { data: userData, updateUserAddress, status } = useUser()
+  if (!userData) return null
+  if (status === 'loading') return null
+  if (status === 'error') return null
+
+  const findAddressToEdit = userData.userDetails.data.addresses.edges.find(
+    (item) => item.node.id === addressId
+  )?.node
+
+  const onSubmit = async (addressData) => {
+    const res = await updateUserAddress(addressData, addressId)
+    if (res.success) {
+      Toast.show({
+        type: 'success',
+        text1: res.success,
+      })
+      gotoPath('address-list')
+      return
+    }
+    Toast.show({ text1: res?.error, type: `error` })
+  }
+
+  return (
+    <AddressForm
+      type={'edit'}
+      onSubmit={onSubmit}
+      style={style}
+      title={title}
+      sections={sections}
+      addressToEdit={findAddressToEdit}
+      buttonTitle={block.source.buttonTitle ?? 'SAVE ADDRESS'}
+    />
+  )
+}

package/src/components/src/organisms/empty-screen/index.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import {
+  useAppStore,
+  useBlock,
+  useDeviceDimensions,
+  useIsStateTruthy,
+  useIsStatusIdle,
+} from '@gauntlet/state'
+import { BaseBlockProps, EmptyScreenConfig } from '@gauntlet/types'
+import { View } from 'react-native'
+import { Text } from '../../atoms/text'
+import { ScaledImage } from '../../atoms/image'
+import { useBlockSettings, useBlockStyle } from '../../style-utils'
+import { Button } from '@gauntlet/ui-builder'
+
+export interface EmptyScreenProps extends BaseBlockProps {}
+
+export function EmptyScreen({
+  screenId,
+  componentId,
+  instanceId,
+}: EmptyScreenProps) {
+  const block = useBlock<EmptyScreenConfig>(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const settings = useBlockSettings(block)
+  const { height } = useDeviceDimensions()
+  const goto = useAppStore((s) => s.route.goto)
+  const back = useAppStore((s) => s.route.back)
+  const state = useIsStateTruthy(settings.source.state)
+  const loading = useIsStatusIdle(settings.source.statusState)
+  if (state || !loading) return null
+  return (
+    <View
+      style={[
+        {
+          height: height - 120,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        style.root,
+      ]}
+    >
+      <ScaledImage
+        width={Number(style?.image.width) ?? 180}
+        style={style.image}
+        uri={settings.source.image}
+      />
+      {settings.source?.heading && (
+        <Text style={style?.heading}>{settings.source.heading}</Text>
+      )}
+      {settings.source?.caption && (
+        <Text style={style.caption}>{settings.source.caption}</Text>
+      )}
+      <Button
+        onPress={() => {
+          if (settings.source.link) {
+            goto(settings.source.link)
+          } else {
+            back()
+          }
+        }}
+        text={settings.source.buttonText}
+        style={
+          style.buttonV2 ?? {
+            root: style.button,
+            text: style.buttonText ?? {
+              color: '#fff',
+            },
+          }
+        }
+      />
+    </View>
+  )
+}

package/src/components/src/organisms/empty-screen-v2/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useBlock } from '@gauntlet/state'
+import { BaseBlockProps, EmptyScreenConfig } from '@gauntlet/types'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { EmptyScreenV2 as EmptyScreen } from '@gauntlet/components/molecules/empty-screen-v2'
+
+export function EmptyScreenV2({
+  screenId,
+  componentId,
+  instanceId,
+}: BaseBlockProps) {
+  const block = useBlock<EmptyScreenConfig>(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const settings = useBlockSettings(block)
+
+  return (
+    <EmptyScreen
+      style={style}
+      source={settings.source}
+      options={settings.options}
+    />
+  )
+}

package/src/components/src/organisms/empty-searches/index.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react'
+import { FlatList, Pressable, View } from 'react-native'
+import { Text } from '../../atoms/text'
+import {
+  useAppStore,
+  useBlock,
+  useDeviceDimensions,
+  useIsSearchActive,
+  useSearchKey,
+  useSetSearchKey,
+  useSuggestions,
+} from '@gauntlet/state'
+import { BaseBlockProps, EmptySearchesSuggestionsConfig } from '@gauntlet/types'
+import { useBlockSettings, useBlockStyle } from '../../style-utils'
+import { LoadingScreen } from '../../atoms/button'
+import { TrendingPillet } from '../../molecules/trending-pillet'
+
+export interface EmptySearchesSuggestionsProps extends BaseBlockProps {
+  loaderColor?: string
+}
+
+export function EmptySearchSuggestions({
+  screenId,
+  componentId,
+  instanceId,
+}: EmptySearchesSuggestionsProps) {
+  const block = useBlock<EmptySearchesSuggestionsConfig>(
+    screenId,
+    componentId,
+    instanceId
+  )
+  const style: typeof block.style = useBlockStyle(block)
+  const settings = useBlockSettings(block)
+  const gotoLink = useAppStore((s) => s.route.gotoLink)
+  const { suggestions, status } = useSuggestions({
+    allowEmpty: true,
+    limit: block?.options?.count,
+  })
+  const searchKey = useSearchKey()
+  const setSearchKey = useSetSearchKey()
+  const { height, width } = useDeviceDimensions()
+  const isSearchActive = useIsSearchActive()
+
+  const onPress = (text: string) => {
+    setSearchKey(text)
+    gotoLink({
+      kind: 'screen',
+      value: 'search',
+      params: { searchQuery: text, collectionId: 'search_collection' },
+    })
+  }
+
+  if (!isSearchActive) return null
+  if (settings?.options?.disappearOnSearch && searchKey) return null
+  if (status === 'loading')
+    return (
+      <View
+        style={[
+          {
+            flex: 1,
+            height: height / 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+          style.loader,
+        ]}
+      >
+        <LoadingScreen
+          colors={new Array(3).fill(style?.loader?.color || 'black')}
+        />
+      </View>
+    )
+  if (!suggestions || suggestions?.length === 0) return null
+
+  return (
+    <View style={[{ width }, style.root]}>
+      {settings?.source?.title && (
+        <Text style={style.title}>{settings?.source?.title}</Text>
+      )}
+      <FlatList
+        style={[{ flexDirection: 'row', flexWrap: 'wrap' }, style.list]}
+        data={suggestions}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <TrendingPillet
+              text={item.title}
+              style={style.item}
+              onPress={() => onPress(item.title)}
+            />
+          )
+        }}
+      />
+    </View>
+  )
+}

package/src/components/src/organisms/estimated-delivery-date/dates-mapping.ts

@@ -0,0 +1,23 @@
+export const DayMapping = {
+  0: 'Sunday',
+  1: 'Monday',
+  2: 'Tuesday',
+  3: 'Wednesday',
+  4: 'Thursday',
+  5: 'Friday',
+  6: 'Saturday',
+}
+export const MonthMapping = {
+  0: 'Jan',
+  1: 'Feb',
+  2: 'Mar',
+  3: 'Apr',
+  4: 'May',
+  5: 'Jun',
+  6: 'Jul',
+  7: 'Aug',
+  8: 'Sep',
+  9: 'Oct',
+  10: 'Nov',
+  11: 'Dec',
+}

package/src/components/src/organisms/estimated-delivery-date/index.tsx

@@ -0,0 +1,141 @@
+import { Column, Row } from '@gauntlet/components/atoms/flex'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { useBlock, useEdd, useProductByHandle } from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import { Text } from '@gauntlet/components/atoms/text'
+import React from 'react'
+import { Input } from '@gauntlet/components/atoms/input'
+import { Button } from '@gauntlet/components/atoms/button'
+import { DayMapping, MonthMapping } from './dates-mapping'
+import { Keyboard } from 'react-native'
+
+export type EstimatedDeliveryDateProps = BaseBlockProps & {
+  productHandle: string
+}
+
+export function EstimatedDeliveryDate({
+  componentId,
+  instanceId,
+  screenId,
+}: EstimatedDeliveryDateProps) {
+  const block = useBlock<any>(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const { source, options } = useBlockSettings(block)
+  const pincodeRef = React.useRef<string>('')
+
+  const [
+    {
+      codAvailable,
+      pincodeValidity,
+      serviceable,
+      estimatedDeliveryDate,
+      express,
+    },
+    setEddRes,
+  ] = React.useState<{
+    codAvailable: boolean | null
+    serviceable: boolean | null
+    pincodeValidity: boolean
+    estimatedDeliveryDate: string
+    express: boolean
+  }>({
+    codAvailable: null,
+    serviceable: null,
+    pincodeValidity: true,
+    estimatedDeliveryDate: '',
+    express: false,
+  })
+  const { fetchEstimatedDeliveryDate } = useEdd()
+
+  const handleSubmit = React.useCallback(() => {
+    Keyboard.dismiss()
+    if (pincodeRef.current.length !== options?.pincodeLength ?? 6) {
+      setEddRes((res) => ({
+        ...res,
+        pincodeValidity: false,
+      }))
+      return
+    }
+    return fetchEstimatedDeliveryDate(pincodeRef.current)
+      .then((res) => {
+        const deliveryDate = new Date(
+          new Date().getTime() +
+            (res.maxSla + (options?.additionalDays ?? 0)) * 24 * 60 * 60 * 1000
+        )
+        let estimatedDeliveryDate = `${
+          (DayMapping as any)[deliveryDate.getDay()]
+        }, ${
+          (MonthMapping as any)[deliveryDate.getMonth()]
+        } ${deliveryDate.getDate()}`
+        if (res.hyperlocal) {
+          estimatedDeliveryDate = `${res.deliveryHour} hours`
+        }
+        const serviceable = Boolean(res.serviceable ?? true)
+        const codAvailable = Boolean(res.codAvailable)
+        const pincodeValidity = true
+        const eddRes = {
+          estimatedDeliveryDate,
+          codAvailable,
+          serviceable,
+          pincodeValidity,
+          express: Boolean(res.hyperlocal),
+        }
+        setEddRes(eddRes)
+      })
+      .catch((err) => {
+        console.log({ err })
+      })
+  }, [
+    fetchEstimatedDeliveryDate,
+    options?.additionalDays,
+    options?.pincodeLength,
+  ])
+
+  return (
+    <Column style={style?.container}>
+      <Text style={style?.title}>{source?.title}</Text>
+      <Row style={{ marginTop: 16, ...style?.inputContainer }}>
+        <Input
+          placeholder={source?.inputPlaceholder}
+          onChangeText={(text) => (pincodeRef.current = text)}
+          style={style?.input}
+          keyboardType={'numeric'}
+          onSubmitEditing={handleSubmit}
+        />
+
+        <Button
+          onPress={handleSubmit}
+          title={source?.buttonText}
+          style={style?.button}
+        />
+      </Row>
+      {Boolean(
+        estimatedDeliveryDate && serviceable !== false && pincodeValidity
+      ) && (
+        <Text style={style?.deliveryDateText}>
+          {express ? source?.expressDeliveryDateText : source?.deliveryDateText}{' '}
+          {estimatedDeliveryDate}
+        </Text>
+      )}
+
+      {Boolean(codAvailable && serviceable !== false && pincodeValidity) && (
+        <Text style={style?.codAvailableText}>{source?.codAvailableText}</Text>
+      )}
+
+      {Boolean(serviceable === false) && (
+        <Text style={style?.notServiceableText}>
+          {source?.notServiceableText}
+        </Text>
+      )}
+
+      {Boolean(!pincodeValidity) && (
+        <Text style={style?.invalidPincodeText}>
+          {source?.invalidPincodeText}
+        </Text>
+      )}
+    </Column>
+  )
+}

package/src/components/src/organisms/faqs/defaults.ts

@@ -0,0 +1,65 @@
+import { AccordionListConfig } from '@gauntlet/types'
+
+const style: AccordionListConfig['style'] = {
+  root: {
+    paddingTop: 32,
+    paddingBottom: 32,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  richHeading: {
+    tags: {
+      p: {
+        marginTop: 0,
+        marginBottom: 16,
+        color: '#475569',
+      },
+    },
+  },
+  richDescription: {},
+  wrapperContent: {},
+  richText: {
+    tags: {
+      p: {
+        marginTop: 16,
+        marginBottom: 0,
+        color: '#64748B',
+      },
+    },
+  },
+  accordion: {
+    root: {
+      padding: 12,
+      marginBottom: 8,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: '#E2E8F0',
+      backgroundColor: '#F4F7F9',
+    },
+    title: {
+      root: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+      },
+      icon: {
+        fill: '#000000',
+      },
+      text: {
+        fontSize: 16,
+        fontWeight: '500',
+        width: 240,
+        color: '#475569',
+      },
+    },
+    titleExpanded: {
+      icon: {
+        fill: '#000000',
+      },
+    },
+  },
+}
+
+export const defaults = {
+  style: style,
+}