@app-brew/brewery 1.0.0

package/src/components/src/molecules/cart-goals/components/multi-tier-progress/style-4.tsx

@@ -0,0 +1,216 @@
+import React, { useMemo } from 'react'
+import { View } from 'react-native'
+import { Text } from '@gauntlet/components/atoms/text'
+import { Motion } from '@legendapp/motion'
+import { MultiTierProgressBarVariantProps } from './types'
+import { emptyObject } from '../../utils'
+import { deepMerge } from '@gauntlet/components/utils'
+import { CircleWithProgress } from './CircleWithProgress'
+import {
+  CIRCLE_SIZE,
+  LINE_HEIGHT,
+  PROGRESS_COLOR,
+  BORDER_COLOR,
+} from './constants'
+import {
+  calculateLineWidth,
+  calculateProgressPercent,
+  calculateProgressBarWidth,
+} from './style-4-utils'
+
+export function MultiTierProgressBarStyle4(
+  props: MultiTierProgressBarVariantProps
+) {
+  const { goals, styles = emptyObject } = props
+
+  const mergedStyles = useMemo(() => deepMerge(defaultStyles, styles), [styles])
+
+  const dynamicLineWidth = useMemo(
+    () => calculateLineWidth(goals.length),
+    [goals.length]
+  )
+
+  const progressPercent = useMemo(
+    () => calculateProgressPercent(goals),
+    [goals]
+  )
+
+  const progressBarWidth = calculateProgressBarWidth(
+    goals.length,
+    dynamicLineWidth
+  )
+
+  const anyLabel = goals.some((goal) => goal.label && goal.label.length > 0)
+
+  return (
+    <View style={mergedStyles.container}>
+      <View
+        style={[
+          mergedStyles.goalsContainer,
+          anyLabel && mergedStyles.goalsWithLabel,
+        ]}
+      >
+        <View
+          style={[
+            mergedStyles.progressBarContainer,
+            { width: progressBarWidth, left: CIRCLE_SIZE / 2 },
+          ]}
+        >
+          <View style={mergedStyles.progressBarBackground} />
+          {/* @ts-expect-error - Motion.View type compatibility issue */}
+          <Motion.View
+            style={mergedStyles.progressBarFill}
+            animate={{ width: `${Math.min(100, progressPercent)}%` }}
+            transition={{ type: 'tween', duration: 200 }}
+          />
+        </View>
+
+        {goals.map((goal, index) => (
+          <GoalItem
+            key={index}
+            goal={goal}
+            index={index}
+            dynamicLineWidth={dynamicLineWidth}
+            styles={mergedStyles}
+          />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+interface GoalItemProps {
+  goal: { state: string; label?: string; progress: number }
+  index: number
+  dynamicLineWidth: number
+  styles: any
+}
+
+function GoalItem({ goal, index, dynamicLineWidth, styles }: GoalItemProps) {
+  const isLocked = goal.state === 'LOCKED'
+  const isAchieved = goal.state === 'ACHIEVED'
+  const isInProgress = goal.state === 'IN_PROGRESS'
+  const hasLabel = typeof goal.label === 'string' && goal.label.length > 0
+  const isFirst = index === 0
+
+  return (
+    <View style={[styles.goal, !isFirst && { marginLeft: dynamicLineWidth }]}>
+      <CircleWithProgress
+        progress={goal.progress}
+        isAchieved={isAchieved}
+        isInProgress={isInProgress}
+        isLocked={isLocked}
+        number={index + 1}
+        styles={styles}
+      />
+      {hasLabel && (
+        <View
+          style={[
+            styles.labelContainer,
+            {
+              width: CIRCLE_SIZE + dynamicLineWidth,
+              left: -(dynamicLineWidth / 2),
+            },
+          ]}
+        >
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.label,
+              isAchieved ? styles.labelAchieved : emptyObject,
+              isLocked ? styles.labelLocked : emptyObject,
+              isInProgress ? styles.labelInProgress : emptyObject,
+            ]}
+          >
+            {goal.label}
+          </Text>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const defaultStyles = {
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: 12,
+  },
+  goalsContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  progressBarContainer: {
+    position: 'absolute',
+    top: CIRCLE_SIZE / 2 - LINE_HEIGHT / 2,
+    height: LINE_HEIGHT,
+    zIndex: 1,
+  },
+  progressBarBackground: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'bgprimary',
+    borderWidth: 1,
+    borderColor: BORDER_COLOR,
+    borderRadius: LINE_HEIGHT / 2,
+  },
+  progressBarFill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    backgroundColor: PROGRESS_COLOR,
+    borderRadius: LINE_HEIGHT / 2,
+  },
+  goal: {
+    width: CIRCLE_SIZE,
+    flexDirection: 'column',
+    alignItems: 'center',
+    position: 'relative',
+    zIndex: 2,
+  },
+  goalsWithLabel: {
+    paddingBottom: 28,
+  },
+  labelContainer: {
+    position: 'absolute',
+    top: CIRCLE_SIZE,
+    alignItems: 'center',
+  },
+  circleNumberContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleNumber: {
+    kind: 'heading-m',
+    color: 'textprimary',
+  },
+  circleNumberAchieved: {
+    color: 'textprimaryinverse',
+  },
+  label: {
+    kind: 'label-xs',
+    color: 'texttertiary',
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  labelAchieved: {
+    color: PROGRESS_COLOR,
+  },
+  labelLocked: {
+    color: 'texttertiary',
+  },
+  labelInProgress: {
+    color: 'texttertiary',
+  },
+}

package/src/components/src/molecules/cart-goals/components/multi-tier-progress/style-7.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { View } from 'react-native'
+import { MultiTierProgressBarVariantProps } from './types'
+import { emptyObject } from '../../utils'
+import { deepMerge } from '@gauntlet/components/utils'
+import { useMemo } from 'react'
+import { Motion } from '@legendapp/motion'
+import { Icon } from '@gauntlet/ui-builder'
+import { Text } from '@gauntlet/components/atoms/text'
+
+export function MultiTierProgressBarStyle7(
+  props: MultiTierProgressBarVariantProps
+) {
+  const { goals, styles = emptyObject, progressBarOptions } = props
+  const mergedStyles = useMemo(() => deepMerge(defaultStyles, styles), [styles])
+  const barIconId = progressBarOptions?.barIconId
+  const progressPercent =
+    goals.reduce((acc, goal) => {
+      return acc + goal.progress
+    }, 0) / goals.length
+  const hasAtleastOneLabel = goals.some((goal) => goal.label)
+  return (
+    <>
+      <View style={mergedStyles.container}>
+        <View style={mergedStyles.track}>
+          {/* @ts-expect-error - Motion.View type compatibility issue */}
+          <Motion.View
+            style={mergedStyles.fill}
+            animate={{ width: `${progressPercent}%` }}
+            transition={{ type: 'tween', duration: 200 }}
+          />
+        </View>
+        {barIconId && progressPercent > 0 && (
+          // @ts-expect-error - Motion.View type compatibility issue
+          <Motion.View
+            style={mergedStyles.iconContainer}
+            animate={{ left: `${progressPercent}%` }}
+            transition={{ type: 'tween', duration: 200 }}
+          >
+            <Icon
+              iconId={barIconId}
+              width={mergedStyles.icon?.width || 16}
+              height={mergedStyles.icon?.height || 16}
+              style={mergedStyles.icon}
+            />
+          </Motion.View>
+        )}
+      </View>
+
+      {hasAtleastOneLabel && (
+        <View style={mergedStyles.labelsContainer}>
+          {goals.map((goal, index) => {
+            const isLocked = goal.state === 'LOCKED'
+            const isAchieved = goal.state === 'ACHIEVED'
+            const isInProgress = goal.state === 'IN_PROGRESS'
+            return (
+              <Text
+                key={index}
+                numberOfLines={2}
+                style={[
+                  mergedStyles.label,
+                  isAchieved ? mergedStyles.labelAchieved : emptyObject,
+                  isLocked ? mergedStyles.labelLocked : emptyObject,
+                  isInProgress ? mergedStyles.labelInProgress : emptyObject,
+                ]}
+              >
+                {goal.label}
+              </Text>
+            )
+          })}
+        </View>
+      )}
+    </>
+  )
+}
+const defaultStyles = {
+  container: {
+    height: 5,
+    marginTop: 12,
+  },
+  track: {
+    flex: 1,
+    height: '100%',
+    backgroundColor: 'bgsecondary',
+    borderRadius: 9999,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    backgroundColor: '#266EF1',
+    borderRadius: 9999,
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: '50%',
+    transform: [{ translateX: -8 }, { translateY: -8 }],
+  },
+  labelsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 8,
+  },
+  label: {
+    kind: 'label-xs',
+    color: 'texttertiary',
+    textAlign: 'center',
+  },
+  labelAchieved: {
+    color: '#266EF1',
+  },
+}

package/src/components/src/molecules/cart-goals/components/multi-tier-progress/types.ts

@@ -0,0 +1,18 @@
+import { GoalWithProgress } from '../../multi-tier-utils'
+import {
+  MultiTierProgressBarOptions,
+  MultiTierProgressBarVariant,
+} from '../../types'
+
+export interface MultiTierProgressBarProps {
+  variant: MultiTierProgressBarVariant
+  progressBarOptions?: MultiTierProgressBarOptions
+  goals: GoalWithProgress[]
+  styles?: any
+  currentGoalIndex: number
+}
+
+export type MultiTierProgressBarVariantProps = Omit<
+  MultiTierProgressBarProps,
+  'variant'
+>

package/src/components/src/molecules/cart-goals/components/single-tier-progress.tsx

@@ -0,0 +1,210 @@
+import { Icon } from '@gauntlet/ui-builder'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
+import { Motion } from '@legendapp/motion'
+import { IconProps } from '@gauntlet/components/atoms/icon'
+import Svg, { Circle } from 'react-native-svg'
+import { deepMerge } from '@gauntlet/components/utils'
+import { emptyObject } from '../utils'
+
+export interface CircularProgressStyles {
+  container?: ViewStyle
+  iconContainer?: ViewStyle
+}
+
+export interface LinearProgressStyles {
+  container?: ViewStyle
+  track?: ViewStyle
+  fill?: ViewStyle
+  iconContainer?: ViewStyle
+  icon?: ViewStyle
+}
+
+interface ProgressProps {
+  icon: string | undefined
+  progress: number
+  iconProps?: Partial<IconProps>
+}
+
+interface CircularProgressProps extends ProgressProps {
+  style?: CircularProgressStyles
+  size?: number
+  strokeWidth?: number
+  strokeColor?: string
+  progressColor?: string
+  fillColor?: string
+  animated?: boolean
+  duration?: number
+}
+
+interface LinearProgressProps extends ProgressProps {
+  style?: LinearProgressStyles
+}
+
+// @ts-expect-error - Animated.createAnimatedComponent type compatibility issue with react-native-svg
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
+export function CircularProgress(props: CircularProgressProps) {
+  const {
+    progress,
+    style,
+    icon,
+    iconProps = emptyObject,
+    size = 36,
+    strokeWidth = 2,
+    strokeColor = '#F5F5F5',
+    progressColor = '#266EF1',
+    fillColor = '#F5F5F5',
+    animated = true,
+    duration = 300,
+  } = props
+
+  const progressPercent = Math.min(Math.max(progress, 0), 100)
+  const animatedValue = useRef(new Animated.Value(0)).current
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+
+  const mergedStyles = useMemo(
+    () =>
+      deepMerge(circularStyles, style) as typeof circularStyles &
+      Record<string, any>,
+    [style]
+  )
+
+  const progressOffset = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0],
+    extrapolate: 'clamp',
+  })
+
+  useEffect(() => {
+    if (animated) {
+      const animation = Animated.timing(animatedValue, {
+        toValue: progressPercent,
+        duration,
+        useNativeDriver: false, // SVG strokeDashoffset not supported by native driver
+      })
+      animation.start()
+      return () => {
+        animation.stop()
+      }
+    } else {
+      animatedValue.setValue(progressPercent)
+    }
+  }, [progressPercent, animated, duration, animatedValue])
+
+  return (
+    <View style={[{ width: size, height: size }, mergedStyles.container]}>
+      <Svg width={size} height={size}>
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          fill={fillColor}
+        />
+        <AnimatedCircle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={progressPercent === 0 ? 'transparent' : progressColor}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={progressOffset}
+          strokeLinecap="round"
+          fill="transparent"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </Svg>
+
+      {icon && (
+        <View style={mergedStyles.iconContainer}>
+          <Icon
+            iconId={icon}
+            width={mergedStyles.circularIcon?.width || 20}
+            height={mergedStyles.circularIcon?.height || 20}
+            style={mergedStyles.circularIcon}
+            {...iconProps}
+          />
+        </View>
+      )}
+    </View>
+  )
+}
+
+export function LinearProgress(props: LinearProgressProps) {
+  const { progress, style, icon, iconProps = emptyObject } = props
+  const progressPercent = Math.min(Math.max(progress, 0), 100)
+
+  const mergedStyles = useMemo(
+    () =>
+      deepMerge(linearStyles, style) as typeof linearStyles &
+      Record<string, any>,
+    [style]
+  )
+
+  return (
+    <View style={mergedStyles.container}>
+      <View style={mergedStyles.track}>
+        {/* @ts-expect-error - Motion.View type compatibility issue */}
+        <Motion.View
+          style={mergedStyles.fill}
+          animate={{ width: `${progressPercent}%` }}
+          transition={{ type: 'tween', duration: 200 }}
+        />
+      </View>
+      {icon && progressPercent > 0 && (
+        // @ts-expect-error - Motion.View type compatibility issue
+        <Motion.View
+          style={mergedStyles.iconContainer}
+          animate={{ left: `${progressPercent}%` }}
+          transition={{ type: 'tween', duration: 200 }}
+        >
+          <Icon
+            iconId={icon}
+            width={mergedStyles.icon?.width || 16}
+            height={mergedStyles.icon?.height || 16}
+            style={mergedStyles.icon}
+            {...iconProps}
+          />
+        </Motion.View>
+      )}
+    </View>
+  )
+}
+
+const circularStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+const linearStyles = StyleSheet.create({
+  container: {
+    height: 5,
+  },
+  track: {
+    flex: 1,
+    height: '100%',
+    backgroundColor: 'bgsecondary',
+    borderRadius: 9999,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    backgroundColor: '#266EF1',
+    borderRadius: 9999,
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: '50%',
+    transform: [{ translateX: -8 }, { translateY: -8 }],
+  },
+})

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

@@ -0,0 +1,117 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Text } from '@gauntlet/components/atoms/text'
+import { Button, Icon } from '@gauntlet/ui-builder'
+import Svg, { Path } from 'react-native-svg'
+import { useDeviceDimensions } from '@gauntlet/state'
+
+interface GoalSuccessModalContentProps {
+  title: string
+  message: string
+  buttonText: string
+  iconId?: string
+  onClose: () => void
+  style?: {
+    container?: any
+    iconWrapper?: any
+    icon?: any
+    title?: any
+    message?: any
+    button?: any
+    buttonText?: any
+  }
+}
+
+function curvedTopPath(W: number, H: number, curvature = 0.11) {
+  const D = H * curvature
+  return `M0 ${D} Q${W / 2} 0 ${W} ${D} V${H} H0 Z`
+}
+
+export function GoalSuccessModalContent({
+  title,
+  message,
+  buttonText,
+  iconId,
+  onClose,
+  style,
+}: GoalSuccessModalContentProps) {
+  const { width, height } = useDeviceDimensions()
+  const curvedHeight = height * 0.5
+  return (
+    <View style={[styles.container, style?.container]}>
+      <Svg
+        width={width}
+        height={curvedHeight + 24}
+        viewBox={`0 0 ${width} ${curvedHeight + 24}`}
+        fill="none"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <Path d={curvedTopPath(width, curvedHeight + 24)} fill="#fff" />
+      </Svg>
+
+      <View style={[styles.iconWrapper, style?.iconWrapper]}>
+        <Icon
+          iconId={iconId || 'goal-discount-filled'}
+          width={style?.icon?.width || 56}
+          height={style?.icon?.height || 56}
+          fill={style?.icon?.fill || "#0E8345"}
+          style={style?.icon}
+        />
+      </View>
+
+      <Text style={[styles.title, style?.title]}>{title}</Text>
+      <Text style={[styles.message, style?.message]}>{message}</Text>
+      <Button text={buttonText} style={styles.button} onPress={onClose} />
+    </View>
+  )
+}
+
+const styles = {
+  container: {
+    alignItems: 'center' as const,
+    backgroundColor: 'transparent',
+    position: 'relative' as const,
+    justifyContent: 'center' as const,
+    paddingTop: 70,
+  },
+  iconWrapper: {
+    marginBottom: 16,
+    position: 'absolute' as const,
+    top: 0,
+    height: 48,
+    width: 48,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  },
+  title: {
+    kind: 'heading-xxl',
+    color: 'textprimary',
+    marginBottom: 8,
+  },
+  message: {
+    kind: 'label-s',
+    color: 'texttertiary',
+    marginBottom: 24,
+  },
+  button: {
+    kind: 'primary',
+    root: {
+      flexShrink: 0,
+      alignSelf: 'center' as const,
+      borderWidth: 0,
+      backgroundColor: '#0E8345',
+      paddingHorizontal: 32,
+      paddingVertical: 14,
+    },
+    text: {
+      color: '#FFFFFF',
+      kind: 'heading-s',
+    },
+  },
+}

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

