react-native-fpay 0.4.29 → 0.4.31

package/src/ui/screens/sub/billPayment/AirtimeScreen.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import styled from 'styled-components/native';
+import { C, F, R, S } from '../../../theme';
+import { billsAPI } from '../../../../core/api';
+import type { FPNetworkCode, FPNetworkOperator, FPAirtimePurchaseRequest } from '../../../../core/types';
+
+// ── Network auto-detect ──────────────────────────────────────
+// Nigerian mobile prefixes — not exhaustive, just enough to make the
+// "auto-detect, allow override" UX work for the common case. Ported
+// numbers will be wrong, which is exactly why manual override exists.
+const PREFIX_MAP: Record<string, FPNetworkCode> = {
+  '0803': 'MTN', '0806': 'MTN', '0703': 'MTN', '0706': 'MTN', '0813': 'MTN', '0816': 'MTN', '0810': 'MTN', '0814': 'MTN', '0903': 'MTN', '0906': 'MTN', '0913': 'MTN', '0916': 'MTN',
+  '0802': 'AIRTEL', '0808': 'AIRTEL', '0708': 'AIRTEL', '0812': 'AIRTEL', '0701': 'AIRTEL', '0902': 'AIRTEL', '0907': 'AIRTEL', '0901': 'AIRTEL', '0911': 'AIRTEL',
+  '0805': 'GLO', '0807': 'GLO', '0815': 'GLO', '0811': 'GLO', '0905': 'GLO', '0915': 'GLO',
+  '0809': '9MOBILE', '0817': '9MOBILE', '0818': '9MOBILE', '0908': '9MOBILE', '0909': '9MOBILE',
+};
+
+function detectNetwork(phone: string): FPNetworkCode | null {
+  const prefix = phone.slice(0, 4);
+  return PREFIX_MAP[prefix] ?? null;
+}
+
+// ── Styled Components ────────────────────────────────────────
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: ${C.white};
+`;
+
+const Body = styled(ScrollView)`
+  flex: 1;
+  padding: ${S.lg}px;
+`;
+
+const FieldLabel = styled(Text)`
+  font-size: ${F.sm}px;
+  font-weight: 600;
+  color: ${C.muted};
+  margin-bottom: ${S.xs}px;
+`;
+
+const InputBox = styled.View`
+  background-color: ${C.surface};
+  border-radius: ${R.lg}px;
+  padding: 0 ${S.md}px;
+  height: 52px;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: ${S.md}px;
+`;
+
+const StyledInput = styled.TextInput`
+  flex: 1;
+  font-size: ${F.md}px;
+  color: ${C.ink};
+`;
+
+const CurrencyPrefix = styled(Text)`
+  font-size: ${F.md}px;
+  color: ${C.muted};
+  margin-right: ${S.xs}px;
+`;
+
+const NetworkRow = styled(View)`
+  flex-direction: row;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.md}px;
+`;
+
+const NetworkChip = styled(TouchableOpacity)<{ selected: boolean; brandColor?: string }>`
+  flex: 1;
+  height: 44px;
+  border-radius: ${R.full}px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props: any) => (props.selected ? (props.brandColor ?? C.brand) : C.surface)};
+`;
+
+const NetworkChipText = styled(Text)<{ selected: boolean }>`
+  font-size: ${F.sm}px;
+  font-weight: 700;
+  color: ${(props: any) => (props.selected ? C.white : C.muted)};
+`;
+
+const AmountRow = styled(View)`
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.lg}px;
+`;
+
+const AmountChip = styled(TouchableOpacity)<{ selected: boolean }>`
+  width: 30%;
+  height: 56px;
+  border-radius: ${R.md}px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props: any) => (props.selected ? C.brand : C.surface)};
+`;
+
+const AmountChipText = styled(Text)<{ selected: boolean }>`
+  font-size: ${F.md}px;
+  font-weight: 700;
+  color: ${(props: any) => (props.selected ? C.white : C.ink)};
+`;
+
+const ContinueButton = styled(TouchableOpacity)<{ disabled?: boolean }>`
+  background-color: ${(props: any) => (props.disabled ? C.ghost : C.brand)};
+  border-radius: ${R.full}px;
+  padding: ${S.md}px 0;
+  align-items: center;
+  margin-top: ${S.sm}px;
+`;
+
+const ContinueButtonText = styled(Text)`
+  color: ${C.white};
+  font-weight: 800;
+  font-size: ${F.md}px;
+`;
+
+const QUICK_AMOUNTS = [100, 200, 500, 1000, 2000, 5000];
+
+// ── Props ─────────────────────────────────────────────────────
+
+interface Props {
+  amount: number;
+  onProcessTransaction: (
+    payload: FPAirtimePurchaseRequest,
+    summaryRows: { label: string; value: string }[]
+  ) => void;
+  onError?: (err: { code: string; message: string }) => void;
+}
+
+export default function AirtimeScreen({ amount, onProcessTransaction, onError }: Props) {
+  const [networks, setNetworks] = useState<FPNetworkOperator[]>([]);
+  const [phone, setPhone] = useState('');
+  const [network, setNetwork] = useState<FPNetworkCode | null>(null);
+  const [networkTouched, setNetworkTouched] = useState(false);
+  const [purchaseAmount, setPurchaseAmount] = useState<string>(amount > 0 ? String(amount) : '');
+
+  useEffect(() => {
+    billsAPI
+      .getNetworks()
+      .then((res: any) => {
+        if (res.status) setNetworks(res.payload.filter((n: FPNetworkOperator) => n.isActive));
+      })
+      .catch(() => {
+        // Non-fatal — chips still render from the static prefix map's
+        // codes even if the live operator list (logos/colors) fails to load
+        onError?.({ code: 'NETWORK_LOAD_FAILED', message: 'Could not load network list' });
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!networkTouched) {
+      const detected = detectNetwork(phone);
+      if (detected) setNetwork(detected);
+    }
+  }, [phone, networkTouched]);
+
+  const isValid =
+    /^0\d{10}$/.test(phone) && !!network && Number(purchaseAmount) >= 50 && Number(purchaseAmount) <= 50000;
+
+  const handleContinue = () => {
+    if (!isValid || !network) return;
+    const amountInKobo = Math.round(Number(purchaseAmount) * 100);
+    onProcessTransaction(
+      {
+        category: 'AIRTIME',
+        phoneNumber: phone,
+        network,
+        amountInKobo,
+        idempotencyKey: `airtime_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      },
+      [
+        { label: 'Phone Number', value: phone },
+        { label: 'Network', value: network },
+      ]
+    );
+  };
+
+  return (
+    <Container>
+      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <Body keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+          <FieldLabel>Phone Number</FieldLabel>
+          <InputBox>
+            <StyledInput
+              placeholder="080XXXXXXXX"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              maxLength={11}
+              value={phone}
+              onChangeText={setPhone}
+            />
+          </InputBox>
+
+          <FieldLabel>Network</FieldLabel>
+          <NetworkRow>
+            {(['MTN', 'AIRTEL', 'GLO', '9MOBILE'] as FPNetworkCode[]).map((code) => {
+              const op = networks.find((n: any) => n.code === code);
+              return (
+                <NetworkChip
+                  key={code}
+                  selected={network === code}
+                  brandColor={op?.brandColor}
+                  onPress={() => {
+                    setNetworkTouched(true);
+                    setNetwork(code);
+                  }}
+                >
+                  <NetworkChipText selected={network === code}>{code}</NetworkChipText>
+                </NetworkChip>
+              );
+            })}
+          </NetworkRow>
+
+          <FieldLabel>Amount</FieldLabel>
+          <AmountRow>
+            {QUICK_AMOUNTS.map((amt) => (
+              <AmountChip
+                key={amt}
+                selected={Number(purchaseAmount) === amt}
+                onPress={() => setPurchaseAmount(String(amt))}
+              >
+                <AmountChipText selected={Number(purchaseAmount) === amt}>
+                  ₦{amt.toLocaleString()}
+                </AmountChipText>
+              </AmountChip>
+            ))}
+          </AmountRow>
+
+          <InputBox>
+            <CurrencyPrefix>₦</CurrencyPrefix>
+            <StyledInput
+              placeholder="Enter amount"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              value={purchaseAmount}
+              onChangeText={setPurchaseAmount}
+            />
+          </InputBox>
+
+          <ContinueButton disabled={!isValid} onPress={handleContinue} activeOpacity={0.85}>
+            <ContinueButtonText>Continue</ContinueButtonText>
+          </ContinueButton>
+        </Body>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}

