@clockpay/react-native 1.0.0 → 1.0.1

package/src/components/selection-sheet.tsx

@@ -0,0 +1,383 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { SvgUri } from 'react-native-svg';
+import type {
+  CheckoutCurrency,
+  CheckoutData,
+  CheckoutMeta,
+  Coin,
+  Network,
+} from '../types';
+import type { ResolvedTheme } from '../internal/theme';
+import { ClockPayClient } from '../api/client';
+import { formatMoney } from '../internal/format';
+import { BottomSheet } from './bottom-sheet';
+import { ChevronDownIcon, CloseIcon, LogoIcon } from './icons';
+
+/** Renders a coin's remote SVG logo. Falls back to a neutral placeholder circle. */
+function CoinLogo({ uri }: { uri?: string }) {
+  if (!uri) return null;
+  return (
+    <View style={styles.logo}>
+      <SvgUri width={20} height={20} uri={uri} />
+    </View>
+  );
+}
+
+interface SelectionSheetProps {
+  visible: boolean;
+  publicKey: string;
+  apiBaseUrl?: string;
+  theme: ResolvedTheme;
+  amount: number;
+  currency: CheckoutCurrency;
+  reference: string;
+  meta: CheckoutMeta;
+  onRequestClose: () => void;
+  onClosed: () => void;
+  onProceed: (checkout: CheckoutData) => void;
+  onError?: (error: Error) => void;
+}
+
+interface Option {
+  id: string;
+  label: string;
+  image?: string;
+}
+
+interface DropdownProps {
+  label: string;
+  placeholder: string;
+  value: string;
+  options: Option[];
+  disabled?: boolean;
+  loading?: boolean;
+  theme: ResolvedTheme;
+  onSelect: (id: string) => void;
+}
+
+/** A lightweight inline dropdown — taps to expand a list of options in place. */
+function Dropdown({
+  label,
+  placeholder,
+  value,
+  options,
+  disabled,
+  loading,
+  theme,
+  onSelect,
+}: DropdownProps) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.id === value);
+
+  return (
+    <View style={[styles.field, open && styles.fieldOpen]}>
+      <Text style={styles.label}>
+        {label} <Text style={styles.req}>*</Text>
+      </Text>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        disabled={disabled}
+        style={[styles.select, disabled && styles.selectDisabled]}
+        onPress={() => setOpen((o) => !o)}
+      >
+        <View style={styles.selectValue}>
+          {selected?.image && <CoinLogo uri={selected.image} />}
+          <Text style={[styles.selectText, !selected && styles.placeholder]}>
+            {loading ? 'Loading…' : selected ? selected.label : placeholder}
+          </Text>
+        </View>
+        {loading ? (
+          <ActivityIndicator size='small' color='#94a3b8' />
+        ) : (
+          <ChevronDownIcon />
+        )}
+      </TouchableOpacity>
+
+      {open && !disabled && (
+        <View style={styles.options}>
+          {options.map((o) => (
+            <TouchableOpacity
+              key={o.id}
+              style={styles.option}
+              onPress={() => {
+                onSelect(o.id);
+                setOpen(false);
+              }}
+            >
+              {o.image && <CoinLogo uri={o.image} />}
+              <Text
+                style={[
+                  styles.optionText,
+                  o.id === value && { color: theme.accent, fontWeight: '600' },
+                ]}
+              >
+                {o.label}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+/**
+ * First step of the payment flow: the buyer picks a coin and then a settlement
+ * network. On continue, a payment link is generated (`create-link`) and the
+ * resulting checkout initiated, handing a {@link CheckoutData} to the caller so
+ * the payment sheet can open.
+ */
+export function SelectionSheet({
+  visible,
+  publicKey,
+  apiBaseUrl,
+  theme,
+  amount,
+  currency,
+  reference,
+  meta,
+  onRequestClose,
+  onClosed,
+  onProceed,
+  onError,
+}: SelectionSheetProps) {
+  const client = useMemo(
+    () => new ClockPayClient(publicKey, apiBaseUrl),
+    [publicKey, apiBaseUrl]
+  );
+  const [coins, setCoins] = useState<Coin[]>([]);
+  const [networks, setNetworks] = useState<Network[]>([]);
+  const [coinId, setCoinId] = useState('');
+  const [networkId, setNetworkId] = useState('');
+  const [loadingCoins, setLoadingCoins] = useState(false);
+  const [loadingNetworks, setLoadingNetworks] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load the available coins once the sheet opens.
+  useEffect(() => {
+    if (!visible) return;
+    let active = true;
+    setLoadingCoins(true);
+    setError(null);
+    client
+      .getCoins()
+      .then((list) => active && setCoins(list))
+      .catch((e: Error) => active && setError(e.message))
+      .finally(() => active && setLoadingCoins(false));
+    return () => {
+      active = false;
+    };
+  }, [visible, client]);
+
+  // Load the networks for the selected coin.
+  useEffect(() => {
+    setNetworks([]);
+    setNetworkId('');
+    if (!coinId) return;
+
+    let active = true;
+    setLoadingNetworks(true);
+    setError(null);
+    client
+      .getNetworks(coinId)
+      .then((list) => active && setNetworks(list))
+      .catch((e: Error) => active && setError(e.message))
+      .finally(() => active && setLoadingNetworks(false));
+    return () => {
+      active = false;
+    };
+  }, [coinId, client]);
+
+  const canSubmit = Boolean(coinId && networkId && !submitting);
+
+  const proceed = async () => {
+    if (!canSubmit) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const link = await client.createLink({
+        amount,
+        currency,
+        coinId,
+        networkId,
+        reference,
+        meta,
+      });
+      const response = await client.initiatePayment(link.clientSecret);
+      onProceed(response.data);
+    } catch (e) {
+      const err = e instanceof Error ? e : new Error('Failed to start checkout.');
+      setError(err.message);
+      onError?.(err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const coinOptions = coins.map((c) => ({
+    id: c.id,
+    label: c.name.toUpperCase(),
+    image: c.image,
+  }));
+  const networkOptions = networks.map((n) => ({
+    id: n.id,
+    label: n.name.toUpperCase(),
+  }));
+
+  return (
+    <BottomSheet
+      visible={visible}
+      onClose={onRequestClose}
+      onClosed={onClosed}
+      closeOnBackdropPress={false}
+    >
+      <View style={styles.header}>
+        <LogoIcon size={18} />
+        <Text style={[styles.title, { color: theme.accent }]}>Pay with Clockpay</Text>
+        <Pressable
+          onPress={onRequestClose}
+          style={styles.cancel}
+          hitSlop={8}
+          accessibilityRole='button'
+          accessibilityLabel='Cancel'
+        >
+          <CloseIcon size={22} />
+        </Pressable>
+      </View>
+
+      <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
+        <View style={styles.card}>
+          <Text style={styles.muted}>You are paying</Text>
+          <Text style={styles.amount}>{formatMoney(amount, currency)}</Text>
+        </View>
+
+        <Dropdown
+          label='Select coin'
+          placeholder='Select a coin'
+          value={coinId}
+          options={coinOptions}
+          disabled={submitting}
+          loading={loadingCoins}
+          theme={theme}
+          onSelect={setCoinId}
+        />
+
+        <Dropdown
+          label='Select preferred network'
+          placeholder={!coinId ? 'Select a coin first' : 'Select a network'}
+          value={networkId}
+          options={networkOptions}
+          disabled={!coinId || submitting}
+          loading={loadingNetworks}
+          theme={theme}
+          onSelect={setNetworkId}
+        />
+
+        {error && <Text style={styles.error}>{error}</Text>}
+
+        <TouchableOpacity
+          style={[
+            styles.primaryBtn,
+            { backgroundColor: canSubmit ? theme.accent : '#dff0f7', borderRadius: theme.radius },
+          ]}
+          disabled={!canSubmit}
+          onPress={proceed}
+        >
+          {submitting ? (
+            <ActivityIndicator size='small' color='#fff' />
+          ) : (
+            <Text style={[styles.primaryBtnText, { color: canSubmit ? '#fff' : '#9ca3af' }]}>
+              Continue
+            </Text>
+          )}
+        </TouchableOpacity>
+      </ScrollView>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, paddingBottom: 16 },
+  title: { fontSize: 16, fontWeight: '700' },
+  cancel: { position: 'absolute', right: 0, top: -2, padding: 4 },
+  card: {
+    borderWidth: 1,
+    borderColor: '#edf1f6',
+    borderRadius: 16,
+    padding: 20,
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  muted: { fontSize: 13, color: '#94a3b8' },
+  amount: { fontSize: 24, fontWeight: '700', color: '#000', marginTop: 4 },
+  field: { marginBottom: 16, position: 'relative' },
+  // Lift the open dropdown (and its overlay list) above the fields below it.
+  fieldOpen: { zIndex: 20, elevation: 20 },
+  label: { fontSize: 14, fontWeight: '500', color: '#1e1e1e', marginBottom: 6 },
+  req: { color: '#fb7185' },
+  select: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: '#d9d9d9',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+  },
+  selectDisabled: { backgroundColor: '#f5f5f5' },
+  selectValue: { flexDirection: 'row', alignItems: 'center', gap: 8, flexShrink: 1 },
+  selectText: { fontSize: 14, color: '#1e1e1e' },
+  placeholder: { color: '#9ca3af' },
+  logo: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: '#f0f2f5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  options: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    marginTop: 6,
+    zIndex: 20,
+    elevation: 8,
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#edf1f6',
+    borderRadius: 8,
+    maxHeight: 220,
+    overflow: 'hidden',
+    shadowColor: '#0f172a',
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f1f5f9',
+  },
+  optionText: { fontSize: 14, color: '#1e1e1e' },
+  error: { color: '#ef4444', fontSize: 13, marginBottom: 12 },
+  primaryBtn: { width: '100%', paddingVertical: 15, alignItems: 'center', marginTop: 4 },
+  primaryBtnText: { fontSize: 16, fontWeight: '600' },
+});

package/src/index.ts

@@ -3,8 +3,18 @@ export type {
   PaymentButtonProps,
   ClockPayAppearance,
   ClockPayEnvironment,
+  CheckoutCurrency,
+  CheckoutMeta,
+  CheckoutPhoneNumber,
   CheckoutData,
   CheckoutResponse,
+  Coin,
+  CoinsResponse,
+  Network,
+  NetworksResponse,
+  CreateLinkPayload,
+  CreateLinkData,
+  CreateLinkResponse,
   VerifyCryptoPayload,
   VerifyCryptoResponse,
 } from './types';

package/src/internal/format.ts

@@ -8,6 +8,14 @@ export function formatTime(totalSeconds: number): string {
   return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 }
 
+const CURRENCY_SYMBOLS: Record<string, string> = { ngn: '₦', usd: '$' };
+
+/** Formats a fiat amount with its currency symbol, e.g. `formatMoney(20000, 'ngn')` → `₦20,000`. */
+export function formatMoney(amount: number, currency: string): string {
+  const symbol = CURRENCY_SYMBOLS[currency?.toLowerCase()] ?? '';
+  return `${symbol}${amount.toLocaleString()}`;
+}
+
 /** Resolves the on-chain code used to verify a transaction for a given checkout. */
 export function resolveNetworkCode(network?: string, fallback?: string): string {
   const key = network?.toLowerCase() ?? '';

package/src/types.ts

@@ -22,6 +22,73 @@ export interface ClockPayAppearance {
 /** The environment a public key belongs to. */
 export type ClockPayEnvironment = 'test' | 'live';
 
+/** Fiat currency the order amount is denominated in. */
+export type CheckoutCurrency = 'ngn' | 'usd';
+
+/** A coin the buyer can pay with, from `GET /wallet/checkout/coins`. */
+export interface Coin {
+  id: string;
+  name: string;
+  image: string;
+  code: string;
+}
+
+/** A settlement network for a coin, from `GET /wallet/checkout/networks/{coinId}`. */
+export interface Network {
+  id: string;
+  tag: string;
+  code: string;
+  name: string;
+}
+
+export interface CoinsResponse {
+  data: Coin[];
+}
+
+export interface NetworksResponse {
+  data: Network[];
+}
+
+/** Buyer's phone number, split into dialling code and local number. */
+export interface CheckoutPhoneNumber {
+  code: string;
+  number: string;
+}
+
+/** Order/buyer details the business provides for the payment link. */
+export interface CheckoutMeta {
+  title: string;
+  description: string;
+  /** Buyer email. Optional. */
+  email?: string;
+  /** Business's own id for the buyer. Optional. */
+  customerId?: string;
+  fullName: string;
+  /** Buyer phone number. Optional. */
+  phoneNumber?: CheckoutPhoneNumber;
+}
+
+/** Body for `POST /payment/client/create-link`. */
+export interface CreateLinkPayload {
+  amount: number;
+  currency: CheckoutCurrency;
+  coinId: string;
+  networkId: string;
+  reference: string;
+  meta: CheckoutMeta;
+}
+
+/** The generated payment link — its reference and single-use client secret. */
+export interface CreateLinkData {
+  reference: string;
+  clientSecret: string;
+}
+
+export interface CreateLinkResponse {
+  message: string;
+  data: CreateLinkData;
+}
+
 /** Payload returned by the checkout endpoint and rendered inside the sheet. */
 export interface CheckoutData {
   reference: string;
@@ -52,8 +119,14 @@ export interface VerifyCryptoResponse {
 export interface PaymentButtonProps {
   /** Public key from the business developer dashboard (e.g. `cpay_test_pk_...`). Required. */
   publicKey: string;
-  /** Client secret returned from your server-side checkout call. Required. */
-  clientSecret: string;
+  /** Order amount in the given `currency`. Required. */
+  amount: number;
+  /** Fiat currency of the `amount`. Required. */
+  currency: CheckoutCurrency;
+  /** Your own reference for this order. Required. */
+  reference: string;
+  /** Order and buyer details. The business supplies these; the buyer only picks a coin & network. Required. */
+  meta: CheckoutMeta;
   /** Visual customization for the button and sheet. */
   appearance?: ClockPayAppearance;
   /** Button label. Defaults to "Pay with Clockpay". */