@myazahq/kyc-sdk-react-native 2.5.0 → 3.0.0

package/src/assets/fonts/OFL-Karla.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Karla Project Authors (https://github.com/googlefonts/karla)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/assets/fonts/OFL-SpaceGrotesk.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/assets/fonts/README.md

@@ -0,0 +1,12 @@
+# Bundled typefaces
+
+The seven faces the SDK draws with, and nothing else: Karla 400/500/600/700
+(body) and Space Grotesk 500/600/700 (headings). Both families are Google
+Fonts under the SIL Open Font License 1.1; the licence for each sits beside
+the files (`OFL-Karla.txt`, `OFL-SpaceGrotesk.txt`).
+
+They are vendored rather than imported from the `@expo-google-fonts` packages
+because Metro bundles every `require` in a package index whether or not the
+export is used, so those two packages put all 19 of their font files (1.85 MB)
+into every integrator's app for the seven faces the SDK uses. Add a weight here
+only when `config/font-resolve.ts` resolves to it.

package/src/capture/useAutoCapture.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFrameOutput } from 'react-native-vision-camera';
 import { runOnJS } from 'react-native-worklets';
 
-import { hasTextRecognizer, recognizeAllLines } from '../mrz/textRecognizer';
+import { hasTextRecognizer, primeTextModel, recognizeAllLines } from '../mrz/textRecognizer';
 import { extractMrz } from '../mrz/extract';
 import type { MrzScan } from '../mrz/parse';
 import { DocumentTextGate } from './documentTextGate';
