@app-brew/brewery 1.0.0

package/src/components/src/organisms/shopify-rich-text-block/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import {
+  transformNameSpaceOrKey,
+  useBlock,
+  useMultipleMetafields,
+} from '@gauntlet/state'
+import { BaseBlockProps, ProductHandle } from '@gauntlet/types'
+import { View } from 'react-native'
+import { RichTextLayoutItem } from '@gauntlet/ui-builder'
+
+type ShopifyRichTextBlockProps = BaseBlockProps & {
+  productHandle: ProductHandle
+}
+
+export function ShopifyRichTextBlock({
+  screenId,
+  instanceId,
+  componentId,
+  productHandle,
+}: ShopifyRichTextBlockProps) {
+  const block = useBlock<any>(screenId, componentId, instanceId)
+  const settings = useBlockSettings(block)
+  const style = useBlockStyle(block)
+
+  const ListOfNamespaceAndKeys: Array<{
+    namespace: string
+    key: string
+    reference?: string
+  }> = [
+    {
+      namespace: block.source.metafield.namespace,
+      key: block.source.metafield.key,
+    },
+  ]
+  const metafieldData = useMultipleMetafields(
+    productHandle,
+    ListOfNamespaceAndKeys
+  )
+
+  if (!block || !style || !settings || !metafieldData) return null
+  if (!metafieldData[block.source.metafield?.namespace]) return null
+
+  const label =
+    metafieldData[block.source.metafield?.namespace][
+      transformNameSpaceOrKey(block.source.metafield?.key)
+    ]
+
+  return (
+    <RichTextLayoutItem
+      data={label}
+      style={style}
+      options={settings.options}
+      source={settings.source}
+    />
+  )
+}

package/src/components/src/organisms/shopify-store-credits/index.tsx

