@oxy.so/services 11.2.0-oxy-one.2 → 11.2.0-oxy-one.4

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -11,81 +11,101 @@ import type { PaymentMethod, PaymentColors, PaymentStepAnimations } from './type
 import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentMethodStepProps {
-    availablePaymentMethods: PaymentMethod[];
-    selectedMethod: string;
-    onSelectMethod: (method: string) => void;
-    colors: PaymentColors;
-    animations: PaymentStepAnimations;
-    onBack: () => void;
-    onNext: () => void;
+  availablePaymentMethods: PaymentMethod[];
+  selectedMethod: string;
+  onSelectMethod: (method: string) => void;
+  colors: PaymentColors;
+  animations: PaymentStepAnimations;
+  onBack: () => void;
+  onNext: () => void;
 }
 
 const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
-    availablePaymentMethods,
-    selectedMethod,
-    onSelectMethod,
-    colors,
-    animations,
-    onBack,
-    onNext,
+  availablePaymentMethods,
+  selectedMethod,
+  onSelectMethod,
+  colors,
+  animations,
+  onBack,
+  onNext,
 }) => {
-    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
-    const { t } = useI18n();
-    const { fadeAnim, slideAnim, scaleAnim } = animations;
+  const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+  const { t } = useI18n();
+  const { fadeAnim, slideAnim, scaleAnim } = animations;
 
-    return (
-        <Animated.View
-            style={[
-                styles.stepContainer,
-                {
-                    opacity: fadeAnim,
-                    transform: [
-                        { translateY: slideAnim },
-                        { scale: scaleAnim },
-                    ],
-                },
-            ]}
-            accessibilityRole="none"
-            accessibilityLabel="Choose payment method step"
-        >
-            <View style={styles.section}>
-                <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
+  return (
+    <Animated.View
+      style={[
+        styles.stepContainer,
+        {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }, { scale: scaleAnim }],
+        },
+      ]}
+      accessibilityRole="none"
+      accessibilityLabel="Choose payment method step"
+    >
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
 
-                <SettingsListGroup>
-                    {availablePaymentMethods.map(method => {
-                        const iconColor = method.key === 'card' ? '#007AFF' :
-                            method.key === 'oxy' ? '#32D74B' :
-                                method.key === 'faircoin' ? '#9ffb50' : colors.primary;
-                        const iconElement = method.key === 'faircoin'
-                            ? <FAIRWalletIcon size={20} />
-                            : <Ionicons name={method.icon} size={20} color={iconColor} />;
-                        return (
-                            <SettingsListItem
-                                key={method.key}
-                                icon={iconElement}
-                                title={t(`payment.methods.${method.key}.label`)}
-                                description={t(`payment.methods.${method.key}.description`)}
-                                onPress={() => onSelectMethod(method.key)}
-                                showChevron={false}
-                                rightElement={selectedMethod === method.key ? (
-                                    <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
-                                ) : undefined}
-                            />
-                        );
-                    })}
-                </SettingsListGroup>
-            </View>
+        <SettingsListGroup>
+          {availablePaymentMethods.map((method) => {
+            const iconColor =
+              method.key === 'card'
+                ? '#007AFF'
+                : method.key === 'oxy'
+                  ? '#32D74B'
+                  : method.key === 'faircoin'
+                    ? '#9ffb50'
+                    : colors.primary;
+            const iconElement =
+              method.key === 'faircoin' ? (
+                <FAIRWalletIcon size={20} />
+              ) : (
+                <Ionicons name={method.icon} size={20} color={iconColor} />
+              );
+            return (
+              <SettingsListItem
+                key={method.key}
+                icon={iconElement}
+                title={t(`payment.methods.${method.key}.label`)}
+                description={t(`payment.methods.${method.key}.description`)}
+                onPress={() => onSelectMethod(method.key)}
+                showChevron={false}
+                rightElement={
+                  selectedMethod === method.key ? (
+                    <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
+                  ) : undefined
+                }
+              />
+            );
+          })}
+        </SettingsListGroup>
+      </View>
 
-            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" icon={<Ionicons name="arrow-back" size={16} />}>
-                    {t('payment.actions.back')}
-                </Button>
-                <Button appearance="solid" tone="accent" onPress={onNext} size="sm" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
-                    {t('payment.actions.continue')}
-                </Button>
-            </View>
-        </Animated.View>
-    );
+      <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+        <Button
+          appearance="subtle"
+          tone="neutral"
+          onPress={onBack}
+          size="sm"
+          icon={<Ionicons name="arrow-back" size={16} />}
+        >
+          {t('payment.actions.back')}
+        </Button>
+        <Button
+          appearance="solid"
+          tone="accent"
+          onPress={onNext}
+          size="sm"
+          icon={<Ionicons name="arrow-forward" size={16} />}
+          iconPosition="right"
+        >
+          {t('payment.actions.continue')}
+        </Button>
+      </View>
+    </Animated.View>
+  );
 };
 
 export default PaymentMethodStep;

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -11,116 +11,133 @@ import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types'
 import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentReviewStepProps {
-    amount: string | number;
-    currency: string;
-    paymentMethod: string;
-    cardDetails: CardDetails;
-    colors: PaymentColors;
-    animations: PaymentStepAnimations;
-    isPaying: boolean;
-    onBack: () => void;
-    onPay: () => void;
+  amount: string | number;
+  currency: string;
+  paymentMethod: string;
+  cardDetails: CardDetails;
+  colors: PaymentColors;
+  animations: PaymentStepAnimations;
+  isPaying: boolean;
+  onBack: () => void;
+  onPay: () => void;
 }
 
 const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
