@app-brew/brewery 1.0.0

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

@@ -0,0 +1,802 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { ActivityIndicator, Pressable, View, ScrollView } from 'react-native'
+import { BaseBlockProps, Customer } from '@gauntlet/types'
+import { useBlockSettings, useBlockStyle } from '@gauntlet/components/style-utils'
+import {
+  useBlock,
+  useConfig,
+  useUser,
+  useDeviceDimensions,
+  useModal,
+} from '@gauntlet/state'
+import { deepMerge } from '@gauntlet/components/utils'
+import {
+  FormField,
+  SchemaProfileField,
+  TextValidations,
+  DateField,
+  SelectField,
+  CustomerMetafield,
+  DateConstraints,
+  ProfileUpdatePayload,
+  CountrySelectorValue,
+} from './types'
+import { FormInput } from '@gauntlet/components/molecules/form-input'
+import { CalendarDatePickerInput } from '@gauntlet/components/atoms/date-picker'
+import { Icon } from '@gauntlet/components/atoms/icon'
+import { NavIconIds } from '@gauntlet/icons'
+import { ChoiceSheetContent } from '@gauntlet/components/molecules/choice-sheet-content'
+import { Text } from '@gauntlet/components/atoms/text'
+import { Column, Spacer } from '@gauntlet/components/atoms/flex'
+import { Button } from '@gauntlet/ui-builder'
+
+import {
+  BUILT_IN_KEYS,
+  CUSTOMER_RICH_PROFILE_INTEGRATION_ID,
+  DEFAULT_DATE_DISPLAY_FORMAT,
+  DEFAULT_ERROR_LOAD_PROFILE_TITLE,
+  DEFAULT_RETRY_BUTTON_LABEL,
+  DEFAULT_RIGHT_ICON_COLLAPSED,
+  DEFAULT_SAVE_BUTTON_LABEL,
+  DEFAULT_SAVE_BUTTON_LOADING_LABEL,
+  DEFAULT_SHOPIFY_FIELDS,
+  EMPTY_COUNTRY,
+  ERROR_COLOR,
+  FIELD_DEFAULTS,
+  METAFIELD_NAMESPACE,
+} from './constants'
+import {
+  buildFormField,
+  calculateDateConstraints,
+  formatFieldValueForApi,
+  getFieldFormat,
+  isSavedValueEmpty,
+  mergeUserData,
+  parseRawMetafieldValue,
+  schemaFieldToFormField,
+  validateField,
+} from './utils'
+import {
+  localStyles,
+  separateBordersPhoneStyle,
+  formInputStyles,
+  dropdownStyles,
+  dropdownStylesWithIcon,
+} from './styles'
+import Toast from 'react-native-toast-message'
+
+const emptyObject = {} as unknown
+const emptyArray = [] as unknown[]
+const MODAL_CONTENT_STYLE = { contentContainer: { flex: undefined } }
+
+function applyImmutableRoot<T extends { root?: object }>(
+  style: T,
+  immutable: boolean,
+  immutableRoot: object
+): T {
+  if (!immutable || !style.root) return style
+  return { ...style, root: { ...style.root, ...immutableRoot } } as T
+}
+
+export interface ProfileEditContentProps {
+  source: Record<string, any> | undefined
+  options: Record<string, any> | undefined
+  styles: Record<string, any>
+}
+
+export function ProfileEditContent(props: ProfileEditContentProps) {
+  const { source, options, styles } = props
+  const { data: userState, updateProfile } = useUser()
+  const userDetails = userState.userDetails.status === 'idle' ? userState.userDetails.data : undefined
+  const { width, height } = useDeviceDimensions()
+  const {
+    setModalContent,
+    setModalHeight,
+    setModalStyle,
+    setShowCloseIcon,
+    setModalVisibility,
+  } = useModal()
+
+  const loadingStyle = useMemo(
+    () => ({ ...styles.loadingContainer, width, height }),
+    [width, height, styles.loadingContainer]
+  )
+
+  const shopifyFields: string[] = useMemo(() => {
+    const fromOptions = options?.shopifyFields
+    if (Array.isArray(fromOptions)) {
+      return fromOptions.filter((k) => BUILT_IN_KEYS.includes(k as keyof Customer))
+    }
+    return DEFAULT_SHOPIFY_FIELDS
+  }, [options?.shopifyFields])
+  const fieldOverrides: Record<string, Partial<FormField>> =
+    (options?.fields as Record<string, Partial<FormField>>) ?? emptyObject
+  const saveButtonLabel =
+    source?.saveButtonLabel ?? DEFAULT_SAVE_BUTTON_LABEL
+  const saveButtonLoadingLabel =
+    source?.saveButtonLoadingLabel ?? DEFAULT_SAVE_BUTTON_LOADING_LABEL
+
+  const config = useConfig()
+  const customerRichProfile = config?.data?.integrations?.[
+    CUSTOMER_RICH_PROFILE_INTEGRATION_ID
+  ] as { profileFields?: SchemaProfileField[] } | undefined
+  const profileFields =
+    customerRichProfile?.profileFields ?? (options?.testingProfileFields ?? emptyArray) as SchemaProfileField[]
+  const schemaFieldsByKey = useMemo(() => {
+    const map: Record<string, SchemaProfileField> = {}
+    profileFields.forEach((f) => {
+      map[f.key] = f
+    })
+    return map
+  }, [profileFields])
+
+  const customFieldKeys = useMemo(
+    () => profileFields.filter((f) => f.hidden !== true).map((f) => f.key),
+    [profileFields]
+  )
+  const orderedFieldKeys = useMemo(
+    () => [...shopifyFields, ...customFieldKeys],
+    [shopifyFields, customFieldKeys]
+  )
+
+  const formFieldsMap = useMemo(() => {
+    const map: Record<string, FormField> = {}
+    shopifyFields.forEach((key) => {
+      if (BUILT_IN_KEYS.includes(key as keyof Customer)) {
+        map[key] = buildFormField(key, fieldOverrides[key])
+      }
+    })
+    customFieldKeys.forEach((key) => {
+      const schemaField = schemaFieldsByKey[key]
+      if (!schemaField) return
+      map[key] = {
+        ...schemaFieldToFormField(schemaField),
+        ...FIELD_DEFAULTS[key],
+        ...fieldOverrides[key],
+      } as FormField
+    })
+    return map
+  }, [shopifyFields, customFieldKeys, fieldOverrides, schemaFieldsByKey])
+
+  const isSchemaLoading = config?.data === undefined
+
+  const userData = useMemo(() => {
+    if (!userDetails) return undefined
+
+    const data: Record<string, string | CountrySelectorValue> = {}
+    const rawMetafields = (userDetails.metafields ?? emptyArray) as CustomerMetafield[]
+    const metafields = rawMetafields.filter(
+      (m): m is CustomerMetafield => m != null
+    )
+    orderedFieldKeys.forEach((key) => {
+      if (BUILT_IN_KEYS.includes(key as keyof Customer)) {
+        data[key] = String(userDetails[key as keyof Customer] ?? '')
+      } else {
+        const mf = metafields.find(
+          (m) => m.namespace === METAFIELD_NAMESPACE && m.key === key
+        )
+        const raw = mf?.value ?? ''
+        const fieldType = formFieldsMap[key]?.type ?? 'text'
+        data[key] = parseRawMetafieldValue(fieldType, raw) as
+          | string
+          | CountrySelectorValue
+      }
+    })
+
+    return data
+  }, [userDetails, orderedFieldKeys, formFieldsMap])
+
+  const getType = (k: string) => formFieldsMap[k]?.type
+
+  const [formData, setFormData] = useState<Record<string, any>>(() =>
+    mergeUserData(orderedFieldKeys, userData as Record<string, any>, getType)
+  )
+  const [hasEdited, setHasEdited] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (userData && !hasEdited) {
+      setFormData(
+        mergeUserData(orderedFieldKeys, userData as Record<string, any>, getType)
+      )
+    }
+  }, [userData, hasEdited, orderedFieldKeys, formFieldsMap])
+
+  const updateField = (key: string, value: any) => {
+    setHasEdited(true)
+    setErrors((prev) => {
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+    setFormData((prev) => ({ ...prev, [key]: value }))
+  }
+
+  const formFields = useMemo(() => {
+    return orderedFieldKeys
+      .map((key) => formFieldsMap[key])
+      .filter(Boolean) as FormField[]
+  }, [orderedFieldKeys, formFieldsMap])
+
+  const effectiveImmutableByKey = useMemo(() => {
+    const map: Record<string, boolean> = {}
+    formFields.forEach((field) => {
+      map[field.key] =
+        field.immutable && !isSavedValueEmpty(field, userData?.[field.key])
+    })
+    return map
+  }, [formFields, userData])
+
+  const dateConstraintsMap = useMemo(() => {
+    const constraints: Record<string, DateConstraints> = {}
+    formFields.forEach((field) => {
+      if (field.type === 'date') {
+        const dateField = field as DateField
+        constraints[field.key] = calculateDateConstraints(dateField.validations)
+      }
+    })
+    return constraints
+  }, [formFields])
+
+  const validateForm = (): boolean => {
+    const nextErrors: Record<string, string> = {}
+    formFields.forEach((field) => {
+      if (effectiveImmutableByKey[field.key]) return
+      const value = formData[field.key] ?? ''
+      const dateConstraints = dateConstraintsMap[field.key]
+      const err = validateField(field, value, dateConstraints)
+      if (err) nextErrors[field.key] = err
+    })
+    setErrors(nextErrors)
+    return Object.keys(nextErrors).length === 0
+  }
+
+  const getPayloadForApi = () => {
+    const payload: Record<string, any> = {}
+    formFields.forEach((field) => {
+      if (effectiveImmutableByKey[field.key]) return
+
+      const currentEmpty = isSavedValueEmpty(field, formData[field.key])
+
+      // Field is empty (never filled or cleared) — send null
+      if (currentEmpty) {
+        payload[field.key] = null
+        return
+      }
+
+      payload[field.key] = formatFieldValueForApi(
+        field.type,
+        formData[field.key],
+        getFieldFormat(field)
+      )
+    })
+    return payload
+  }
+
+  const handleSave = async () => {
+    if (!hasEdited) return
+    if (!validateForm()) return
+
+    const payload = getPayloadForApi()
+    const builtIn: Record<string, string | null> = {}
+    const custom: Record<string, string | null> = {}
+
+    Object.entries(payload).forEach(([key, val]) => {
+      const value = val === null ? null : String(val ?? '')
+      if (BUILT_IN_KEYS.includes(key as keyof Customer)) {
+        builtIn[key] = value
+      } else {
+        custom[key] = value
+      }
+    })
+
+    const patchPayload: ProfileUpdatePayload = { ...builtIn }
+    if (Object.keys(custom).length > 0) {
+      patchPayload.metafields = custom
+    }
+
+    setSaving(true)
+    try {
+      const res = await updateProfile?.(patchPayload)
+      if (res && 'error' in res) {
+        setErrors({})
+        const message =
+          Array.isArray(res.errors) && res.errors.length > 0
+            ? res.errors.join('\n')
+            : res.error
+        Toast.show({
+          type: 'error',
+          text1: message,
+        })
+        return
+      }
+      if (res && 'success' in res) {
+        Toast.show({
+          type: 'success',
+          text1: res.success,
+        })
+      }
+      setHasEdited(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const renderField = (field: FormField) => {
+    if (field.hidden) return null
+
+    const effectiveImmutable = effectiveImmutableByKey[field.key] ?? false
+    const fieldIcon = 'icon' in field ? field.icon : undefined
+    const fieldError = errors[field.key]
+      ? { message: errors[field.key] }
+      : undefined
+
+    if (field.type === 'phone') {
+      const phoneStyleBase = applyImmutableRoot(
+        formInputStyles.phone,
+        effectiveImmutable,
+        styles.immutableRoot
+      )
+      const phoneStyle =
+        effectiveImmutable && phoneStyleBase.phone
+          ? {
+            ...phoneStyleBase,
+            phone: {
+              ...phoneStyleBase.phone,
+              codeText: {
+                ...phoneStyleBase.phone.codeText,
+                ...styles.immutableText,
+              },
+              textInput: {
+                ...phoneStyleBase.phone.textInput,
+                ...styles.immutableText,
+              },
+            },
+          }
+          : phoneStyleBase
+      const phoneSeparateBordersStyle = effectiveImmutable
+        ? {
+          ...separateBordersPhoneStyle,
+          countryCodeText: {
+            ...separateBordersPhoneStyle.countryCodeText,
+            ...styles.immutableText,
+          },
+          numberInput: {
+            ...separateBordersPhoneStyle.numberInput,
+            ...styles.immutableText,
+          },
+        }
+        : separateBordersPhoneStyle
+      return (
+        <View key={field.key} style={styles.fieldWrapper}>
+          <FormInput
+            type="phone"
+            label={field.label}
+            value={formData[field.key] ?? ''}
+            onChangeText={(formattedPhone) =>
+              updateField(field.key, formattedPhone)
+            }
+            placeholder={field.placeholder}
+            required={!field.isOptional}
+            hideLabel={false}
+            editable={!effectiveImmutable}
+            style={phoneStyle as any}
+            separateBorders={true}
+            separateBordersStyle={phoneSeparateBordersStyle}
+            error={fieldError}
+            showInlineError
+          />
+        </View>
+      )
+    }
+
+    if (field.type === 'country') {
+      const countryStyleBase = applyImmutableRoot(
+        formInputStyles.country,
+        effectiveImmutable,
+        styles.immutableRoot
+      )
+      const countryStyle = effectiveImmutable
+        ? {
+          ...countryStyleBase,
+          root: { ...countryStyleBase.root, ...styles.immutableText },
+          countryName: countryStyleBase.countryName
+            ? {
+              text: {
+                ...countryStyleBase.countryName.text,
+                ...styles.immutableText,
+              },
+            }
+            : countryStyleBase.countryName,
+          text: {
+            ...countryStyleBase.text,
+            ...styles.immutableText,
+          },
+        }
+        : countryStyleBase
+      return (
+        <View
+          key={field.key}
+          style={styles.fieldWrapper}
+          pointerEvents={effectiveImmutable ? 'none' : 'auto'}
+        >
+          <FormInput
+            type="country"
+            label={field.label}
+            value={formData[field.key] ?? EMPTY_COUNTRY}
+            onChangeText={(country) => updateField(field.key, country)}
+            placeholder={field.placeholder}
+            required={!field.isOptional}
+            hideLabel={false}
+            style={countryStyle as any}
+            rightIcon={DEFAULT_RIGHT_ICON_COLLAPSED}
+            error={fieldError}
+            showInlineError
+          />
+        </View>
+      )
+    }
+
+    if (field.type === 'date') {
+      const { minDate, maxDate } =
+        dateConstraintsMap[field.key] ??
+        emptyObject
+      const dateField = field as DateField
+      const dateValue = formData[field.key] ?? ''
+      const displayFormat = dateField.format ?? DEFAULT_DATE_DISPLAY_FORMAT
+
+      const dateRootStyle = {
+        ...formInputStyles.date.root,
+        ...(fieldError && { borderColor: ERROR_COLOR }),
+        ...(effectiveImmutable && { text: { ...formInputStyles.date.root.text, ...styles.immutableText } }),
+      }
+
+      return (
+        <View
+          key={field.key}
+          style={styles.fieldWrapper}
+          pointerEvents={effectiveImmutable ? 'none' : 'auto'}
+        >
+          <Column>
+            <Text style={styles.label}>
+              {field.label}
+              {!field.isOptional && '*'}
+            </Text>
+            <Spacer height={styles.labelDropdownGap.height} />
+            <CalendarDatePickerInput
+              value={dateValue}
+              placeholder={field.placeholder ?? 'Select date'}
+              style={dateRootStyle}
+              onChangeText={(date) => updateField(field.key, date)}
+              minDate={minDate}
+              maxDate={maxDate}
+              title={dateField.title || field.label}
+              subtitle={dateField.subtitle}
+              sheetHeight={styles?.calendarDatePickerSheetHeight ?? 520}
+              calendarStyle={styles?.calendarDatePicker}
+              calendarTheme={styles?.calendarDatePickerTheme}
+              arrowLeftIcon={styles?.calendarDatePickerArrowLeft}
+              arrowRightIcon={styles?.calendarDatePickerArrowRight}
+              arrowIconWidth={styles?.calendarDatePickerArrowIconWidth}
+              arrowIconHeight={styles?.calendarDatePickerArrowIconHeight}
+              arrowIconColor={styles?.calendarDatePickerArrowIconColor}
+              rightIcon={styles?.calendarDatePickerRightIcon ?? 'calendar'}
+              rightIconWidth={styles?.calendarDatePickerRightIconWidth}
+              rightIconHeight={styles?.calendarDatePickerRightIconHeight}
+              rightIconColor={styles?.calendarDatePickerRightIconColor}
+              displayFormat={displayFormat}
+            />
+            {fieldError && (
+              <>
+                <Spacer height={styles.labelDropdownGap.height} />
+                <Text style={styles.errorMessage}>{fieldError.message}</Text>
+              </>
+            )}
+          </Column>
+        </View>
+      )
+    }
+
+    if (field.type === 'choices') {
+      const selectField = field as SelectField
+      const choices = (selectField.choices ?? emptyArray) as string[]
+      const collapsedIcon =
+        selectField.rightIcon ?? DEFAULT_RIGHT_ICON_COLLAPSED
+      const leftIcon = selectField.icon
+      const baseDropdownStyle = leftIcon ? dropdownStylesWithIcon : dropdownStyles
+      const radioStyle = {
+        ...baseDropdownStyle,
+        root: {
+          ...baseDropdownStyle.root,
+          ...(fieldError && { borderColor: ERROR_COLOR }),
+        },
+      }
+      // Title ~60px, divider ~18px, each option row 40px (8+content+8), 16px gap, bottom padding 24px
+      const computedSheetHeight = Math.min(
+        86 + 56 * choices.length,
+        height * 0.7
+      )
+      const sheetHeight = selectField.choicesSheetHeight ?? computedSheetHeight
+      const modalId = 'profile-edit-choice-' + field.key
+      const openChoiceSheet = () => {
+        setModalHeight(sheetHeight)
+        setModalStyle(MODAL_CONTENT_STYLE)
+        setModalContent(
+          <ChoiceSheetContent
+            title={field.label}
+            options={choices}
+            selectedValue={formData[field.key] ?? ''}
+            onSelect={(value) => {
+              updateField(field.key, value)
+              setModalVisibility(false)
+            }}
+            onClose={() => setModalVisibility(false)}
+            closeIconId={
+              (options?.choicesSheetCloseIcon as NavIconIds) ?? undefined
+            }
+          />,
+          modalId
+        )
+        setShowCloseIcon(false)
+        setModalVisibility(true)
+      }
+
+      return (
+        <View
+          key={field.key}
+          style={styles.fieldWrapper}
+          pointerEvents={effectiveImmutable ? 'none' : 'auto'}
+        >
+          <Column>
+            <Text style={styles.label}>
+              {field.label}
+              {!field.isOptional && '*'}
+            </Text>
+            <Spacer height={styles.labelDropdownGap.height} />
+            <Pressable
+              style={[radioStyle.root, baseDropdownStyle.dropdown]}
+              onPress={effectiveImmutable ? undefined : openChoiceSheet}
+            >
+              {leftIcon && (
+                <Icon
+                  icon={leftIcon as NavIconIds}
+                  {...baseDropdownStyle.leftIcon}
+                />
+              )}
+              <Text
+                style={[
+                  formData[field.key] && String(formData[field.key]).trim()
+                    ? baseDropdownStyle.selectedText
+                    : baseDropdownStyle.placeholder,
+                  effectiveImmutable && styles.immutableText,
+                ]}
+                numberOfLines={1}
+              >
+                {formData[field.key] && String(formData[field.key]).trim()
+                  ? formData[field.key]
+                  : (field.placeholder ?? 'Select item')}
+              </Text>
+              <Icon
+                icon={collapsedIcon as NavIconIds}
+                {...baseDropdownStyle.rightIcon}
+              />
+            </Pressable>
+            {fieldError && (
+              <>
+                <Spacer height={styles.labelDropdownGap.height} />
+                <Text style={styles.errorMessage}>{fieldError.message}</Text>
+              </>
+            )}
+          </Column>
+        </View>
+      )
+    }
+
+    const textStyle = fieldIcon
+      ? formInputStyles.textWithIcon
+      : formInputStyles.text
+    const textInputStyle = applyImmutableRoot(
+      textStyle,
+      effectiveImmutable,
+      styles.immutableText
+    )
+
+    const textValidations =
+      'validations' in field
+        ? (field.validations as TextValidations)
+        : undefined
+
+    const currentLength = String(formData[field.key] ?? '').length
+    const maxLen = textValidations?.length?.max
+
+    return (
+      <View key={field.key} style={styles.fieldWrapper}>
+        <View style={styles.labelRow}>
+          <FormInput
+            type="input"
+            label={field.label}
+            value={formData[field.key] ?? ''}
+            onChangeText={(text) => updateField(field.key, text)}
+            placeholder={field.placeholder}
+            required={!field.isOptional}
+            hideLabel={false}
+            editable={!effectiveImmutable}
+            style={textInputStyle as any}
+            minLength={textValidations?.length?.min}
+            maxLength={textValidations?.length?.max}
+            pattern={textValidations?.regex}
+            error={fieldError}
+            showInlineError
+          />
+          {fieldIcon && (
+            <View style={styles.iconInsideFieldContainer}>
+              <Icon
+                icon={fieldIcon as NavIconIds}
+                {...styles.iconInsideField}
+              />
+            </View>
+          )}
+        </View>
+        {maxLen != null && (
+          <Text style={styles.characterCounter}>
+            {currentLength}/{maxLen}
+          </Text>
+        )}
+      </View>
+    )
+  }
+
+  if (isSchemaLoading) {
+    return (
+      <View style={loadingStyle}>
+        <ActivityIndicator
+          size={styles.loader.size}
+          style={styles.loader}
+        />
+      </View>
+    )
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {formFields.map((field) => renderField(field))}
+      <Spacer height={styles.spacer?.height} />
+      <Button
+        onPress={handleSave}
+        text={saving ? saveButtonLoadingLabel : saveButtonLabel}
+        style={styles.submitButton}
+        disabled={!hasEdited || saving}
+      />
+      <Spacer height={styles.bottomSpacer?.height} />
+    </ScrollView>
+  )
+}
+
+/**
+ * Profile edit block. Renders a form for editing customer profile (Shopify built-in fields + custom metafields).
+ *
+ * ## Built-in fields (Shopify customer)
+ *
+ * | Key        | Label         | Type  | Immutable              |
+ * |------------|---------------|-------|------------------------|
+ * | firstName  | First Name    | text  | No                     |
+ * | lastName   | Last Name     | text  | No                     |
+ * | email      | Email         | text  | Yes (after first save)  |
+ * | phone      | Phone Number  | phone | Yes (after first save)  |
+ *
+ * Immutable fields are editable until the user saves a value; after the first save they become read-only.
+ *
+ * Built-in field order and which fields to show are controlled by **shopifyFields**. Custom fields (stored as customer metafield, namespace `custom`) are not listed there.
+ *
+ * ## Custom fields
+ * Schema, order, and visibility from `config.integrations['customer-rich-profile'].profileFields` or `options.testingProfileFields`. Array order = display order; `hidden: true` = field not shown. Schema types: `text`, `choices`, `date`. Stored as customer metafields on save.
+ *
+ * ## Type mapping (custom fields)
+ * 1. Schema → FormField transform (`text` → text input, `choices` → dropdown with choices, `date` → date picker).
+ * 2. `FIELD_DEFAULTS[key]` merged (e.g. key `country` → type `country`).
+ * 3. `options.fields[key]` merged last. Merge order: transform ← FIELD_DEFAULTS[key] ← options.fields[key].
+ *
+ * ## options
+ * - **shopifyFields** (string[]): Built-in Shopify field keys in display order; only these built-in fields are shown. Default: `['firstName', 'lastName', 'email', 'phone']`. Custom field order/visibility come from customer-rich-profile, not from this option.
+ * - **fields** (Record<string, Partial<FormField>>): Per-field overrides. See "Per-field customizations" below.
+ * - **testingProfileFields** (SchemaProfileField[]): Optional; used when customer-rich-profile profileFields are not in config.
+ * - **choicesSheetCloseIcon** (NavIconIds): Optional; icon id for the close button in the choices bottom sheet (e.g. gender). Defaults to close icon.
+ *
+ * ## source
+ * Labels and titles; fallback to defaults if missing.
+ * - **saveButtonLabel**, **saveButtonLoadingLabel**: Submit button text.
+ * - **errorTitle**: Shown when profile fails to load.
+ * - **retryButtonLabel**: Retry button on error state.
+ *
+ * ## Per-field customizations (options.fields[key])
+ * Optional: label, placeholder, type, hidden, immutable, isOptional, validations, choices (choices), icon, rightIcon. Date fields support **format** (e.g. `dd/MM/yyyy`) for display, **title**, **subtitle** for the calendar sheet header.
+ *
+ * **Validations**: Text — `length: { min?, max? }`, `regex`. Date — `dateRange: { from, to }` (ISO dates), `yearRange: { min?, max? }` (age in years). Phone — `custom?: (value: string) => boolean`.
+ *
+ * @example
+ * options:
+ * ```json
+ * {
+ *   "shopifyFields": ["firstName", "lastName", "email", "phone"],
+ *   "choicesSheetCloseIcon": "close",
+ *   "fields": {
+ *     "gender": { "label": "Gender", "choices": ["Male", "Female", "Other"] },
+ *     "date_of_birth": { "isOptional": false, "validations": { "yearRange": { "min": 18 } } }
+ *   }
+ * }
+ * ```
+ * Custom fields (e.g. gender, date_of_birth) are defined by customer-rich-profile profileFields; their order and visibility come from there.
+ * source:
+ * ```json
+ * {
+ *   "saveButtonLabel": "Save",
+ *   "saveButtonLoadingLabel": "Saving...",
+ *   "errorTitle": "Failed to load profile",
+ *   "retryButtonLabel": "Try again"
+ * }
+ * ```
+ */
+export function ProfileEdit(props: BaseBlockProps) {
+  const { screenId, componentId, instanceId } = props
+  const block = useBlock(screenId, componentId, instanceId)
+  const { source, options } = useBlockSettings(block)
+  const style = useBlockStyle(block)
+  const styles = useMemo(() => deepMerge(localStyles, style), [style])
+
+  return (
+    <ProfileEditContentWrapper source={source} options={options} styles={styles} />
+  )
+}
+
+export function ProfileEditContentWrapper(props: ProfileEditContentProps) {
+  const { source, styles } = props
+  const { data, getUserDetails } = useUser()
+  const status = data?.userDetails?.status
+  const { width, height } = useDeviceDimensions()
+  const sourceCopy = source as Record<string, string> | undefined
+  const errorTitle =
+    sourceCopy?.errorTitle ?? DEFAULT_ERROR_LOAD_PROFILE_TITLE
+  const retryButtonLabel =
+    sourceCopy?.retryButtonLabel ?? DEFAULT_RETRY_BUTTON_LABEL
+
+  const fullScreenStyle = useMemo(
+    () => ({
+      ...styles.loadingContainer,
+      width,
+      height,
+      ...styles.fullScreenWrapper,
+    }),
+    [width, height, styles.loadingContainer, styles.fullScreenWrapper]
+  )
+
+  React.useEffect(() => {
+    getUserDetails?.()
+  }, [getUserDetails])
+
+  if (status === 'loading' || status === 'init') {
+    return (
+      <View style={fullScreenStyle}>
+        <ActivityIndicator
+          size={styles.loader.size}
+          style={styles.loader}
+        />
+      </View>
+    )
+  }
+
+  if (status === 'error' || !data?.userDetails?.data) {
+    return (
+      <View style={fullScreenStyle}>
+        <Text style={styles.errorTitle}>{errorTitle}</Text>
+        <Button
+          onPress={() => getUserDetails?.()}
+          text={retryButtonLabel}
+          style={styles.errorButton}
+        />
+      </View>
+    )
+  }
+
+  return <ProfileEditContent {...props} />
+}