@@ -0,0 +1,369 @@
+import * as React from 'react'
+import {
+  useBlockSettings,
+  useBlockStyle,
+} from '@gauntlet/components/style-utils'
+import { useAppStore, useBlock } from '@gauntlet/state'
+import { BaseBlockProps } from '@gauntlet/types'
+import { useEffect, useState } from 'react'
+import { Text } from '@gauntlet/components/atoms/text'
+import { ActivityIndicator, View } from 'react-native'
+import { Icon } from '@gauntlet/icons'
+
+interface Config {
+  graphql_api: string
+  mcp_api: string
+  authorization_endpoint: string
+  token_endpoint: string
+}
+
+interface Transaction {
+  node: {
+    event: string
+    __typename: string
+    createdAt: string
+    amount: { amount: string; currencyCode: string }
+  }
+}
+
+interface StoreCreditNode {
+  node: {
+    id: string
+    balance: { amount: string; currencyCode: string }
+    transactions: { edges: Transaction[] }
+  }
+}
+
+interface BlockSource {
+  balanceTitle?: string
+  transactionsTitle?: string
+  balanceSubtitle?: string
+  balanceIconId?: string
+  emptyStateHeading?: string
+  emptyStateDescription?: string
+}
+
+type TransactionDirection = 'CREDIT' | 'DEBIT' | 'EXPIRATION' | 'UNKNOWN'
+
+const DEFAULT_TRANSACTION_CONFIG: Record<
+  TransactionDirection,
+  { color: string; prefix: string }
+> = {
+  CREDIT: { color: '#22c55e', prefix: '+ ' },
+  DEBIT: { color: '#ef4444', prefix: '- ' },
+  EXPIRATION: { color: '#9ca3af', prefix: '' },
+  UNKNOWN: { color: '#9ca3af', prefix: '' },
+}
+
+export function ShopifyStoreCredits({
+  screenId,
+  componentId,
+  instanceId,
+}: BaseBlockProps) {
+  const block = useBlock(screenId, componentId, instanceId)
+  const { options } = useBlockSettings(block)
+  const style = useBlockStyle(block)
+  const source = block.source as BlockSource
+
+  const [config, setConfig] = useState<Config | null>(null)
+  const [storeCredits, setStoreCredits] = useState<StoreCreditNode[] | null>(
+    null
+  )
+  const customerAccountsToken = useAppStore
+    .getState()
+    .user.getCustomerAccountsAccessToken()
+  const [loading, setLoading] = useState(true)
+  const [isEmpty, setIsEmpty] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const getCurrencySymbol =
+    useAppStore.getState().localization.getCurrencySymbol
+
+  const shopifyDomain =
+    options?.domain ||
+    (useAppStore.getState().config.data?.integrations?.shopify
+      ?.domain as string)
+
+  const showTransactions = options?.showTransactions ?? true
+  const transactionConfig: Record<
+    TransactionDirection,
+    { color: string; prefix: string }
+  > = {
+    ...DEFAULT_TRANSACTION_CONFIG,
+    ...(options?.transactionConfig ?? {}),
+  }
+
+  useEffect(() => {
+    loadConfig()
+  }, [])
+
+  useEffect(() => {
+    if (config) {
+      fetchStoreCredits()
+    }
+  }, [config])
+
+  const loadConfig = async () => {
+    try {
+      const response = await fetch(
+        `https://${shopifyDomain}/.well-known/customer-account-api`
+      )
+
+      if (!response.ok) {
+        throw new Error('Failed to load Customer Account API config')
+      }
+      const data = await response.json()
+      setConfig(data)
+    } catch (err) {
+      setError('Failed to load configuration')
+      console.error('Config error:', err)
+      setLoading(false)
+    }
+  }
+
+  const fetchStoreCredits = async () => {
+    try {
+      setLoading(true)
+
+      if (!customerAccountsToken) {
+        setError('No access token found. Please login.')
+        setLoading(false)
+        return
+      }
+
+      const query = `
+        query {
+          customer {
+            id
+            storeCreditAccounts(first: 10) {
+              edges {
+                node {
+                  id
+                  balance {
+                    amount
+                    currencyCode
+                  }
+                  transactions(first: 20) {
+                    edges {
+                      node {
+                        event
+                        amount {
+                          amount
+                          currencyCode
+                        }
+                        __typename
+                        createdAt
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      `
+
+      const response = await fetch(config?.graphql_api || '', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: customerAccountsToken,
+        },
+        body: JSON.stringify({ query }),
+      })
+
+      if (!response.ok) {
+        const errorText = await response.text()
+        console.error('API Error:', response.status, errorText)
+        throw new Error(`API error: ${response.status}`)
+      }
+
+      const data = await response.json()
+
+      if (data.errors) {
+        console.error('GraphQL Errors:', data.errors)
+        setError(data.errors[0]?.message || 'Failed to fetch store credits')
+      } else {
+        const credits = data.data?.customer?.storeCreditAccounts?.edges
+        setStoreCredits(credits || [])
+        if (!credits || credits.length === 0) {
+          setIsEmpty(true)
+        }
+      }
+    } catch (err) {
+      console.error('Fetch error:', err)
+      setError(
+        err instanceof Error ? err.message : 'Failed to fetch store credits'
+      )
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <View
+        style={[
+          style,
+          { padding: 20, justifyContent: 'center', alignItems: 'center' },
+        ]}
+      >
+        <ActivityIndicator size="large" />
+        <Text style={{ marginTop: 10 }}>Loading store credits...</Text>
+      </View>
+    )
+  }
+
+  if (error) {
+    return (
+      <View style={[style, { padding: 20 }]}>
+        <Text style={{ color: 'red' }}>Error: {error}</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={style.root}>
+      {storeCredits &&
+        storeCredits.length > 0 &&
+        storeCredits
+          .filter((credit) => credit?.node?.id)
+          .map((credit) => {
+            const { amount, currencyCode } = credit.node.balance
+            const currencySymbol = getCurrencySymbol(currencyCode)
+            const transactions = credit.node.transactions.edges
+
+            return (
+              <View key={credit.node.id} style={style?.container}>
+                <StoreCreditBalance
+                  currencySymbol={currencySymbol}
+                  amount={amount}
+                  title={source?.balanceTitle}
+                  subtitle={source?.balanceSubtitle}
+                  iconId={source?.balanceIconId}
+                  style={style?.currentBalance}
+                />
+                {showTransactions && transactions.length > 0 && (
+                  <View style={style.transactions.root}>
+                    <View style={style.transactions.headingContainer}>
+                      <Text style={style.transactions.heading}>
+                        {source?.transactionsTitle ?? 'Transactions'}
+                      </Text>
+                    </View>
+                    {transactions.map((transaction, index) => {
+                      const {
+                        event,
+                        createdAt,
+                        amount: transactionAmount,
+                        __typename,
+                      } = transaction.node
+                      const type = getTransactionType(__typename)
+                      const { color, prefix } = transactionConfig[type]
+
+                      const formattedDate = new Date(
+                        createdAt
+                      ).toLocaleDateString('en-US', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      })
+
+                      return (
+                        <View
+                          key={`${createdAt}-${event}`}
+                          style={style.transactions.item.root}
+                        >
+                          <View style={style.transactions.item.wrapper}>
+                            <View style={style.transactions.item.container}>
+                              <Text style={style.transactions.item.event}>
+                                {event}
+                              </Text>
+                              <Text style={style.transactions.item.date}>
+                                {formattedDate}
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={[style.transactions.item.amount, { color }]}
+                          >
+                            {prefix}
+                            {currencySymbol} {transactionAmount.amount}
+                          </Text>
+                        </View>
+                      )
+                    })}
+                  </View>
+                )}
+              </View>
+            )
+          })}
+      {isEmpty && (
+        <View style={style?.emptyState?.root}>
+          {source?.emptyStateHeading && (
+            <Text style={style?.emptyState?.heading}>
+              {source.emptyStateHeading}
+            </Text>
+          )}
+          {source?.emptyStateDescription && (
+            <Text style={style?.emptyState?.description}>
+              {source.emptyStateDescription}
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  )
+}
+
+function StoreCreditBalance({
+  currencySymbol,
+  amount,
+  title,
+  subtitle,
+  iconId,
+  style,
+}: {
+  currencySymbol: string | undefined
+  amount: string | undefined
+  title?: string
+  subtitle?: string
+  iconId?: string
+  style: any
+}) {
+  return (
+    <View style={style?.root}>
+      {iconId && (
+        <Icon
+          iconId={iconId}
+          width={style?.icon?.width}
+          height={style?.icon?.height}
+          style={style?.icon}
+        />
+      )}
+      <View style={{ flex: 1 }}>
+        {title && <Text style={style?.title}>{title}</Text>}
+        {subtitle && <Text style={style?.subtitle}>{subtitle}</Text>}
+      </View>
+      {style?.separator && <View style={style?.separator} />}
+      <Text style={style?.balance}>
+        {currencySymbol}
+        {amount}
+      </Text>
+    </View>
+  )
+}
+
+function getTransactionType(typename: string): TransactionDirection {
+  if (
+    typename.includes('CreditTransaction') ||
+    typename.includes('DebitRevertTransaction')
+  ) {
+    return 'CREDIT'
+  }
+  if (typename === 'StoreCreditAccountDebitTransaction') {
+    return 'DEBIT'
+  }
+  if (typename === 'StoreCreditAccountExpirationTransaction') {
+    return 'EXPIRATION'
+  }
+  return 'UNKNOWN'
+}

package/src/components/src/organisms/sign-in/index.tsx

@@ -0,0 +1,242 @@
+import * as React from 'react'
+import {
+  useAppStore,
+  useBlock,
+  useDeviceDimensions,
+  useGlobalSettings,
+  useTheme,
+  useUser,
+} from '@gauntlet/state'
+import { useBlockSettings, useBlockStyle } from '../../style-utils'
+import { BaseBlockProps, SignInBlockConfig } from '@gauntlet/types'
+import { useForm, useFormState } from 'react-hook-form'
+import { Section } from '../../atoms/section'
+import { Column } from '../../atoms/flex'
+import { Keyboard, Platform, View } from 'react-native'
+import { Text } from '../../atoms/text'
+import { Button } from '../../atoms/button'
+import { LinkButton } from '../../atoms/link'
+import { ScaledImage } from '../../atoms/image'
+import Toast from 'react-native-toast-message'
+import { SocialAuth } from '../../molecules/social-sign-in/social-auth'
+import { getModifiedSections } from '../address-form'
+import { AddressFormInputField } from '../address-form-input-field'
+
+export type SigninFormInputs = {
+  email: string
+  password: string
+}
+
+export type SignInBlockProps = BaseBlockProps & {
+  redirectTo?: string
+  redirectParams?: { [param: string]: string }
+}
+
+export function SignIn({
+  componentId,
+  instanceId,
+  screenId,
+  redirectTo,
+  redirectParams,
+}: SignInBlockProps) {
+  const gotoLink = useAppStore((s) => s.route.gotoLink)
+  const back = useAppStore((s) => s.route.back)
+  const dimensions = useDeviceDimensions()
+  const block = useBlock<SignInBlockConfig>(screenId, componentId, instanceId)
+  const style = useBlockStyle(block)
+  const theme = useTheme()
+  const globalSettings = useGlobalSettings()
+  const logo = globalSettings?.logo ?? block.source.logo
+  const { getFormData, updateFormData, signin } = useUser()
+  const { control, watch, handleSubmit } = useForm<SigninFormInputs>({
+    mode: 'all',
+    reValidateMode: 'onChange',
+    defaultValues: { ...getFormData('signin') },
+  })
+  const { options } = useBlockSettings(block)
+
+  const onSubmit = async () => {
+    const res = await signin()
+    if (`success` in res) {
+      Toast.show({
+        type: 'success',
+        text1: res.success,
+      })
+      if (redirectTo) {
+        gotoLink({
+          kind: 'screen',
+          value: redirectTo,
+          params: redirectParams,
+        })
+      } else {
+        back()
+      }
+      return
+    }
+    Toast.show({ text1: res?.error, type: `error` })
+  }
+
+  const { sections } = block.layout
+
+  const updatedSections = React.useMemo(
+    () => getModifiedSections(sections),
+    [sections]
+  )
+
+  React.useEffect(() => {
+    const subscription = watch((value) => {
+      updateFormData('signin', value)
+    })
+    return () => subscription.unsubscribe()
+  }, [watch, updateFormData])
+
+  const formState = useFormState({ control })
+
+  const socialSigninProviders =
+    (Platform.OS === 'android'
+      ? options?.socialSigninProviders?.android
+      : options?.socialSigninProviders?.ios) || []
+
+  if (!block) return null
+
+  return (
+    <Section
+      style={{
+        height: dimensions.height,
+        ...style?.root,
+      }}
+    >
+      {!!logo && (
+        <View style={style.logo.root}>
+          <ScaledImage
+            uri={logo}
+            height={
+              theme?.appBar.root.height -
+              (theme?.appBar.root.paddingVertical ?? 0) * 2
+            }
+          />
+        </View>
+      )}
+      <Column
+        style={{
+          justifyContent: 'space-between',
+        }}
+      >
+        {updatedSections.map(({ title, fields }, index) => {
+          return (
+            <Column
+              style={{
+                justifyContent: 'space-between',
+              }}
+              key={index}
+            >
+              {Boolean(title) && (
+                <Text style={{ ...style.sectionHeading }}>{title}</Text>
+              )}
+
+              <Column style={{}}>
+                {fields.map((field) => {
+                  return (
+                    <AddressFormInputField
+                      {...field}
+                      formState={formState}
+                      control={control}
+                      style={style}
+                      key={field.id}
+                    />
+                  )
+                })}
+              </Column>
+              <LinkButton
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'center',
+                  ...style?.forgotPasswordLink.root,
+                }}
+                path="forgot-password"
+              >
+                <Text
+                  style={{
+                    ...style?.forgotPasswordLink.text,
+                    textAlign: 'center',
+                  }}
+                >
+                  {block.source?.forgotPassword.linkText}
+                </Text>
+              </LinkButton>
+            </Column>
+          )
+        })}
+        <Button
+          onPress={handleSubmit(async () => {
+            Keyboard.dismiss()
+            await onSubmit()
+          })}
+          title={block.source.signInText}
+          style={{
+            ...style?.signInButton,
+          }}
+        ></Button>
+
+        {Boolean(globalSettings.defaultSigninScreen === 'otp-login') ? (
+          <Button
+            title="Sign in with phone number"
+            style={style?.signinWithPhoneButton}
+            onPress={() =>
+              gotoLink({
+                kind: 'screen',
+                value: 'otp-login',
+                params: {
+                  redirectTo,
+                  redirectParams,
+                },
+              })
+            }
+          />
+        ) : null}
+
+        <SocialAuth
+          socialSigninProviders={socialSigninProviders}
+          socialStyles={style.social}
+          redirectLink={{ kind: 'screen', value: redirectTo || 'account' }}
+        />
+
+        <LinkButton
+          style={{
+            justifyContent: 'center',
+            ...style?.guestUserText.root,
+          }}
+          path="home"
+        >
+          <Text
+            style={{
+              ...style?.guestUserText.text,
+              textAlign: 'center',
+            }}
+          >
+            {block.source?.guestUserText}
+          </Text>
+        </LinkButton>
+      </Column>
+      <LinkButton
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          ...style?.signup.root,
+        }}
+        path="signup"
+      >
+        <Text
+          style={{
+            ...style?.signup.text,
+            textAlign: 'center',
+          }}
+        >
+          {block.source?.signupText}
+        </Text>
+      </LinkButton>
+    </Section>
+  )
+}