-    amount,
-    currency,
-    paymentMethod,
-    cardDetails,
-    colors,
-    animations,
-    isPaying,
-    onBack,
-    onPay,
+  amount,
+  currency,
+  paymentMethod,
+  cardDetails,
+  colors,
+  animations,
+  isPaying,
+  onBack,
+  onPay,
 }) => {
-    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
-    const { t } = useI18n();
-    const currencySymbol = getCurrencySymbol(currency);
-    const { fadeAnim, slideAnim, scaleAnim } = animations;
+  const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+  const { t } = useI18n();
+  const currencySymbol = getCurrencySymbol(currency);
+  const { fadeAnim, slideAnim, scaleAnim } = animations;
 
-    const selectedMethod = PAYMENT_METHODS.find(m => m.key === paymentMethod);
+  const selectedMethod = PAYMENT_METHODS.find((m) => m.key === paymentMethod);
 
-    return (
-        <Animated.View
-            style={[
-                styles.stepContainer,
-                {
-                    opacity: fadeAnim,
-                    transform: [
-                        { translateY: slideAnim },
-                        { scale: scaleAnim },
-                    ],
-                },
-            ]}
-            accessibilityRole="none"
-            accessibilityLabel="Review payment step"
-        >
-            <View style={styles.section}>
-                <Text style={styles.sectionTitle}>{t('payment.review.title')}</Text>
+  return (
+    <Animated.View
+      style={[
+        styles.stepContainer,
+        {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }, { scale: scaleAnim }],
+        },
+      ]}
+      accessibilityRole="none"
+      accessibilityLabel="Review payment step"
+    >
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>{t('payment.review.title')}</Text>
 
-                <SettingsListGroup>
-                    <SettingsListItem
-                        icon={<Ionicons name="shield-checkmark" size={20} color={colors.success} />}
-                        title={t('payment.review.securePayment')}
-                        description={t('payment.review.securePaymentDesc')}
-                        showChevron={false}
-                    />
-                    <SettingsListItem
-                        icon={<Ionicons name="cash-outline" size={20} color={colors.primary} />}
-                        title={t('payment.review.amount')}
-                        description={`${currencySymbol} ${amount}`}
-                        showChevron={false}
-                    />
-                    <SettingsListItem
-                        icon={selectedMethod ? <Ionicons name={selectedMethod.icon} size={20} color={colors.primary} /> : undefined}
-                        title={t('payment.review.paymentMethod')}
-                        description={selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined}
-                        showChevron={false}
-                    />
-                    {paymentMethod === 'card' ? (
-                        <SettingsListItem
-                            icon={<Ionicons name="card-outline" size={20} color={colors.primary} />}
-                            title={t('payment.review.card')}
-                            description={cardDetails.number.replace(/.(?=.{4})/g, '*')}
-                            showChevron={false}
-                        />
-                    ) : null}
-                    {paymentMethod === 'oxy' ? (
-                        <SettingsListItem
-                            icon={<Ionicons name="wallet-outline" size={20} color={colors.primary} />}
-                            title={t('payment.review.peableAccount')}
-                            description={t('payment.details.balance', { balance: '⊜ 123.45' })}
-                            showChevron={false}
-                        />
-                    ) : null}
-                    {paymentMethod === 'faircoin' ? (
-                        <SettingsListItem
-                            icon={<Ionicons name="qr-code-outline" size={20} color={colors.primary} />}
-                            title={t('payment.review.faircoinWallet')}
-                            description={t('payment.review.paidViaQR')}
-                            showChevron={false}
-                        />
-                    ) : null}
-                </SettingsListGroup>
-            </View>
+        <SettingsListGroup>
+          <SettingsListItem
+            icon={<Ionicons name="shield-checkmark" size={20} color={colors.success} />}
+            title={t('payment.review.securePayment')}
+            description={t('payment.review.securePaymentDesc')}
+            showChevron={false}
+          />
+          <SettingsListItem
+            icon={<Ionicons name="cash-outline" size={20} color={colors.primary} />}
+            title={t('payment.review.amount')}
+            description={`${currencySymbol} ${amount}`}
+            showChevron={false}
+          />
+          <SettingsListItem
+            icon={
+              selectedMethod ? (
+                <Ionicons name={selectedMethod.icon} size={20} color={colors.primary} />
+              ) : undefined
+            }
+            title={t('payment.review.paymentMethod')}
+            description={
+              selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined
+            }
+            showChevron={false}
+          />
+          {paymentMethod === 'card' ? (
+            <SettingsListItem
+              icon={<Ionicons name="card-outline" size={20} color={colors.primary} />}
+              title={t('payment.review.card')}
+              description={cardDetails.number.replace(/.(?=.{4})/g, '*')}
+              showChevron={false}
+            />
+          ) : null}
+          {paymentMethod === 'oxy' ? (
+            <SettingsListItem
+              icon={<Ionicons name="wallet-outline" size={20} color={colors.primary} />}
+              title={t('payment.review.peableAccount')}
+              description={t('payment.details.balance', { balance: '⊜ 123.45' })}
+              showChevron={false}
+            />
+          ) : null}
+          {paymentMethod === 'faircoin' ? (
+            <SettingsListItem
+              icon={<Ionicons name="qr-code-outline" size={20} color={colors.primary} />}
+              title={t('payment.review.faircoinWallet')}
+              description={t('payment.review.paidViaQR')}
+              showChevron={false}
+            />
+          ) : null}
+        </SettingsListGroup>
+      </View>
 
-            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
-                    {t('payment.actions.back')}
-                </Button>
-                <Button
-                    appearance="solid" tone="accent"
-                    onPress={onPay}
-                    size="sm"
-                    disabled={isPaying}
-                    icon={isPaying ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Ionicons name="checkmark" size={16} />}
-                    iconPosition="right"
-                >
-                    {isPaying ? t('payment.review.processing') : t('payment.review.payNow')}
-                </Button>
-            </View>
-        </Animated.View>
-    );
+      <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+        <Button
+          appearance="subtle"
+          tone="neutral"
+          onPress={onBack}
+          size="sm"
+          disabled={isPaying}
+          icon={<Ionicons name="arrow-back" size={16} />}
+        >
+          {t('payment.actions.back')}
+        </Button>
+        <Button
+          appearance="solid"
+          tone="accent"
+          onPress={onPay}
+          size="sm"
+          disabled={isPaying}
+          icon={
+            isPaying ? (
+              <ActivityIndicator size="small" color="#FFFFFF" />
+            ) : (
+              <Ionicons name="checkmark" size={16} />
+            )
+          }
+          iconPosition="right"
+        >
+          {isPaying ? t('payment.review.processing') : t('payment.review.payNow')}
+        </Button>
+      </View>
+    </Animated.View>
+  );
 };
 
 export default PaymentReviewStep;

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -9,59 +9,59 @@ import type { PaymentColors, PaymentStepAnimations } from './types';
 import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentSuccessStepProps {
-    colors: PaymentColors;
-    animations: PaymentStepAnimations;
-    onDone: () => void;
+  colors: PaymentColors;
+  animations: PaymentStepAnimations;
+  onDone: () => void;
 }
 
