@app-brew/brewery 1.0.0

package/src/components/src/organisms/push-inbox/index.tsx

@@ -0,0 +1,392 @@
+import { Column } from '@gauntlet/components/atoms/flex'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { useAppStore, useBlock } from '@gauntlet/state'
+import type { NotificationItem } from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import React from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  Switch,
+  View,
+} from 'react-native'
+import { Icon, Image as UiImage, Text } from '@gauntlet/ui-builder'
+import { FirebasePush } from '@gauntlet/integrations/firebase-push'
+import { RESULTS } from 'react-native-permissions'
+import { formatTimestamp, groupNotificationsByDateRange } from './utils'
+import type { GroupedNotification } from './utils'
+import { NavIconIds } from '@gauntlet/icons'
+
+const DEFAULT_NOTIFICATION_IMAGES = {
+  GENERAL:
+    'https://cdn.shopify.com/s/files/1/0573/2990/9803/files/general.png?v=1770376291&width=300',
+  ABANDONED_CART:
+    'https://cdn.shopify.com/s/files/1/0573/2990/9803/files/cart-notifications.png?v=1770375507&width=144',
+  WELCOME:
+    'https://cdn.shopify.com/s/files/1/0573/2990/9803/files/welcome.png?v=1770376291&width=300',
+  POST_ORDER:
+    'https://cdn.shopify.com/s/files/1/0573/2990/9803/files/order.png?v=1770375507&width=144',
+  BACK_IN_STOCK:
+    'https://cdn.shopify.com/s/files/1/0573/2990/9803/files/back-in-stock.png?v=1770376291&width=300',
+}
+
+interface PushInboxSource {
+  defaultImages?: {
+    GENERAL?: string
+    ABANDONED_CART?: string
+    WELCOME?: string
+    POST_ORDER?: string
+    BACK_IN_STOCK?: string
+  }
+  enableNotificationIconId?: string
+}
+
+const defaultStyle = {
+  root: {
+    flex: 1,
+    padding: 16,
+  },
+  list: {
+    paddingBottom: 20,
+  },
+  sectionHeader: {
+    kind: 'label-xs',
+    marginTop: 16,
+
+    color: 'textsecondary',
+  },
+  item: {
+    root: {
+      borderRadius: 8,
+      paddingTop: 16,
+      paddingBottom: 16,
+
+      flexDirection: 'row',
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 2,
+      alignItems: 'center',
+    },
+    imageContainer: {
+      width: 60,
+      height: 80,
+      borderRadius: 8,
+      marginRight: 14,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    image: {
+      width: 60,
+      height: 80,
+      borderRadius: 8,
+    },
+    placeholder: {
+      width: 40,
+      height: 40,
+      backgroundColor: '#D4D4D4',
+      borderRadius: 4,
+    },
+    title: {
+      kind: 'heading-s',
+      color: 'textsecondary',
+    },
+    body: {
+      color: 'texttertiary',
+      kind: 'label-xs',
+    },
+    timestamp: {
+      color: 'textsecondary',
+      kind: 'label-xs',
+      marginTop: 14,
+    },
+  },
+  loading: {
+    root: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20,
+    },
+  },
+  error: {
+    color: '#FF0000',
+  },
+  empty: {
+    color: '#666',
+  },
+  enableNotificationCard: {
+    root: {
+      borderRadius: 8,
+      padding: 12,
+      backgroundColor: 'bgsecondary',
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    icon: {
+      root: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'brandprimary',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+      },
+      width: 24,
+      height: 24,
+      fill: undefined,
+      stroke: '#FFFFFF',
+    },
+    content: {
+      flex: 1,
+    },
+    title: {
+      kind: 'heading-s',
+      color: 'textprimary',
+      marginBottom: 4,
+    },
+    description: {
+      kind: 'label-xs',
+      color: 'textsecondary',
+    },
+  },
+}
+
+export function PushInbox({
+  screenId,
+  componentId,
+  instanceId,
+}: BaseBlockProps) {
+  const block = useBlock(screenId, componentId, instanceId)
+  const blockStyle = useBlockStyle(block)
+  const blockSettings = useBlockSettings(block)
+  const style = blockStyle ?? defaultStyle
+  const gotoLink = useAppStore((s) => s.route.gotoLink)
+  const notifications = useAppStore((s) => s.userNotifications.data)
+  const status = useAppStore((s) => s.userNotifications.status)
+  const error = useAppStore((s) => s.userNotifications.error)
+  const fetchNotifications = useAppStore(
+    (s) => s.userNotifications.fetchNotifications
+  )
+
+  React.useEffect(() => {
+    if (status === 'init') {
+      fetchNotifications()
+    }
+  }, [status, fetchNotifications])
+
+  const groupedNotifications = React.useMemo(() => {
+    return groupNotificationsByDateRange(notifications)
+  }, [notifications])
+
+  const [failedImages, setFailedImages] = React.useState<Set<string>>(new Set())
+  const [isNotificationEnabled, setIsNotificationEnabled] = React.useState<
+    boolean | null
+  >(null)
+  const [isInitialPermissionCheck, setIsInitialPermissionCheck] =
+    React.useState<boolean>(true)
+
+  React.useEffect(() => {
+    checkNotificationPermission(true)
+  }, [])
+
+  const checkNotificationPermission = async (isInitial = false) => {
+    try {
+      if (isInitial) setIsInitialPermissionCheck(true)
+      const permissionStatus =
+        await FirebasePush.getInstance().checkNotificationPermissionStatus()
+      const isEnabled =
+        permissionStatus === RESULTS.GRANTED ||
+        permissionStatus === RESULTS.LIMITED
+      setIsNotificationEnabled(isEnabled)
+    } catch (error) {
+      console.error('Error checking notification permission:', error)
+      setIsNotificationEnabled(false)
+    } finally {
+      if (isInitial) setIsInitialPermissionCheck(false)
+    }
+  }
+
+  const handleToggleNotification = async (value: boolean) => {
+    if (value) {
+      try {
+        await FirebasePush.getInstance().init()
+        await checkNotificationPermission()
+      } catch (error) {
+        console.error('Error requesting notification permission:', error)
+        setIsNotificationEnabled(false)
+      }
+    }
+  }
+
+  const getDefaultImageForNotificationType = (
+    notificationType: string | null
+  ): string => {
+    const source = blockSettings?.source as PushInboxSource | undefined
+    const configImages = source?.defaultImages
+    const defaultImages = {
+      ...DEFAULT_NOTIFICATION_IMAGES,
+      ...(configImages || {}),
+    }
+
+    if (!notificationType) {
+      return defaultImages.GENERAL
+    }
+
+    const upperType = notificationType.toUpperCase()
+    return (
+      defaultImages[upperType as keyof typeof defaultImages] ||
+      defaultImages.GENERAL
+    )
+  }
+
+  const handleNotificationPress = (notification: NotificationItem) => {
+    try {
+      const linkData = JSON.parse(notification.message.data.link)
+      if (linkData?.value) {
+        gotoLink({
+          kind: linkData.kind || 'url',
+          value: linkData.value,
+          params: linkData.params,
+        })
+      }
+    } catch (err) {
+      console.error('Error parsing notification link:', err)
+    }
+  }
+
+  const handleImageError = (imageUrl: string) => {
+    setFailedImages((prev) => new Set(prev).add(imageUrl))
+  }
+
+  const renderNotificationItem = ({ item }: { item: NotificationItem }) => {
+    const imageUrl = item.message.data.imageUrl
+    const title = item.message.notification.title
+    const body = item.message.notification.body
+    const timestamp = formatTimestamp(item.createdAt)
+    const notificationType = item.notificationType
+
+    const hasValidImageUrl =
+      imageUrl && imageUrl.trim() !== '' && !failedImages.has(imageUrl)
+    const displayImageUrl = hasValidImageUrl
+      ? imageUrl
+      : getDefaultImageForNotificationType(notificationType)
+
+    return (
+      <Pressable
+        onPress={() => handleNotificationPress(item)}
+        style={style?.item?.root}
+      >
+        <View style={style?.item?.imageContainer}>
+          <UiImage
+            uri={displayImageUrl}
+            style={style?.item?.image}
+            resizeMode="cover"
+          />
+        </View>
+        <Column style={{ flex: 1 }}>
+          <Text style={style?.item?.title}>{title}</Text>
+          <Text style={style?.item?.body}>{body}</Text>
+          <Text style={style?.item?.timestamp}>{timestamp}</Text>
+        </Column>
+      </Pressable>
+    )
+  }
+
+  const renderSectionHeader = ({
+    section,
+  }: {
+    section: GroupedNotification
+  }) => <Text style={style?.sectionHeader}>{section.title}</Text>
+
+  const renderEnableNotificationCard = () => {
+    if (isNotificationEnabled === true) {
+      return null
+    }
+
+    const source = blockSettings?.source as PushInboxSource | undefined
+    const iconId =
+      source?.enableNotificationIconId || NavIconIds['notification-bell']
+
+    return (
+      <View style={style?.enableNotificationCard?.root}>
+        <View style={style?.enableNotificationCard?.icon?.root}>
+          <Icon
+            iconId={iconId}
+            fill={style?.enableNotificationCard?.icon?.fill}
+            stroke={style?.enableNotificationCard?.icon?.stroke ?? '#FFFFFF'}
+            style={{
+              width: style?.enableNotificationCard?.icon?.width ?? 24,
+              height: style?.enableNotificationCard?.icon?.height ?? 24,
+            }}
+          />
+        </View>
+        <View style={style?.enableNotificationCard?.content}>
+          <Text style={style?.enableNotificationCard?.title}>
+            Enable Notification
+          </Text>
+          <Text style={style?.enableNotificationCard?.description}>
+            Get updates on orders, offers, and much more
+          </Text>
+        </View>
+        <Switch
+          value={isNotificationEnabled ?? false}
+          onValueChange={handleToggleNotification}
+          trackColor={{ false: '#D1D5DB', true: '#22C55E' }}
+          thumbColor="#FFFFFF"
+        />
+      </View>
+    )
+  }
+
+  if (status === 'init' || status === 'loading' || isInitialPermissionCheck) {
+    return (
+      <Column style={style?.loading?.root}>
+        <ActivityIndicator size="large" color="#000" />
+      </Column>
+    )
+  }
+
+  if (status === 'error' && error) {
+    return (
+      <Column style={style?.loading?.root}>
+        <Text style={style?.error}>{error.message}</Text>
+      </Column>
+    )
+  }
+
+  return (
+    <Column style={style?.root}>
+      {renderEnableNotificationCard()}
+      {notifications.length === 0 || groupedNotifications.length === 0 ? (
+        <Column style={style?.loading?.root}>
+          <Text style={style?.empty}>No notifications available</Text>
+        </Column>
+      ) : (
+        <FlatList
+          data={groupedNotifications}
+          keyExtractor={(group, _index) => group.title}
+          renderItem={({ item: group }) => (
+            <View>
+              {renderSectionHeader({ section: group })}
+              {group.data.map((notification, index) => (
+                <View key={`${notification.createdAt}-${index}`}>
+                  {renderNotificationItem({ item: notification })}
+                </View>
+              ))}
+            </View>
+          )}
+          contentContainerStyle={style?.list}
+          showsVerticalScrollIndicator={false}
+        />
+      )}
+    </Column>
+  )
+}

