react-native-fpay 0.4.30 → 0.4.33

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>
+  );
+}

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>
+  );
+}