react-native-fpay 0.4.30 → 0.4.33

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