package/src/components/src/organisms/push-inbox/utils.ts

@@ -0,0 +1,94 @@
+import {
+  differenceInCalendarDays,
+  differenceInHours,
+  differenceInMinutes,
+  format,
+  isToday as isTodayDateFns,
+} from 'date-fns'
+import type { NotificationItem } from '@gauntlet/state'
+
+export interface GroupedNotification {
+  title: string
+  data: NotificationItem[]
+}
+
+/**
+ * Formats a timestamp to a human-readable string
+ * @param createdAt - ISO date string
+ * @returns Formatted timestamp string
+ */
+export function formatTimestamp(createdAt: string): string {
+  const date = new Date(createdAt)
+  const now = new Date()
+  
+  if (isTodayDateFns(date)) {
+    const diffInHours = differenceInHours(now, date)
+    const diffInMinutes = differenceInMinutes(now, date)
+
+    if (diffInMinutes < 60) {
+      return `${diffInMinutes} ${diffInMinutes === 1 ? 'min' : 'mins'} ago`
+    } else {
+      return `${diffInHours} ${diffInHours === 1 ? 'hr' : 'hrs'} ago`
+    }
+  } else {
+    return `On ${format(date, 'd MMM yyyy')}`
+  }
+}
+
+/**
+ * Checks if a date is today
+ * @param createdAt - ISO date string
+ * @returns true if the date is today
+ */
+export function isToday(createdAt: string): boolean {
+  const date = new Date(createdAt)
+  return isTodayDateFns(date)
+}
+
+/**
+ * Checks if a date is within the last 7 days (excluding today)
+ * @param createdAt - ISO date string
+ * @returns true if the date is 1-7 days ago
+ */
+export function isLast7Days(createdAt: string): boolean {
+  const date = new Date(createdAt)
+  const now = new Date()
+  const diffInDays = differenceInCalendarDays(now, date)
+  return diffInDays >= 1 && diffInDays <= 7
+}
+
+/**
+ * Groups notifications by date ranges: Today, Last 7 Days, and Earlier
+ * @param notifications - Array of notification items
+ * @returns Array of grouped notifications
+ */
+export function groupNotificationsByDateRange(
+  notifications: NotificationItem[]
+): GroupedNotification[] {
+  const today: NotificationItem[] = []
+  const last7Days: NotificationItem[] = []
+  const earlier: NotificationItem[] = []
+
+  notifications.forEach((notification) => {
+    if (isToday(notification.createdAt)) {
+      today.push(notification)
+    } else if (isLast7Days(notification.createdAt)) {
+      last7Days.push(notification)
+    } else {
+      earlier.push(notification)
+    }
+  })
+
+  const groups: GroupedNotification[] = []
+  if (today.length > 0) {
+    groups.push({ title: 'Today', data: today })
+  }
+  if (last7Days.length > 0) {
+    groups.push({ title: 'Last 7 Days', data: last7Days })
+  }
+  if (earlier.length > 0) {
+    groups.push({ title: 'Earlier', data: earlier })
+  }
+
+  return groups
+}