@@ -97,6 +97,13 @@ export function useAutoCapture({
   // body is the one place that is both.
   hasTextRecognizer();
   hasRectDetector();
+  // Android fetches the text model through Play Services, so start it here too.
+  // The flow primes at open and this is normally a no-op, but the document step
+  // can be reached directly in a resumed session. Auto-capture deliberately does
+  // NOT gate on readiness: it is an accelerator, the manual shutter is live
+  // throughout, so a model that never arrives costs convenience rather than
+  // leaving the user stuck.
+  primeTextModel();
 
   const gate = useMemo(() => new DocumentTextGate(), []);
   const [guidance, setGuidance] = useState<DocumentGuidance>(INITIAL);

package/src/components/CountryField.tsx

@@ -21,6 +21,8 @@ export function CountryField({
   value,
   options,
   onChange,
+  geoCountry,
+  grouped,
   placeholder = 'Select a country',
   searchPlaceholder = 'Search country',
 }: {
@@ -29,6 +31,10 @@ export function CountryField({
   /** The pickable countries — all ISO, or a workflow's registry subset. */
   options: DialCodeOption[];
   onChange: (code: string) => void;
+  /** The visitor's inferred country, pinned on top of the sheet as "Your location". */
+  geoCountry?: string | null;
+  /** Region headers between the rows, the country-select step's way. */
+  grouped?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
 }): React.ReactElement {
@@ -75,6 +81,8 @@ export function CountryField({
         visible={open}
         options={options}
         selected={value ?? ''}
+        pinned={geoCountry}
+        grouped={grouped}
         searchPlaceholder={searchPlaceholder}
         onPick={(code) => {
           setOpen(false);

package/src/components/CountryRegionPicker.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { groupCountriesByRegion, pinGeoRow, regionCountryName } from '../config/regions';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaInput } from './MyazaInput';
+import { CountryFlag } from './CountryFlag';
+import { Icon } from './Icon';
+import { GeoBadge } from './GeoBadge';
+
+// ---------------------------------------------------------------------------
+// Searchable, region-grouped country picker for the country-select step. Used
+// when a workflow offers many countries (Global Documents): a flat 200-country
+// list is a scroll, not a chooser, so this adds a pinned search box and
+// continent headers over a bounded scroll area. Mirrors the web SDK's
+// CountryRegionPicker and Flutter's country_region_picker.dart.
+//
+// Split from CountrySelectStep (200-line rule); the step keeps the flat list
+// and the threshold that decides between the two.
+// ---------------------------------------------------------------------------
+
+export function CountryRegionPicker({
+  countries,
+  selected,
+  geoCountry,
+  onPick,
+}: {
+  countries: string[];
+  selected: string | null;
+  /**
+   * The visitor's IP country. Lifted out of its continent to the very top and
+   * tagged, so the one country most likely to be theirs is the first thing
+   * they see rather than something to scroll for.
+   */
+  geoCountry?: string | null;
+  onPick: (country: string) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [query, setQuery] = useState('');
+
+  const { pinned, groups } = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const visible = needle
+      ? countries.filter(
+          (code) =>
+            code.toLowerCase().includes(needle) ||
+            regionCountryName(code).toLowerCase().includes(needle),
+        )
+      : countries;
+    const split = pinGeoRow(visible, geoCountry, (code) => code);
+    return { pinned: split.pinned, groups: groupCountriesByRegion(split.rest) };
+  }, [countries, query, geoCountry]);
+
+  const empty = groups.length === 0 && pinned === null;
+
+  return (
+    // The search box stays put and the list owns its own scroll, so a
+    // ~240-country flow does not scroll the search field off the top. That
+    // relies on the SHEET rendering this step with `fillsViewport` — inside a
+    // scroll view the nested list below would take an unbounded height, outgrow
+    // the viewport, and drag the search box off the top with it.
+    <View style={{ flex: 1 }}>
+      <MyazaInput
+        value={query}
+        onChangeText={setQuery}
+        placeholder="Search countries…"
+        autoCapitalize="none"
+        prefix={<Icon name="search" size={18} color={colors.textSecondary} />}
+      />
+      <View style={{ height: spacing.md }} />
+
+      {empty ? (
+        <MyazaText variant="bodyMedium" style={{ textAlign: 'center', marginTop: spacing.lg }}>
+          No countries match your search.
+        </MyazaText>
+      ) : (
+        // `nestedScrollEnabled` stays: Android refuses to scroll a nested
+        // same-direction list without it, and this is still nested on the
+        // flat-list path and inside any future scrolling parent.
+        <ScrollView
+          nestedScrollEnabled
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {pinned ? (
+            <CountryRow
+              code={pinned}
+              name={regionCountryName(pinned)}
+              selected={pinned === selected}
+              badge="Your location"
+              onPress={() => onPick(pinned)}
+            />
+          ) : null}
+          {groups.map((group) => (
+            <View key={group.region}>
+              {/* Uppercase, tracked-out section label — Flutter's region
+                  header. Lowercase text at the default weight read as another
+                  list row rather than a divider. */}
+              <MyazaText
+                variant="bodySmall"
+                color={colors.textSecondary}
+                style={{
+                  fontWeight: '700',
+                  letterSpacing: 0.6,
+                  paddingHorizontal: spacing.xs,
+                  paddingVertical: spacing.sm,
+                }}
+              >
+                {group.region.toUpperCase()}
+              </MyazaText>
+              {group.countries.map((entry) => (
+                <CountryRow
+                  key={entry.code}
+                  code={entry.code}
+                  name={entry.name}
+                  selected={entry.code === selected}
+                  onPress={() => onPick(entry.code)}
+                />
+              ))}
+            </View>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+/**
+ * One selectable country row, shared by the flat list and the region picker
+ * so the two cannot drift apart. `badge` tags the pinned geo row; it is the
+ * same control in a second position, differing only by the tag.
+ */
+export function CountryRow({
+  code,
+  name,
+  selected,
+  badge,
+  onPress,
+}: {
+  code: string;
+  name: string;
+  selected: boolean;
+  badge?: string;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected }}
+      accessibilityLabel={badge ? `${name}, ${badge.toLowerCase()}` : name}
+      // Matches the Flutter SDK's CountryOptionTile exactly — the two had
+      // drifted (24px flag / 12px padding here vs 32 / 16 there), which is why
+      // the same screen looked like a different component on each platform. The
+      // spacing and radius scales are identical across the SDKs, so there is
+      // nothing platform-specific to reconcile: `md` means 16 on both.
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: spacing.md,
+        borderRadius: radius.md,
+        borderWidth: selected ? 1.5 : 1,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? colors.primary50 : colors.background,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <CountryFlag country={code} size={32} />
+      <View style={{ width: 12 }} />
+      <MyazaText variant="label" style={{ flex: 1, fontWeight: '500' }}>
+        {name}
+      </MyazaText>
+      {badge ? <GeoBadge label={badge} /> : null}
+      <Icon
+        name="chevron-right"
+        size={18}
+        color={selected ? colors.primary : colors.textSecondary}
+      />
+    </Pressable>
+  );
+}

package/src/components/DialCodePicker.tsx

@@ -13,8 +13,9 @@ import { useTheme } from './runtime';
 import { MyazaText } from './Typography';
 import { MyazaInput } from './MyazaInput';
 import { Icon } from './Icon';
-import { CountryFlag } from './CountryFlag';
 import { FloatingSheet } from './glass/FloatingSheet';
+import { DialCodeDivider, DialCodeRegionHeader, DialCodeRow } from './DialCodeRow';
+import { buildDialCodeItems, dialCodeItemKey, filterDialCodeOptions, type DialCodeItem } from './dialCodeRows';
 
 // ---------------------------------------------------------------------------
 // THE country sheet — the phone field's dial-code picker, generalised.
@@ -33,6 +34,10 @@ import { FloatingSheet } from './glass/FloatingSheet';
 // The sheet is sized against the space left ABOVE the keyboard, like Flutter's.
 // The search field autofocuses, so measuring against the full screen would put
 // every result underneath the keys the moment the user started typing.
+//
+// `grouped` lists the countries under region headers (Africa first), the way
+// the country-select step does — what the address-scope country control asks
+// for. The list itself is built by dialCodeRows.ts.
 // ---------------------------------------------------------------------------
 
 export interface DialCodeOption {
@@ -46,6 +51,8 @@ export function DialCodePicker({
   visible,
   options,
   selected,
+  pinned,
+  grouped = false,
   onPick,
   onClose,
   searchPlaceholder = 'Search country or code',
@@ -53,6 +60,14 @@ export function DialCodePicker({
   visible: boolean;
   options: DialCodeOption[];
   selected: string;
+  /**
+   * The visitor's IP country. Lifted out of the alphabet to the top and
+   * tagged, so a guess we made on their behalf is visible AS a guess and one
+   * tap away rather than buried among two hundred others.
+   */
+  pinned?: string | null;
+  /** Region headers between the rows (the pinned row stays on top). */
+  grouped?: boolean;
   onPick: (code: string) => void;
   onClose: () => void;
   searchPlaceholder?: string;
@@ -78,19 +93,13 @@ export function DialCodePicker({
   const available = screenHeight - keyboard;
   const maxHeight = Math.min(Math.max(available * 0.85, 240), screenHeight * 0.6);
 
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return options;
-    // Match the name, the ISO code, or the dial code with or without its '+',
-    // because people search for "+234", "234" and "Nigeria" in equal measure.
-    const bare = q.replace(/^\+/, '');
-    return options.filter(
-      (o) =>
-        o.name.toLowerCase().includes(q) ||
-        o.code.toLowerCase() === q ||
-        (o.dialCode != null && o.dialCode.replace(/^\+/, '').startsWith(bare)),
-    );
-  }, [options, query]);
+  // Where they appear to be, lifted out of the alphabet. It stays subject to
+  // the search, so typing still narrows to what was asked for rather than
+  // keeping a row that does not match.
+  const rows = useMemo(
+    () => buildDialCodeItems(filterDialCodeOptions(options, query), pinned, grouped),
+    [options, query, pinned, grouped],
+  );
 
   const close = (): void => {
     setQuery('');
@@ -121,67 +130,37 @@ export function DialCodePicker({
         </View>
 
         <FlatList
-          data={filtered}
-          keyExtractor={(o) => o.code}
+          data={rows.items}
+          keyExtractor={dialCodeItemKey}
           keyboardShouldPersistTaps="handled"
+          // A hairline under the pinned row only: the alphabet below it is one
+          // list, and a rule between every row is noise.
+          ItemSeparatorComponent={({ leadingItem }: { leadingItem: DialCodeItem }) =>
+            rows.geo != null && leadingItem.kind === 'row' && leadingItem.option.code === rows.geo.code ? (
+              <DialCodeDivider />
+            ) : null
+          }
           ListEmptyComponent={
             <MyazaText variant="bodyMedium" style={{ padding: spacing.lg, textAlign: 'center' }}>
               No countries match your search.
             </MyazaText>
           }
-          renderItem={({ item }) => (
-            <CountryRow
-              option={item}
-              isSelected={item.code === selected}
-              onPress={() => {
-                setQuery('');
-                onPick(item.code);
-              }}
-            />
-          )}
+          renderItem={({ item }) =>
+            item.kind === 'header' ? (
+              <DialCodeRegionHeader region={item.region} />
+            ) : (
+              <DialCodeRow
+                option={item.option}
+                isSelected={item.option.code === selected}
+                badge={rows.geo != null && item.option.code === rows.geo.code ? 'Your location' : undefined}
+                onPress={() => {
+                  setQuery('');
+                  onPick(item.option.code);
+                }}
+              />
+            )
+          }
         />
     </FloatingSheet>
   );
 }
-
-function CountryRow({
-  option,
-  isSelected,
-  onPress,
-}: {
-  option: DialCodeOption;
-  isSelected: boolean;
-  onPress: () => void;
-}): React.ReactElement {
-  const { colors } = useTheme();
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityRole="radio"
-      accessibilityState={{ checked: isSelected }}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: spacing.md,
-        // Roomier rows: a country list is a long scan, and cramped rows make
-        // every tap a precision job. Matches the web dropdown's row height.
-        paddingVertical: 12,
-        backgroundColor: isSelected ? colors.primary50 : 'transparent',
-      }}
-    >
-      <CountryFlag country={option.code} size={28} />
-      <View style={{ width: spacing.md }} />
-      {/* No line clamp: "Bosnia & Herzegovina" and the like must read in full,
-          which is what Flutter's Expanded(Text) gives. Full body size (16),
-          the web dropdown's reading size — 14 read small against the flags. */}
-      <MyazaText variant="body" style={{ flex: 1 }}>
-        {option.name}
-      </MyazaText>
-      {option.dialCode != null ? (
-        <MyazaText variant="bodyMedium" color={colors.textSecondary}>
-          {option.dialCode}
-        </MyazaText>
-      ) : null}
-    </Pressable>
-  );
-}