-const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
-    colors,
-    animations,
-    onDone,
-}) => {
-    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
-    const { t } = useI18n();
-    const { fadeAnim, slideAnim, scaleAnim } = animations;
+const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({ colors, animations, onDone }) => {
+  const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+  const { t } = useI18n();
+  const { fadeAnim, slideAnim, scaleAnim } = animations;
 
-    return (
-        <Animated.View
-            style={[
-                styles.stepContainer,
-                {
-                    opacity: fadeAnim,
-                    transform: [
-                        { translateY: slideAnim },
-                        { scale: scaleAnim },
-                    ],
-                },
-            ]}
-            accessibilityRole="none"
-            accessibilityLabel="Payment complete"
-        >
-            <View style={styles.section}>
-                <Text style={styles.sectionTitle}>{t('payment.success.title')}</Text>
+  return (
+    <Animated.View
+      style={[
+        styles.stepContainer,
+        {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }, { scale: scaleAnim }],
+        },
+      ]}
+      accessibilityRole="none"
+      accessibilityLabel="Payment complete"
+    >
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>{t('payment.success.title')}</Text>
 
-                <View style={styles.successCard}>
-                    <View style={styles.successContent}>
-                        <Ionicons
-                            name="checkmark-circle"
-                            size={64}
-                            color={colors.success}
-                            style={styles.successIcon}
-                        />
-                        <Text style={styles.successMainTitle}>{t('payment.success.heading')}</Text>
-                        <Text style={styles.successSubtitle}>{t('payment.success.thanks')}</Text>
-                        <View style={{ height: 18 }} />
-                        <Text style={styles.successMessage}>{t('payment.success.processed')}</Text>
-                    </View>
-                </View>
-            </View>
+        <View style={styles.successCard}>
+          <View style={styles.successContent}>
+            <Ionicons
+              name="checkmark-circle"
+              size={64}
+              color={colors.success}
+              style={styles.successIcon}
+            />
+            <Text style={styles.successMainTitle}>{t('payment.success.heading')}</Text>
+            <Text style={styles.successSubtitle}>{t('payment.success.thanks')}</Text>
+            <View style={{ height: 18 }} />
+            <Text style={styles.successMessage}>{t('payment.success.processed')}</Text>
+          </View>
+        </View>
+      </View>
 
-            <Button appearance="solid" tone="accent" onPress={onDone} size="sm" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
-                {t('payment.actions.done')}
-            </Button>
-        </Animated.View>
-    );
+      <Button
+        appearance="solid"
+        tone="accent"
+        onPress={onDone}
+        size="sm"
+        icon={<Ionicons name="checkmark" size={16} />}
+        iconPosition="right"
+      >
+        {t('payment.actions.done')}
+      </Button>
+    </Animated.View>
+  );
 };
 
 export default PaymentSuccessStep;