package/src/ui/screens/sub/billPayment/CableScreen.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform, ActivityIndicator } from 'react-native';
+import styled from 'styled-components/native';
+import { C, F, R, S } from '../../../theme';
+import { billsAPI } from '../../../../core/api';
+import type { FPBillProvider, FPBillTariff, FPCablePurchaseRequest } from '../../../../core/types';
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: ${C.white};
+`;
+
+const Body = styled(ScrollView)`
+  flex: 1;
+  padding: ${S.lg}px;
+`;
+
+const FieldLabel = styled(Text)`
+  font-size: ${F.sm}px;
+  font-weight: 600;
+  color: ${C.muted};
+  margin-bottom: ${S.xs}px;
+`;
+
+const InputBox = styled.View`
+  background-color: ${C.surface};
+  border-radius: ${R.lg}px;
+  padding: 0 ${S.md}px;
+  height: 52px;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: ${S.md}px;
+`;
+
+const StyledInput = styled.TextInput`
+  flex: 1;
+  font-size: ${F.md}px;
+  color: ${C.ink};
+`;
+
+const ProviderRow = styled(View)`
+  flex-direction: row;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.md}px;
+`;
+
+const ProviderChip = styled(TouchableOpacity)<{ selected: boolean }>`
+  flex: 1;
+  height: 44px;
+  border-radius: ${R.md}px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props: any) => (props.selected ? C.brand : C.surface)};
+`;
+
+const ProviderChipText = styled(Text)<{ selected: boolean }>`
+  font-size: ${F.sm}px;
+  font-weight: 700;
+  color: ${(props: any) => (props.selected ? C.white : C.muted)};
+`;
+
+const CustomerNameBox = styled(View)`
+  background-color: ${C.greenLight};
+  border-radius: ${R.md}px;
+  padding: ${S.sm}px ${S.md}px;
+  margin-bottom: ${S.md}px;
+`;
+
+const CustomerNameText = styled(Text)`
+  color: ${C.green};
+  font-weight: 700;
+  font-size: ${F.sm}px;
+`;
+
+const TariffCard = styled(TouchableOpacity)<{ selected: boolean; disabled?: boolean }>`
+  border-radius: ${R.lg}px;
+  padding: ${S.md}px;
+  margin-bottom: ${S.sm}px;
+  background-color: ${(props: any) => (props.selected ? C.brandLight : C.surface)};
+  border-width: 1.5px;
+  border-color: ${(props: any) => (props.selected ? C.brand : 'transparent')};
+  opacity: ${(props: any) => (props.disabled ? 0.45 : 1)};
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const TariffLabel = styled(Text)`
+  font-size: ${F.md}px;
+  font-weight: 700;
+  color: ${C.ink};
+`;
+
+const TariffPrice = styled(Text)`
+  font-size: ${F.md}px;
+  font-weight: 800;
+  color: ${C.brand};
+`;
+
+const EmptyText = styled(Text)`
+  text-align: center;
+  color: ${C.muted};
+  margin-top: ${S.lg}px;
+`;
+
+const ContinueButton = styled(TouchableOpacity)<{ disabled?: boolean }>`
+  background-color: ${(props: any) => (props.disabled ? C.ghost : C.brand)};
+  border-radius: ${R.full}px;
+  padding: ${S.md}px 0;
+  align-items: center;
+  margin-top: ${S.sm}px;
+`;
+
+const ContinueButtonText = styled(Text)`
+  color: ${C.white};
+  font-weight: 800;
+  font-size: ${F.md}px;
+`;
+
+interface Props {
+  onProcessTransaction: (
+    payload: FPCablePurchaseRequest,
+    summaryRows: { label: string; value: string }[]
+  ) => void;
+  onError?: (err: { code: string; message: string }) => void;
+}
+
+export default function CableScreen({ onProcessTransaction, onError }: Props) {
+  const [providers, setProviders] = useState<FPBillProvider[]>([]);
+  const [provider, setProvider] = useState<FPBillProvider | null>(null);
+  const [smartcardNumber, setSmartcardNumber] = useState('');
+  const [validating, setValidating] = useState(false);
+  const [customerName, setCustomerName] = useState<string | null>(null);
+  const [tariffs, setTariffs] = useState<FPBillTariff[]>([]);
+  const [tariffsLoading, setTariffsLoading] = useState(false);
+  const [selectedTariff, setSelectedTariff] = useState<FPBillTariff | null>(null);
+  const [phone, setPhone] = useState('');
+
+  useEffect(() => {
+    billsAPI
+      .getCableProviders()
+      .then((res: any) => {
+        if (res.status) setProviders(res.payload.filter((p: FPBillProvider) => p.isActive));
+      })
+      .catch(() => onError?.({ code: 'PROVIDER_LOAD_FAILED', message: 'Could not load cable providers' }));
+  }, []);
+
+  useEffect(() => {
+    setCustomerName(null);
+    if (!provider || smartcardNumber.length < 10) return;
+
+    setValidating(true);
+    billsAPI
+      .validateSmartcard(smartcardNumber, provider.code)
+      .then((res: any) => {
+        if (res.status) {
+          setCustomerName(res.payload.customerName);
+        } else {
+          onError?.({ code: 'SMARTCARD_INVALID', message: res.message });
+        }
+      })
+      .catch(() => onError?.({ code: 'SMARTCARD_VALIDATION_FAILED', message: 'Could not validate smartcard number' }))
+      .finally(() => setValidating(false));
+  }, [provider, smartcardNumber]);
+
+  useEffect(() => {
+    if (!provider) {
+      setTariffs([]);
+      setSelectedTariff(null);
+      return;
+    }
+    setTariffsLoading(true);
+    setSelectedTariff(null);
+    billsAPI
+      .getCableTariffs(provider.code)
+      .then((res: any) => {
+        if (res.status) setTariffs(res.payload);
+      })
+      .catch(() => onError?.({ code: 'TARIFFS_LOAD_FAILED', message: 'Could not load bouquets' }))
+      .finally(() => setTariffsLoading(false));
+  }, [provider]);
+
+  const isValid =
+    !!provider && smartcardNumber.length >= 10 && !!customerName && !!selectedTariff && /^0\d{10}$/.test(phone);
+
+  const handleContinue = () => {
+    if (!isValid || !provider || !selectedTariff) return;
+    onProcessTransaction(
+      {
+        category: 'CABLE',
+        smartcardNumber,
+        provider: provider.code,
+        tariffCode: selectedTariff.code,
+        amountInKobo: selectedTariff.priceInKobo,
+        phoneNumber: phone,
+        idempotencyKey: `cable_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      },
+      [
+        { label: 'Provider', value: provider.displayName },
+        { label: 'Smartcard Number', value: smartcardNumber },
+        { label: 'Customer', value: customerName ?? '' },
+        { label: 'Bouquet', value: selectedTariff.label },
+      ]
+    );
+  };
+
+  return (
+    <Container>
+      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <Body keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+          <FieldLabel>Provider</FieldLabel>
+          <ProviderRow>
+            {providers.map((p: any) => (
+              <ProviderChip key={p.code} selected={provider?.code === p.code} onPress={() => setProvider(p)}>
+                <ProviderChipText selected={provider?.code === p.code}>{p.displayName}</ProviderChipText>
+              </ProviderChip>
+            ))}
+          </ProviderRow>
+
+          <FieldLabel>Smartcard / IUC Number</FieldLabel>
+          <InputBox>
+            <StyledInput
+              placeholder="Enter smartcard number"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              value={smartcardNumber}
+              onChangeText={setSmartcardNumber}
+            />
+          </InputBox>
+          {validating && <ActivityIndicator color={C.brand} style={{ marginBottom: S.md }} />}
+          {customerName && (
+            <CustomerNameBox>
+              <CustomerNameText>{customerName}</CustomerNameText>
+            </CustomerNameBox>
+          )}
+
+          <FieldLabel>Phone Number</FieldLabel>
+          <InputBox>
+            <StyledInput
+              placeholder="080XXXXXXXX"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              maxLength={11}
+              value={phone}
+              onChangeText={setPhone}
+            />
+          </InputBox>
+
+          <FieldLabel>Bouquet</FieldLabel>
+          {tariffsLoading && <ActivityIndicator color={C.brand} style={{ marginTop: S.md }} />}
+          {!tariffsLoading && provider && tariffs.length === 0 && (
+            <EmptyText>No bouquets available for {provider.displayName} right now.</EmptyText>
+          )}
+          {!tariffsLoading &&
+            tariffs.map((tariff: any) => (
+              <TariffCard
+                key={tariff.code}
+                selected={selectedTariff?.code === tariff.code}
+                disabled={!tariff.isAvailable}
+                onPress={() => tariff.isAvailable && setSelectedTariff(tariff)}
+              >
+                <TariffLabel>{tariff.label}</TariffLabel>
+                <TariffPrice>₦{(tariff.priceInKobo / 100).toLocaleString()}</TariffPrice>
+              </TariffCard>
+            ))}
+
+          <ContinueButton disabled={!isValid} onPress={handleContinue} activeOpacity={0.85}>
+            <ContinueButtonText>Continue</ContinueButtonText>
+          </ContinueButton>
+        </Body>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}