react-native-fpay 0.4.29 → 0.4.31

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

@@ -0,0 +1,263 @@
+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 { FPNetworkCode, FPNetworkOperator, FPDataPlan, FPDataPurchaseRequest } from '../../../../core/types';
+
+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 {
+  return PREFIX_MAP[phone.slice(0, 4)] ?? null;
+}
+
+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 NetworkRow = styled(View)`
+  flex-direction: row;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.lg}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 PlanCard = 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 PlanLabel = styled(Text)`
+  font-size: ${F.md}px;
+  font-weight: 700;
+  color: ${C.ink};
+`;
+
+const PlanValidity = styled(Text)`
+  font-size: ${F.xs}px;
+  color: ${C.muted};
+  margin-top: 2px;
+`;
+
+const PlanPrice = 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.md}px;
+`;
+
+const ContinueButtonText = styled(Text)`
+  color: ${C.white};
+  font-weight: 800;
+  font-size: ${F.md}px;
+`;
+
+interface Props {
+  onProcessTransaction: (
+    payload: FPDataPurchaseRequest,
+    summaryRows: { label: string; value: string }[]
+  ) => void;
+  onError?: (err: { code: string; message: string }) => void;
+}
+
+export default function DataScreen({ 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 [plans, setPlans] = useState<FPDataPlan[]>([]);
+  const [plansLoading, setPlansLoading] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState<FPDataPlan | null>(null);
+
+  useEffect(() => {
+    billsAPI
+      .getNetworks()
+      .then((res: any) => {
+        if (res.status) setNetworks(res.payload.filter((n: FPNetworkOperator) => n.isActive));
+      })
+      .catch(() => {
+        onError?.({ code: 'NETWORK_LOAD_FAILED', message: 'Could not load network list' });
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!networkTouched) {
+      const detected = detectNetwork(phone);
+      if (detected) setNetwork(detected);
+    }
+  }, [phone, networkTouched]);
+
+  useEffect(() => {
+    if (!network) {
+      setPlans([]);
+      setSelectedPlan(null);
+      return;
+    }
+    setPlansLoading(true);
+    setSelectedPlan(null);
+    billsAPI
+      .getDataPlans(network)
+      .then((res: any) => {
+        if (res.status) setPlans(res.payload);
+      })
+      .catch(() => {
+        onError?.({ code: 'PLANS_LOAD_FAILED', message: 'Could not load data plans' });
+      })
+      .finally(() => setPlansLoading(false));
+  }, [network]);
+
+  const isValid = /^0\d{10}$/.test(phone) && !!network && !!selectedPlan;
+
+  const handleContinue = () => {
+    if (!isValid || !network || !selectedPlan) return;
+    onProcessTransaction(
+      {
+        category: 'DATA',
+        phoneNumber: phone,
+        network,
+        planId: selectedPlan.id,
+        amountInKobo: selectedPlan.priceInKobo,
+        idempotencyKey: `data_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      },
+      [
+        { label: 'Phone Number', value: phone },
+        { label: 'Network', value: network },
+        { label: 'Plan', value: `${selectedPlan.label} / ${selectedPlan.validity}` },
+      ]
+    );
+  };
+
+  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>Select a Plan</FieldLabel>
+          {plansLoading && <ActivityIndicator color={C.brand} style={{ marginTop: S.md }} />}
+          {!plansLoading && network && plans.length === 0 && (
+            <EmptyText>No plans available for {network} right now.</EmptyText>
+          )}
+          {!plansLoading &&
+            plans.map((plan: any) => (
+              <PlanCard
+                key={plan.id}
+                selected={selectedPlan?.id === plan.id}
+                disabled={!plan.isAvailable}
+                onPress={() => plan.isAvailable && setSelectedPlan(plan)}
+              >
+                <View>
+                  <PlanLabel>{plan.label}</PlanLabel>
+                  <PlanValidity>{plan.validity}</PlanValidity>
+                </View>
+                <PlanPrice>₦{(plan.priceInKobo / 100).toLocaleString()}</PlanPrice>
+              </PlanCard>
+            ))}
+
+          <ContinueButton disabled={!isValid} onPress={handleContinue} activeOpacity={0.85}>
+            <ContinueButtonText>Continue</ContinueButtonText>
+          </ContinueButton>
+        </Body>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}

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

@@ -0,0 +1,344 @@
+import { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform, Switch, 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, FPMeterType, FPElectricityPurchaseRequest, FPUserInfo } 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 CurrencyPrefix = styled(Text)`
+  font-size: ${F.md}px;
+  color: ${C.muted};
+  margin-right: ${S.xs}px;
+`;
+
+const SelectBox = styled(TouchableOpacity)`
+  background-color: ${C.surface};
+  border-radius: ${R.lg}px;
+  padding: 0 ${S.md}px;
+  height: 52px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${S.md}px;
+`;
+
+const SelectBoxText = styled(Text)<{ placeholder?: boolean }>`
+  font-size: ${F.md}px;
+  color: ${(props: any) => (props.placeholder ? C.ghost : C.ink)};
+`;
+
+const DiscoSheet = styled(View)`
+  background-color: ${C.white};
+  border-radius: ${R.xl}px;
+  padding: ${S.md}px;
+  margin-bottom: ${S.md}px;
+  max-height: 240px;
+`;
+
+const DiscoRow = styled(TouchableOpacity)<{ selected: boolean }>`
+  padding: ${S.sm}px ${S.md}px;
+  border-radius: ${R.md}px;
+  background-color: ${(props: any) => (props.selected ? C.brandLight : 'transparent')};
+  margin-bottom: 4px;
+`;
+
+const DiscoRowText = styled(Text)`
+  font-size: ${F.md}px;
+  color: ${C.ink};
+  font-weight: 600;
+`;
+
+const TypeRow = styled(View)`
+  flex-direction: row;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.md}px;
+`;
+
+const TypeChip = 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 TypeChipText = 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 SwitchRow = styled(View)`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${S.md}px;
+`;
+
+const SwitchLabel = styled(Text)`
+  font-size: ${F.md}px;
+  color: ${C.ink};
+  font-weight: 600;
+`;
+
+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 {
+  amount: number;
+  user: FPUserInfo | null;
+  onProcessTransaction: (
+    payload: FPElectricityPurchaseRequest,
+    summaryRows: { label: string; value: string }[]
+  ) => void;
+  onError?: (err: { code: string; message: string }) => void;
+}
+
+export default function ElectricityScreen({ amount, user, onProcessTransaction, onError }: Props) {
+  const [discos, setDiscos] = useState<FPBillProvider[]>([]);
+  const [discoPickerOpen, setDiscoPickerOpen] = useState(false);
+  const [disco, setDisco] = useState<FPBillProvider | null>(null);
+  const [meterType, setMeterType] = useState<FPMeterType>('PREPAID');
+  const [meterNumber, setMeterNumber] = useState('');
+  const [validating, setValidating] = useState(false);
+  const [customerName, setCustomerName] = useState<string | null>(null);
+  const [minVendInKobo, setMinVendInKobo] = useState<number | null>(null);
+  const [purchaseAmount, setPurchaseAmount] = useState<string>(amount > 0 ? String(amount) : '');
+  const [forSelf, setForSelf] = useState(true);
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+
+  useEffect(() => {
+    billsAPI
+      .getDiscos()
+      .then((res: any) => {
+        if (res.status) setDiscos(res.payload.filter((d: FPBillProvider) => d.isActive));
+      })
+      .catch(() => onError?.({ code: 'DISCO_LOAD_FAILED', message: 'Could not load electricity providers' }));
+  }, []);
+
+  // Re-validate whenever the meter number reaches a plausible length, or
+  // the disco/type changes — mirrors checkMeterNumber()'s trigger in the
+  // existing BuyPower-backed Electricity screen.
+  useEffect(() => {
+    setCustomerName(null);
+    setMinVendInKobo(null);
+    if (!disco || meterNumber.length < 10) return;
+
+    setValidating(true);
+    billsAPI
+      .validateMeter(meterNumber, disco.code, meterType)
+      .then((res: any) => {
+        if (res.status) {
+          setCustomerName(res.payload.customerName);
+          setMinVendInKobo(res.payload.minVendAmountInKobo ?? null);
+        } else {
+          onError?.({ code: 'METER_INVALID', message: res.message });
+        }
+      })
+      .catch(() => onError?.({ code: 'METER_VALIDATION_FAILED', message: 'Could not validate meter number' }))
+      .finally(() => setValidating(false));
+  }, [disco, meterType, meterNumber]);
+
+  const amountInKobo = Math.round((Number(purchaseAmount) || 0) * 100);
+  const meetsMinVend = minVendInKobo == null || amountInKobo >= minVendInKobo;
+  const contactValid = forSelf || (/^0\d{10}$/.test(phone) && /\S+@\S+\.\S+/.test(email));
+
+  const isValid =
+    !!disco && meterNumber.length >= 10 && !!customerName && amountInKobo > 0 && meetsMinVend && contactValid;
+
+  const handleContinue = () => {
+    if (!isValid || !disco) return;
+    onProcessTransaction(
+      {
+        category: 'ELECTRICITY',
+        meterNumber,
+        disco: disco.code,
+        meterType,
+        amountInKobo,
+        forSelf,
+        phoneNumber: forSelf ? (user?.phone ?? '') : phone,
+        email: forSelf ? (user?.email ?? '') : email,
+        idempotencyKey: `electricity_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      },
+      [
+        { label: 'Disco', value: disco.displayName },
+        { label: 'Meter Type', value: meterType },
+        { label: 'Meter Number', value: meterNumber },
+        { label: 'Customer', value: customerName ?? '' },
+      ]
+    );
+  };
+
+  return (
+    <Container>
+      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <Body keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+          <FieldLabel>Distribution Company</FieldLabel>
+          <SelectBox onPress={() => setDiscoPickerOpen((v: any) => !v)}>
+            <SelectBoxText placeholder={!disco}>{disco?.displayName ?? 'Select a disco'}</SelectBoxText>
+            <Text>{discoPickerOpen ? '▲' : '▼'}</Text>
+          </SelectBox>
+
+          {discoPickerOpen && (
+            <DiscoSheet>
+              <ScrollView showsVerticalScrollIndicator={false}>
+                {discos.map((d: any) => (
+                  <DiscoRow
+                    key={d.code}
+                    selected={disco?.code === d.code}
+                    onPress={() => {
+                      setDisco(d);
+                      setDiscoPickerOpen(false);
+                    }}
+                  >
+                    <DiscoRowText>{d.displayName}</DiscoRowText>
+                  </DiscoRow>
+                ))}
+              </ScrollView>
+            </DiscoSheet>
+          )}
+
+          <FieldLabel>Meter Type</FieldLabel>
+          <TypeRow>
+            <TypeChip selected={meterType === 'PREPAID'} onPress={() => setMeterType('PREPAID')}>
+              <TypeChipText selected={meterType === 'PREPAID'}>Prepaid</TypeChipText>
+            </TypeChip>
+            <TypeChip selected={meterType === 'POSTPAID'} onPress={() => setMeterType('POSTPAID')}>
+              <TypeChipText selected={meterType === 'POSTPAID'}>Postpaid</TypeChipText>
+            </TypeChip>
+          </TypeRow>
+
+          <FieldLabel>Meter Number</FieldLabel>
+          <InputBox>
+            <StyledInput
+              placeholder="Enter meter number"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              value={meterNumber}
+              onChangeText={setMeterNumber}
+            />
+          </InputBox>
+          {validating && <ActivityIndicator color={C.brand} style={{ marginBottom: S.md }} />}
+          {customerName && (
+            <CustomerNameBox>
+              <CustomerNameText>{customerName}</CustomerNameText>
+            </CustomerNameBox>
+          )}
+
+          <FieldLabel>Amount</FieldLabel>
+          <InputBox>
+            <CurrencyPrefix>₦</CurrencyPrefix>
+            <StyledInput
+              placeholder="Enter amount"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              value={purchaseAmount}
+              onChangeText={setPurchaseAmount}
+            />
+          </InputBox>
+          {minVendInKobo != null && !meetsMinVend && (
+            <Text style={{ color: C.red, fontSize: F.xs, marginBottom: S.md }}>
+              Minimum amount is ₦{(minVendInKobo / 100).toLocaleString()}
+            </Text>
+          )}
+
+          <SwitchRow>
+            <SwitchLabel>This is for me</SwitchLabel>
+            <Switch
+              value={forSelf}
+              onValueChange={setForSelf}
+              trackColor={{ false: C.border, true: C.brandLight }}
+              thumbColor={forSelf ? C.brand : C.ghost}
+            />
+          </SwitchRow>
+
+          {!forSelf && (
+            <>
+              <InputBox>
+                <StyledInput
+                  placeholder="Phone number"
+                  placeholderTextColor={C.ghost}
+                  keyboardType="number-pad"
+                  value={phone}
+                  onChangeText={setPhone}
+                />
+              </InputBox>
+              <InputBox>
+                <StyledInput
+                  placeholder="Email address"
+                  placeholderTextColor={C.ghost}
+                  keyboardType="email-address"
+                  value={email}
+                  onChangeText={setEmail}
+                />
+              </InputBox>
+            </>
+          )}
+
+          <ContinueButton disabled={!isValid} onPress={handleContinue} activeOpacity={0.85}>
+            <ContinueButtonText>Continue</ContinueButtonText>
+          </ContinueButton>
+        </Body>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}

package/src/ui/screens/sub/sendPayment/TransferSubScreen.tsx

@@ -223,7 +223,7 @@ export function TransferSubScreen({
 
       const base = {
         recipient: accountDetail,
-        amount: Number(amount), // keep as number — host app converts if needed
+        amount: String(amount), // keep as number — host app converts if needed
         currency,
         narration: `Send ${currency}${amount} to ${accountDetail.accountName}`,
         reference: `SEND_${Date.now()}`,