@oxyhq/services/lib/module/ui/components/payment/PaymentSummaryStep.js

OxyHQ Expo/React Native SDK — UI components, screens, and native features

"use strict";

import React, { useMemo } from 'react';
import { View, Text, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { GroupedSection } from "../index.js";
import GroupedPillButtons from "../internal/GroupedPillButtons.js";
import { createPaymentStyles } from "./paymentStyles.js";
import { getCurrencySymbol, CURRENCY_SYMBOLS } from "./constants.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const getItemTypeIcon = type => {
  switch (type) {
    case 'product':
      return 'cart-outline';
    case 'subscription':
      return 'repeat-outline';
    case 'service':
      return 'construct-outline';
    case 'fee':
      return 'cash-outline';
    default:
      return 'pricetag-outline';
  }
};
const PaymentSummaryStep = ({
  paymentItems,
  amount,
  currency,
  description,
  colors,
  animations,
  onClose,
  onNext
}) => {
  const styles = useMemo(() => createPaymentStyles(colors), [colors]);
  const currencySymbol = getCurrencySymbol(currency);
  const {
    fadeAnim,
    slideAnim,
    scaleAnim
  } = animations;
  return /*#__PURE__*/_jsxs(Animated.View, {
    style: [styles.stepContainer, {
      opacity: fadeAnim,
      transform: [{
        translateY: slideAnim
      }, {
        scale: scaleAnim
      }]
    }],
    accessibilityRole: "none",
    accessibilityLabel: "Payment summary step",
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.section,
      children: [/*#__PURE__*/_jsx(Text, {
        style: styles.sectionTitle,
        children: "Payment Summary"
      }), /*#__PURE__*/_jsx(View, {
        style: styles.summaryCard,
        children: /*#__PURE__*/_jsxs(View, {
          style: styles.summaryCardContent,
          children: [/*#__PURE__*/_jsx(Ionicons, {
            name: "receipt-outline",
            size: 64,
            color: colors.primary,
            style: styles.summaryCardIcon
          }), /*#__PURE__*/_jsx(Text, {
            style: styles.summaryCardMainTitle,
            children: paymentItems.length > 0 ? 'Order Summary' : 'Payment'
          }), /*#__PURE__*/_jsx(Text, {
            style: styles.summaryCardSubtitle,
            children: paymentItems.length > 0 ? 'Review your payment details' : 'Complete your payment'
          }), paymentItems.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx(View, {
              style: styles.summaryCardItems,
              children: /*#__PURE__*/_jsx(GroupedSection, {
                items: paymentItems.map((item, idx) => ({
                  id: `item-${idx}`,
                  icon: getItemTypeIcon(item.type),
                  iconColor: colors.primary,
                  title: `${item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`,
                  subtitle: item.description || `${item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol} ${item.price * (item.quantity ?? 1)}`,
                  customContent: /*#__PURE__*/_jsxs(Text, {
                    style: styles.summaryItemPrice,
                    children: [item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol, " ", item.price * (item.quantity ?? 1)]
                  })
                }))
              })
            }), /*#__PURE__*/_jsx(View, {
              style: styles.summaryCardDivider
            }), /*#__PURE__*/_jsxs(View, {
              style: styles.summaryCardTotalSection,
              children: [/*#__PURE__*/_jsxs(View, {
                style: styles.summaryCardTotalRow,
                children: [/*#__PURE__*/_jsx(Text, {
                  style: styles.summaryCardTotalLabel,
                  children: "Subtotal"
                }), /*#__PURE__*/_jsxs(Text, {
                  style: styles.summaryCardTotalValue,
                  children: [currencySymbol, " ", amount]
                })]
              }), /*#__PURE__*/_jsxs(View, {
                style: styles.summaryCardTotalRow,
                children: [/*#__PURE__*/_jsx(Text, {
                  style: styles.summaryCardTotalLabel,
                  children: "Tax"
                }), /*#__PURE__*/_jsxs(Text, {
                  style: styles.summaryCardTotalValue,
                  children: [currencySymbol, " 0.00"]
                })]
              }), /*#__PURE__*/_jsxs(View, {
                style: styles.summaryCardTotalRow,
                children: [/*#__PURE__*/_jsx(Text, {
                  style: styles.summaryCardTotalLabel,
                  children: "Total"
                }), /*#__PURE__*/_jsxs(Text, {
                  style: styles.summaryCardTotalValue,
                  children: [currencySymbol, " ", amount]
                })]
              })]
            })]
          }) : /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsxs(View, {
              style: styles.summaryCardAmount,
              children: [/*#__PURE__*/_jsx(Text, {
                style: styles.summaryCardAmountLabel,
                children: "Amount to Pay"
              }), /*#__PURE__*/_jsxs(Text, {
                style: styles.summaryCardAmountValue,
                children: [currencySymbol, " ", amount]
              }), description && /*#__PURE__*/_jsx(Text, {
                style: styles.summaryCardAmountDescription,
                children: description
              })]
            }), /*#__PURE__*/_jsx(View, {
              style: styles.summaryCardDivider
            }), /*#__PURE__*/_jsx(View, {
              style: styles.summaryCardTotalSection,
              children: /*#__PURE__*/_jsxs(View, {
                style: styles.summaryCardTotalRow,
                children: [/*#__PURE__*/_jsx(Text, {
                  style: styles.summaryCardTotalLabel,
                  children: "Total"
                }), /*#__PURE__*/_jsxs(Text, {
                  style: styles.summaryCardTotalValue,
                  children: [currencySymbol, " ", amount]
                })]
              })
            })]
          })]
        })
      })]
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      buttons: [{
        text: 'Close',
        onPress: onClose,
        icon: 'close',
        variant: 'transparent'
      }, {
        text: 'Continue',
        onPress: onNext,
        icon: 'arrow-forward',
        variant: 'primary'
      }],
      colors: colors
    })]
  });
};
export default PaymentSummaryStep;
//# sourceMappingURL=PaymentSummaryStep.js.map