@@ -0,0 +1,40 @@
+import { useCallback } from 'react'
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
+import { useTierChange } from './use-tier-change'
+
+export type CartGoalHapticType = 'tierAchieved' | 'tierLost'
+
+const hapticConfig = {
+  enableVibrateFallback: true,
+  ignoreAndroidSystemSettings: true,
+}
+
+function triggerCartGoalHaptic(type: CartGoalHapticType) {
+  switch (type) {
+    case 'tierAchieved':
+      ReactNativeHapticFeedback.trigger('impactHeavy', hapticConfig)
+      break
+    case 'tierLost':
+      ReactNativeHapticFeedback.trigger('soft', hapticConfig)
+      break
+  }
+}
+
+/**
+ * Triggers haptic feedback when tier status changes.
+ * - tierAchieved: fires when achieving any new tier (index increases)
+ * - tierLost: fires when losing a tier (index decreases), not when moving forward
+ *
+ * @param highestAchievedTierIndex - The 0-based index of the highest achieved tier, or null if no tier achieved
+ */
+export function useCartGoalHaptics(highestAchievedTierIndex: number | null) {
+  const onTierAchieved = useCallback(() => {
+    triggerCartGoalHaptic('tierAchieved')
+  }, [])
+
+  const onTierLost = useCallback(() => {
+    triggerCartGoalHaptic('tierLost')
+  }, [])
+
+  useTierChange(highestAchievedTierIndex, { onTierAchieved, onTierLost })
+}