package/src/components/src/organisms/push-notification-prompt-button/index.tsx

@@ -0,0 +1,45 @@
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { FirebasePush } from '@gauntlet/integrations/firebase-push'
+import { useBlock, useLink } from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import { Button } from '@gauntlet/ui-builder'
+import React from 'react'
+import { RESULTS } from 'react-native-permissions'
+
+export function PushNotificationPromptButton({
+  screenId,
+  componentId,
+  instanceId,
+}: BaseBlockProps) {
+  const block = useBlock(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const { source } = useBlockSettings(block)
+  const { gotoLink } = useLink()
+
+  return (
+    <Button
+      text={source.buttonText ?? 'Sure'}
+      style={style}
+      onPress={async () => {
+        const authStatus = await FirebasePush.getInstance().init()
+        if (authStatus === RESULTS.GRANTED || authStatus === RESULTS.LIMITED) {
+          gotoLink(
+            source.successScreenLink ?? { kind: 'modal', value: 'promo-modal' }
+          )
+          return
+        }
+        if (authStatus === RESULTS.BLOCKED) {
+          gotoLink(
+            source.settingsScreenLink ?? {
+              kind: 'modal',
+              value: 'push-notification-settings-modal',
+            }
+          )
+        }
+      }}
+    />
+  )
+}

package/src/components/src/organisms/push-notification-settings-block/index.tsx

@@ -0,0 +1,119 @@
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { openSettings } from 'react-native-permissions'
+import {
+  useBlock,
+  useBottomSheetModal,
+  useConfig,
+  useLink,
+} from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import { Button } from '@gauntlet/ui-builder'
+import React, { useState } from 'react'
+import { Platform, Text, View } from 'react-native'
+import { Icon, NavIconIds } from '@gauntlet/icons'
+import { FirebasePush } from '../../../../integrations/firebase-push/src/push'
+import { RESULTS } from 'react-native-permissions/src/results'
+
+export function PushNotificationSettingsBlock({
+  screenId,
+  componentId,
+  instanceId,
+}: BaseBlockProps) {
+  const block = useBlock(screenId, componentId, instanceId)
+  const { source } = useBlockSettings(block)
+  const style = useBlockStyle(block)
+  const config = useConfig()
+  const { gotoLink } = useLink()
+  const { closeModal } = useBottomSheetModal()
+
+  const [showClaimOfferButton, setShowClaimOfferButton] =
+    useState<boolean>(false)
+
+  return (
+    <View style={style.root}>
+      <Text style={style.headerText}>{source.headerText}</Text>
+      <Text style={style.subHeaderText}>{source.subHeaderText}</Text>
+      <SettingsChecklist style={style.settingsChecklist} />
+      <Button
+        text={
+          showClaimOfferButton
+            ? source.claimOfferButtonText
+            : source.openSettingsButtonText
+        }
+        style={style.openSettingsButton}
+        onPress={async () => {
+          if (!showClaimOfferButton) {
+            openSettings()
+            if (!config?.data?.settings?.global?.pushPrompt?.show) {
+              closeModal()
+              return
+            }
+            setShowClaimOfferButton(true)
+            return
+          }
+
+          const authStatus =
+            await FirebasePush.getInstance().checkNotificationPermissionStatus()
+          if (
+            authStatus === RESULTS.GRANTED ||
+            authStatus === RESULTS.LIMITED
+          ) {
+            gotoLink({
+              kind: source.redirectScreenKind ?? 'screen',
+              value: source.redirectScreen,
+            })
+            return
+          }
+          setShowClaimOfferButton(false)
+        }}
+      />
+    </View>
+  )
+}
+
+const CheckIcon = ({ style }: { style: any }) => (
+  <View style={style.checkIcon}>
+    <Icon
+      iconId={NavIconIds.tick}
+      style={style?.checkMark}
+      fill={style?.checkBox?.tick?.color ?? '#000'}
+    />
+  </View>
+)
+
+const ChecklistItem = ({ text, style }: { text: string; style: any }) => (
+  <View style={style.checklistItem}>
+    <CheckIcon style={style} />
+    <Text style={style.itemText}>{text}</Text>
+  </View>
+)
+
+const SettingsChecklist = ({ style }: { style: any }) => {
+  const items =
+    Platform.OS !== 'ios'
+      ? [
+          'Go to Setting',
+          'Select Notifications',
+          'Select App Name',
+          'Select App Info',
+          'Select Allow Notifications to turn on',
+        ]
+      : [
+          'Go to Setting',
+          'Tap Apps',
+          'Tap App Name',
+          'Tap Notifications',
+          'Turn on Allow Notifications',
+        ]
+
+  return (
+    <View style={style.root}>
+      {items.map((item, index) => (
+        <ChecklistItem key={index} text={item} style={style} />
+      ))}
+    </View>
+  )
+}

package/src/components/src/organisms/quantity-selector-block/index.tsx

@@ -0,0 +1,54 @@
+import { useAppStore, useBlock, useProductByHandle } from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import * as React from 'react'
+import { View } from 'react-native'
+import { QuantitySelector } from '@gauntlet/components/molecules/pdp-quantity-selector'
+import { useBlockStyle } from '../../style-utils'
+import { Text } from '@gauntlet/components/atoms/text'
+
+export interface QuantitySelectorProps extends BaseBlockProps {
+  productHandle: string
+}
+
+export function QuantitySelectorBlock({
+  screenId,
+  componentId,
+  instanceId,
+  productHandle,
+}: QuantitySelectorProps) {
+  const block = useBlock(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const product = useProductByHandle(productHandle)
+  const updateQuanity = useAppStore((store) => {
+    return store.products.updateSelectedVariantQuantity
+  })
+
+  if (!product.data) return null
+  const q = product.data.lineItem.quantity
+
+  return (
+    <View style={style?.root}>
+      <Text style={style?.heading}>Quantity :</Text>
+      <View
+        style={{
+          //   width: width - (style?.root?.marginHorizontal ?? 0) * 2,
+          padding: 16,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: 200,
+          ...style?.selector?.root,
+        }}
+      >
+        <QuantitySelector
+          quantity={q}
+          setQuantity={(quantity) => {
+            updateQuanity(quantity, productHandle)
+          }}
+          style={style?.selector}
+        />
+      </View>
+    </View>
+  )
+}