@swan-io/shared-business 1.5.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -31,7 +31,7 @@
   "dependencies": {
     "@formatjs/intl": "^2.6.9",
     "@googlemaps/js-api-loader": "^1.15.1",
-    "@swan-io/boxed": "^0.12.1",
+    "@swan-io/boxed": "^0.13.0",
     "dayjs": "^1.11.7",
     "react": "^18.2.0",
     "react-atomic-state": "^1.2.7",

package/src/components/AddressFormPart.d.ts

@@ -16,6 +16,7 @@ type Props = {
     optionalLabel?: string;
     placeholder?: string;
     isLarge: boolean;
+    apiKey: string;
 } & FormProps;
-export declare const AddressFormPart: ({ initialAddress, initialCity, initialPostalCode, country, label, optionalLabel, placeholder, Field, setFieldValue, listenFields, isLarge, }: Props) => JSX.Element;
+export declare const AddressFormPart: ({ initialAddress, initialCity, initialPostalCode, country, label, optionalLabel, placeholder, Field, setFieldValue, listenFields, isLarge, apiKey, }: Props) => JSX.Element;
 export {};

package/src/components/AddressFormPart.js

@@ -6,8 +6,8 @@ import { Space } from "@swan-io/lake/src/components/Space";
 import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
 import { useCallback, useEffect } from "react";
 import { locale, t } from "../utils/i18n";
-import { AddressSearchInput } from "./AddressSearchInput";
-export const AddressFormPart = ({ initialAddress, initialCity, initialPostalCode, country, label, optionalLabel, placeholder, Field, setFieldValue, listenFields, isLarge, }) => {
+import { GMapAddressSearchInput } from "./GMapAddressSearchInput";
+export const AddressFormPart = ({ initialAddress, initialCity, initialPostalCode, country, label, optionalLabel, placeholder, Field, setFieldValue, listenFields, isLarge, apiKey, }) => {
     const [manualModeEnabled, setManualMode] = useBoolean(initialAddress !== "" || initialCity !== "" || initialPostalCode !== "");
     useEffect(() => {
         if (!manualModeEnabled) {
@@ -22,5 +22,5 @@ export const AddressFormPart = ({ initialAddress, initialCity, initialPostalCode
         setFieldValue("postalCode", place.postalCode);
         setManualMode.on();
     }, [setManualMode, setFieldValue]);
-    return (_jsxs(_Fragment, { children: [_jsx(Field, { name: "address", children: ({ ref, value, onChange, error }) => (_jsx(LakeLabel, { label: label ?? t("addressFormPart.addressLabel"), optionalLabel: optionalLabel, render: id => (_jsx(AddressSearchInput, { inputRef: ref, emptyResultText: t("common.noResult"), placeholder: placeholder ?? t("addressFormPart.placeholder"), language: locale.language, id: id, country: country, value: value, error: error, onValueChange: onChange, onSuggestion: onSuggestion })), actions: !manualModeEnabled && isLarge ? (_jsx(LakeButton, { mode: "secondary", size: "small", onPress: setManualMode.on, children: t("addressFormPart.setManual") })) : null })) }), !manualModeEnabled && !isLarge ? (_jsx(LakeButton, { mode: "secondary", size: "small", onPress: setManualMode.on, children: t("addressFormPart.setManual") })) : null, manualModeEnabled ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), _jsx(Field, { name: "city", children: ({ ref, value, valid, error, onChange }) => (_jsx(LakeLabel, { label: t("addressFormPart.cityLabel"), render: id => (_jsx(LakeTextInput, { ref: ref, id: id, value: value, valid: valid, error: error, onChangeText: onChange })) })) }), _jsx(Space, { height: 12 }), _jsx(Field, { name: "postalCode", children: ({ ref, value, valid, error, onChange }) => (_jsx(LakeLabel, { label: t("addressFormPart.postCodeLabel"), render: id => (_jsx(LakeTextInput, { ref: ref, id: id, value: value, valid: valid, error: error, onChangeText: onChange })) })) })] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { name: "address", children: ({ ref, value, onChange, error }) => (_jsx(LakeLabel, { label: label ?? t("addressFormPart.addressLabel"), optionalLabel: optionalLabel, render: id => (_jsx(GMapAddressSearchInput, { inputRef: ref, apiKey: apiKey, emptyResultText: t("common.noResult"), placeholder: placeholder ?? t("addressFormPart.placeholder"), language: locale.language, id: id, country: country, value: value, error: error, onValueChange: onChange, onSuggestion: onSuggestion })), actions: !manualModeEnabled && isLarge ? (_jsx(LakeButton, { mode: "secondary", size: "small", onPress: setManualMode.on, children: t("addressFormPart.setManual") })) : null })) }), !manualModeEnabled && !isLarge ? (_jsx(LakeButton, { mode: "secondary", size: "small", onPress: setManualMode.on, children: t("addressFormPart.setManual") })) : null, manualModeEnabled ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), _jsx(Field, { name: "city", children: ({ ref, value, valid, error, onChange }) => (_jsx(LakeLabel, { label: t("addressFormPart.cityLabel"), render: id => (_jsx(LakeTextInput, { ref: ref, id: id, value: value, valid: valid, error: error, onChangeText: onChange })) })) }), _jsx(Space, { height: 12 }), _jsx(Field, { name: "postalCode", children: ({ ref, value, valid, error, onChange }) => (_jsx(LakeLabel, { label: t("addressFormPart.postCodeLabel"), render: id => (_jsx(LakeTextInput, { ref: ref, id: id, value: value, valid: valid, error: error, onChangeText: onChange })) })) })] })) : null] }));
 };

package/src/components/BeneficiaryForm.d.ts

@@ -25,6 +25,7 @@ type Props = {
     initialState?: EditorState;
     accountCountry: AccountCountry;
     step: BeneficiaryFormStep;
+    googleMapApiKey: string;
     onStepChange: (step: BeneficiaryFormStep) => void;
     onSave: (editorState: EditorState) => void | Promise<void>;
     onClose: () => void;

package/src/components/BeneficiaryForm.js

@@ -13,7 +13,7 @@ import { noop } from "@swan-io/lake/src/utils/function";
 import { isNotNullish, isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
-import { hasDefinedKeys, useForm } from "react-ux-form";
+import { combineValidators, hasDefinedKeys, useForm } from "react-ux-form";
 import { Rifm } from "rifm";
 import { match } from "ts-pattern";
 import { v4 as uuid } from "uuid";
@@ -23,7 +23,8 @@ import { locale, rifmDateProps, t } from "../utils/i18n";
 import { validateBooleanRequired, validateIndividualTaxNumber, validateNullableRequired, validateRequired, } from "../utils/validation";
 import { AddressFormPart } from "./AddressFormPart";
 import { CountryPicker } from "./CountryPicker";
-import { LakeCityInput } from "./LakeCityInput";
+import { GMapCityInput } from "./GMapCityInput";
+import { TaxIdentificationNumberInput } from "./TaxIdentificationNumberInput";
 const styles = StyleSheet.create({
     inputContainer: {
         flex: 1,
@@ -39,13 +40,24 @@ const beneficiaryTypes = [
 ];
 export const validateUbo = (editorState, accountCountry) => {
     const isAddressRequired = accountCountry === "DEU";
+    const isBirthInfoRequired = accountCountry !== "DEU";
+    const isTaxIdentificationNumberRequired = accountCountry === "DEU" && editorState.residencyAddressCountry === "DEU";
+    const validateTaxNumber = isTaxIdentificationNumberRequired
+        ? combineValidators(validateNullableRequired, validateIndividualTaxNumber(accountCountry))
+        : validateIndividualTaxNumber(accountCountry);
     return {
         firstName: validateNullableRequired(editorState.firstName),
         lastName: validateNullableRequired(editorState.lastName),
-        birthDate: validateNullableRequired(editorState.birthDate),
+        birthDate: isBirthInfoRequired
+            ? validateNullableRequired(editorState.birthDate)
+            : undefined,
         birthCountryCode: validateNullableRequired(editorState.birthCountryCode),
-        birthCity: validateNullableRequired(editorState.birthCity),
-        birthCityPostalCode: validateNullableRequired(editorState.birthCityPostalCode),
+        birthCity: isBirthInfoRequired
+            ? validateNullableRequired(editorState.birthCity)
+            : undefined,
+        birthCityPostalCode: isBirthInfoRequired
+            ? validateNullableRequired(editorState.birthCityPostalCode)
+            : undefined,
         type: validateNullableRequired(editorState.type),
         totalCapitalPercentage: editorState.type === "HasCapital"
             ? validateNullableRequired(editorState.totalCapitalPercentage?.toString())
@@ -62,7 +74,7 @@ export const validateUbo = (editorState, accountCountry) => {
         residencyAddressPostalCode: isAddressRequired
             ? validateNullableRequired(editorState.residencyAddressPostalCode)
             : undefined,
-        taxIdentificationNumber: validateIndividualTaxNumber(editorState.taxIdentificationNumber ?? ""),
+        taxIdentificationNumber: validateTaxNumber(editorState.taxIdentificationNumber ?? ""),
         indirect: editorState.type !== "HasCapital" || editorState.direct === true
             ? undefined
             : validateBooleanRequired(editorState.indirect),
@@ -127,9 +139,10 @@ const requiredStepFields = [
     "birthCityPostalCode",
     "type",
 ];
-export const BeneficiaryForm = forwardRef(({ initialState, accountCountry, step, onStepChange, onClose, onSave, onCityLoadError }, ref) => {
+export const BeneficiaryForm = forwardRef(({ initialState, accountCountry, step, googleMapApiKey, onStepChange, onClose, onSave, onCityLoadError, }, ref) => {
     const [reference] = useState(() => initialState?.reference ?? uuid());
     const isAddressRequired = accountCountry === "DEU";
+    const isBirthInfoRequired = accountCountry !== "DEU";
     const commonStepValues = useRef();
     const initialBirthDate = initialState?.birthDate;
     const { Field, FieldsListener, setFieldValue, submitForm, listenFields, validateField } = useForm({
@@ -147,7 +160,7 @@ export const BeneficiaryForm = forwardRef(({ initialState, accountCountry, step,
             initialValue: isNotNullishOrEmpty(initialBirthDate)
                 ? decodeBirthDate(initialBirthDate)
                 : "",
-            validate: validateNullableRequired,
+            validate: isBirthInfoRequired ? validateNullableRequired : undefined,
             sanitize: value => value?.trim(),
         },
         birthCountryCode: {
@@ -156,12 +169,12 @@ export const BeneficiaryForm = forwardRef(({ initialState, accountCountry, step,
         },
         birthCity: {
             initialValue: initialState?.birthCity ?? "",
-            validate: validateNullableRequired,
+            validate: isBirthInfoRequired ? validateNullableRequired : undefined,
             sanitize: value => value?.trim(),
         },
         birthCityPostalCode: {
             initialValue: initialState?.birthCityPostalCode ?? "",
-            validate: validateNullableRequired,
+            validate: isBirthInfoRequired ? validateNullableRequired : undefined,
             sanitize: value => value?.trim(),
         },
         type: {
@@ -206,7 +219,13 @@ export const BeneficiaryForm = forwardRef(({ initialState, accountCountry, step,
         },
         taxIdentificationNumber: {
             initialValue: initialState?.taxIdentificationNumber,
-            validate: validateIndividualTaxNumber,
+            validate: (value, { getFieldState }) => {
+                const uboCountry = getFieldState("country").value;
+                if (accountCountry === "DEU" && uboCountry === "DEU") {
+                    return combineValidators(validateNullableRequired, validateIndividualTaxNumber(accountCountry))(value);
+                }
+                return validateIndividualTaxNumber(accountCountry)(value);
+            },
             sanitize: value => value?.trim(),
         },
     });
@@ -269,14 +288,16 @@ export const BeneficiaryForm = forwardRef(({ initialState, accountCountry, step,
         };
     });
     return (_jsx(ResponsiveContainer, { breakpoint: breakpoints.tiny, children: ({ small, large }) => (_jsxs(_Fragment, { children: [match(step)
-                    .with("common", () => (_jsxs(View, { role: "form", children: [_jsxs(Box, { direction: small ? "column" : "row", children: [_jsx(Field, { name: "firstName", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.firstName"), style: styles.inputContainer, render: id => (_jsx(LakeTextInput, { error: error, placeholder: t("beneficiaryForm.beneficiary.firstNamePlaceholder"), id: id, value: value, onChangeText: onChange })) })) }), _jsx(Space, { width: 12 }), _jsx(Field, { name: "lastName", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.lastName"), style: styles.inputContainer, render: id => (_jsx(LakeTextInput, { error: error, placeholder: t("beneficiaryForm.beneficiary.lastNamePlaceholder"), id: id, value: value, onChangeText: onChange })) })) })] }), _jsxs(Box, { direction: small ? "column" : "row", children: [_jsx(Field, { name: "birthDate", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthDate"), style: styles.inputContainer, render: id => (_jsx(Rifm, { value: value ?? "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { error: error, placeholder: locale.datePlaceholder, id: id, value: value, onChange: onChange })) })) })) }), _jsx(Space, { width: 12 }), _jsx(Field, { name: "birthCountryCode", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthCountry"), style: styles.inputContainer, render: id => (_jsx(CountryPicker, { id: id, error: error, value: value, placeholder: t("beneficiaryForm.beneficiary.birthCountryPlaceholder"), items: allCountriesItems, onValueChange: onChange })) })) })] }), _jsx(Box, { direction: small ? "column" : "row", children: _jsx(FieldsListener, { names: ["birthCountryCode"], children: ({ birthCountryCode }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "birthCity", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthCity"), style: styles.inputContainer, render: id => (_jsx(LakeCityInput, { id: id, error: error, country: birthCountryCode.value, value: value ?? "", onValueChange: onChange, placeholder: birthCountryCode.value == null
+                    .with("common", () => (_jsxs(View, { role: "form", children: [_jsxs(Box, { direction: small ? "column" : "row", children: [_jsx(Field, { name: "firstName", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.firstName"), style: styles.inputContainer, render: id => (_jsx(LakeTextInput, { error: error, placeholder: t("beneficiaryForm.beneficiary.firstNamePlaceholder"), id: id, value: value, onChangeText: onChange })) })) }), _jsx(Space, { width: 12 }), _jsx(Field, { name: "lastName", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.lastName"), style: styles.inputContainer, render: id => (_jsx(LakeTextInput, { error: error, placeholder: t("beneficiaryForm.beneficiary.lastNamePlaceholder"), id: id, value: value, onChangeText: onChange })) })) })] }), _jsxs(Box, { direction: small ? "column" : "row", children: [_jsx(Field, { name: "birthDate", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthDate"), style: styles.inputContainer, render: id => (_jsx(Rifm, { value: value ?? "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { error: error, placeholder: locale.datePlaceholder, id: id, value: value, onChange: onChange })) })) })) }), _jsx(Space, { width: 12 }), _jsx(Field, { name: "birthCountryCode", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthCountry"), style: styles.inputContainer, render: id => (_jsx(CountryPicker, { id: id, error: error, value: value, placeholder: t("beneficiaryForm.beneficiary.birthCountryPlaceholder"), items: allCountriesItems, onValueChange: onChange })) })) })] }), _jsx(Box, { direction: small ? "column" : "row", children: _jsx(FieldsListener, { names: ["birthCountryCode"], children: ({ birthCountryCode }) => (_jsxs(_Fragment, { children: [_jsx(Field, { name: "birthCity", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthCity"), style: styles.inputContainer, render: id => (_jsx(GMapCityInput, { id: id, apiKey: googleMapApiKey, error: error, country: birthCountryCode.value, value: value ?? "", onValueChange: onChange, placeholder: birthCountryCode.value == null
                                                         ? t("beneficiaryForm.beneficiary.fillBirthCountry")
                                                         : t("beneficiaryForm.beneficiary.birthCityPlaceholder"), onSuggestion: place => {
                                                         onChange(place.city);
                                                         setFieldValue("birthCityPostalCode", place.postalCode);
                                                     }, onLoadError: onCityLoadError })) })) }), _jsx(Space, { width: 12 }), _jsx(Field, { name: "birthCityPostalCode", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.birthPostalCode"), style: styles.inputContainer, render: id => (_jsx(LakeTextInput, { error: error, placeholder: birthCountryCode.value == null
                                                         ? t("beneficiaryForm.beneficiary.fillBirthCountry")
-                                                        : t("beneficiaryForm.beneficiary.birthPostalCodePlaceholder"), id: id, disabled: birthCountryCode.value === undefined, value: value, onChangeText: onChange })) })) })] })) }) }), _jsx(Field, { name: "type", children: ({ value, onChange }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.type"), type: "radioGroup", render: () => (_jsx(RadioGroup, { direction: "row", value: value, onValueChange: onChange, items: beneficiaryTypes })) })) }), _jsx(FieldsListener, { names: ["type"], children: ({ type }) => type.value === "HasCapital" ? (_jsxs(_Fragment, { children: [_jsx(Field, { name: "totalCapitalPercentage", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.totalCapitalPercentage"), render: id => (_jsx(LakeTextInput, { error: error, unit: "%", inputMode: "decimal", "aria-valuemin": 0, "aria-valuemax": 100, id: id, value: value, onChangeText: onChange })) })) }), _jsx(Space, { height: 12 }), _jsx(Field, { name: "capitalType", children: ({ value, error, onChange }) => (_jsx(CapitalTypeCheckboxes, { value: value ?? "none", error: error, onChange: onChange })) })] })) : null })] })))
-                    .with("address", () => (_jsxs(View, { role: "form", children: [_jsx(Field, { name: "country", children: ({ value, onChange }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.country"), render: id => (_jsx(CountryPicker, { id: id, value: value, items: individualCountriesItems, onValueChange: onChange })) })) }), _jsx(Space, { height: 12 }), _jsx(FieldsListener, { names: ["country"], children: ({ country }) => (_jsxs(_Fragment, { children: [_jsx(AddressFormPart, { initialAddress: initialState?.residencyAddressLine1 ?? "", initialCity: initialState?.residencyAddressCity ?? "", initialPostalCode: initialState?.residencyAddressPostalCode ?? "", country: country?.value ?? accountCountry, label: t("beneficiaryForm.beneficiary.address"), Field: Field, setFieldValue: setFieldValue, listenFields: listenFields, isLarge: large }), country?.value === "DEU" && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), _jsx(Field, { name: "taxIdentificationNumber", children: ({ value, error, valid, onChange }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.taxIdentificationNumber"), optionalLabel: t("common.optional"), render: id => (_jsx(LakeTextInput, { id: id, placeholder: t("beneficiaryForm.beneficiary.taxIdentificationNumberPlaceholder"), value: value, error: error, valid: valid, onChangeText: onChange })) })) })] }))] })) })] })))
+                                                        : t("beneficiaryForm.beneficiary.birthPostalCodePlaceholder"), id: id, disabled: birthCountryCode.value === undefined, value: value, onChangeText: onChange })) })) })] })) }) }), accountCountry === "ESP" && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), _jsx(Field, { name: "taxIdentificationNumber", children: ({ value, error, valid, onChange }) => (_jsx(TaxIdentificationNumberInput, { value: value ?? "", error: error, valid: valid, onChange: onChange, accountCountry: accountCountry, isCompany: false })) }), _jsx(Space, { height: 12 })] })), _jsx(Field, { name: "type", children: ({ value, onChange }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.type"), type: "radioGroup", render: () => (_jsx(RadioGroup, { direction: "row", value: value, onValueChange: onChange, items: beneficiaryTypes })) })) }), _jsx(FieldsListener, { names: ["type"], children: ({ type }) => type.value === "HasCapital" ? (_jsxs(_Fragment, { children: [_jsx(Field, { name: "totalCapitalPercentage", children: ({ value, onChange, error }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.totalCapitalPercentage"), render: id => (_jsx(LakeTextInput, { error: error, unit: "%", inputMode: "decimal", "aria-valuemin": 0, "aria-valuemax": 100, id: id, value: value, onChangeText: onChange })) })) }), _jsx(Space, { height: 12 }), _jsx(Field, { name: "capitalType", children: ({ value, error, onChange }) => (_jsx(CapitalTypeCheckboxes, { value: value ?? "none", error: error, onChange: onChange })) })] })) : null })] })))
+                    .with("address", () => (_jsxs(View, { role: "form", children: [_jsx(Field, { name: "country", children: ({ value, onChange }) => (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.country"), render: id => (_jsx(CountryPicker, { id: id, value: value, items: individualCountriesItems, onValueChange: onChange })) })) }), _jsx(Space, { height: 12 }), _jsx(FieldsListener, { names: ["country"], children: ({ country }) => (_jsxs(_Fragment, { children: [_jsx(AddressFormPart, { apiKey: googleMapApiKey, initialAddress: initialState?.residencyAddressLine1 ?? "", initialCity: initialState?.residencyAddressCity ?? "", initialPostalCode: initialState?.residencyAddressPostalCode ?? "", country: country?.value ?? accountCountry, label: t("beneficiaryForm.beneficiary.address"), Field: Field, setFieldValue: setFieldValue, listenFields: listenFields, isLarge: large }), country?.value === "DEU" && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), _jsx(Field, { name: "taxIdentificationNumber", children: ({ value, error, valid, onChange }) => (_jsx(TaxIdentificationNumberInput, { value: value ?? "", error: error, valid: valid, onChange: onChange, accountCountry: accountCountry, isCompany: false, 
+                                                    // is mandatory for German accounts and UBO living in Germany
+                                                    required: true })) })] }))] })) })] })))
                     .exhaustive(), isAddressRequired && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 12 }), _jsx(StepDots, { currentStep: step, steps: formSteps })] }))] })) }));
 });

package/src/components/{AddressSearchInput.d.ts → GMapAddressSearchInput.d.ts}

@@ -1,13 +1,7 @@
 import { CountryCCA3 } from "@swan-io/shared-business/src/constants/countries";
 import { MutableRefObject } from "react";
 import { StyleProp, ViewStyle } from "react-native";
-export type PlaceDetail = {
-    completeAddress: string;
-    streetNumber: string;
-    city: string;
-    country: string;
-    postalCode: string;
-};
+import { PlaceDetail } from "../hooks/useGoogleMapSDK";
 type Props = {
     inputRef?: MutableRefObject<unknown>;
     id?: string;
@@ -22,7 +16,7 @@ type Props = {
     placeholder: string;
     shouldDisplaySuggestions?: boolean;
     emptyResultText: string;
-    apiKey?: string;
+    apiKey: string;
 };
-export declare const AddressSearchInput: ({ inputRef, id, country, disabled, error, value: initialValue, onValueChange, onSuggestion, language, placeholder, shouldDisplaySuggestions, emptyResultText, apiKey, }: Props) => JSX.Element | null;
+export declare const GMapAddressSearchInput: ({ inputRef, id, country, disabled, error, value, onValueChange, onSuggestion, language, placeholder, shouldDisplaySuggestions, emptyResultText, apiKey, }: Props) => JSX.Element;
 export {};

package/src/components/GMapAddressSearchInput.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Future, Result } from "@swan-io/boxed";
+import { AutoWidthImage } from "@swan-io/lake/src/components/AutoWidthImage";
+import { AutocompleteSearchInput } from "@swan-io/lake/src/components/AutocompleteSearchInput";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { countriesWithMultipleCCA3, } from "@swan-io/shared-business/src/constants/countries";
+import { useCallback, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import poweredByGoogle from "../assets/images/powered_by_google_on_white_hdpi.png";
+import { getPlaceDetails, useGoogleMapSDK } from "../hooks/useGoogleMapSDK";
+const styles = StyleSheet.create({
+    poweredByGoogle: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+    },
+});
+export const GMapAddressSearchInput = ({ inputRef, id, country, disabled, error, value, onValueChange, onSuggestion, language, placeholder, shouldDisplaySuggestions = true, emptyResultText, apiKey, }) => {
+    const sdk = useGoogleMapSDK({
+        language,
+        apiKey,
+    });
+    const autocomplete = useMemo(() => sdk.map(google => new google.maps.places.AutocompleteService()), [sdk]);
+    const loadSuggestions = useCallback((value) => {
+        if (autocomplete.isDone()) {
+            return Future.fromPromise(autocomplete.get().getPlacePredictions({
+                input: value,
+                componentRestrictions: { country: countriesWithMultipleCCA3[country] ?? [country] },
+                types: ["address"],
+            })).mapOk(({ predictions }) => predictions.map(p => ({
+                id: p.place_id,
+                title: p.structured_formatting.main_text,
+                subtitle: p.structured_formatting.secondary_text,
+                value: null,
+            })), true);
+        }
+        return Future.value(Result.Ok([]));
+    }, [autocomplete, country]);
+    const onSuggestionSelected = useCallback((suggestion) => {
+        getPlaceDetails(suggestion.id).onResolve(result => {
+            if (result.isOk()) {
+                const dependsOnCountriesWithMultipleCCA3 = countriesWithMultipleCCA3[country]?.includes(result.value.country);
+                onSuggestion?.({
+                    ...result.value,
+                    country: dependsOnCountriesWithMultipleCCA3 === true ? country : result.value.country,
+                });
+            }
+        });
+    }, [country, onSuggestion]);
+    return (_jsx(AutocompleteSearchInput, { inputRef: inputRef, value: value, onValueChange: onValueChange, disabled: disabled, id: id, placeholder: placeholder, error: error, emptyResultText: emptyResultText, ListFooterComponent: _jsx(Box, { direction: "row", justifyContent: "end", style: styles.poweredByGoogle, children: _jsx(AutoWidthImage, { height: 14, sourceUri: poweredByGoogle }) }), shouldDisplaySuggestions: shouldDisplaySuggestions, loadSuggestions: loadSuggestions, onSuggestion: onSuggestionSelected }));
+};

package/src/components/{LakeCityInput.d.ts → GMapCityInput.d.ts}

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 import { CountryCCA3 } from "../constants/countries";
-type PlaceDetail = {
-    city: string;
-    postalCode: string;
-};
+import { PlaceDetail } from "../hooks/useGoogleMapSDK";
 type Props = {
     value: string;
     onValueChange: (value: string) => void;
@@ -12,9 +9,9 @@ type Props = {
     error?: string;
     id?: string;
     placeholder?: string;
-    onSuggestion?: (place: PlaceDetail) => void;
+    onSuggestion?: (place: Pick<PlaceDetail, "city" | "postalCode">) => void;
     onLoadError: (error: unknown) => void;
-    apiKey?: string;
+    apiKey: string;
 };
-export declare const LakeCityInput: ({ value, onValueChange, country, disabled, placeholder, id, error, onSuggestion, onLoadError, apiKey, }: Props) => JSX.Element | null;
+export declare const GMapCityInput: ({ value, onValueChange, country, disabled, placeholder, id, error, onSuggestion, onLoadError, apiKey, }: Props) => JSX.Element;
 export {};

package/src/components/GMapCityInput.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Future, Result } from "@swan-io/boxed";
+import { AutoWidthImage } from "@swan-io/lake/src/components/AutoWidthImage";
+import { AutocompleteSearchInput } from "@swan-io/lake/src/components/AutocompleteSearchInput";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { useCallback, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import poweredByGoogle from "../assets/images/powered_by_google_on_white_hdpi.png";
+import { countriesWithMultipleCCA3 } from "../constants/countries";
+import { getPlaceDetails, useGoogleMapSDK } from "../hooks/useGoogleMapSDK";
+import { t } from "../utils/i18n";
+const styles = StyleSheet.create({
+    poweredByGoogle: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+    },
+});
+export const GMapCityInput = ({ value, onValueChange, country, disabled, placeholder, id, error, onSuggestion, onLoadError, apiKey, }) => {
+    const sdk = useGoogleMapSDK({ apiKey });
+    const autocomplete = useMemo(() => sdk.map(google => new google.maps.places.AutocompleteService()), [sdk]);
+    const loadSuggestions = useCallback((value) => {
+        if (autocomplete.isDone() && isNotNullish(country)) {
+            return Future.fromPromise(autocomplete.get().getPlacePredictions({
+                input: value,
+                componentRestrictions: {
+                    country: [...(countriesWithMultipleCCA3[country] ?? "")],
+                },
+                types: ["(cities)"],
+            })).mapOk(({ predictions }) => predictions.map(p => ({
+                id: p.place_id,
+                title: p.structured_formatting.main_text,
+                subtitle: p.structured_formatting.secondary_text,
+                value: null,
+            })), true);
+        }
+        return Future.value(Result.Ok([]));
+    }, [autocomplete, country]);
+    const onSuggestionSelected = useCallback((suggestion) => {
+        getPlaceDetails(suggestion.id).onResolve(result => {
+            if (result.isOk()) {
+                console.log("result.value", result.value);
+                onSuggestion?.(result.value);
+            }
+        });
+    }, [onSuggestion]);
+    return (_jsx(AutocompleteSearchInput, { value: value, onValueChange: onValueChange, disabled: disabled, id: id, placeholder: placeholder, error: error, emptyResultText: t("common.noResult"), ListFooterComponent: _jsx(Box, { direction: "row", justifyContent: "end", style: styles.poweredByGoogle, children: _jsx(AutoWidthImage, { height: 14, sourceUri: poweredByGoogle }) }), loadSuggestions: loadSuggestions, onSuggestion: onSuggestionSelected, onLoadError: onLoadError }));
+};

package/src/components/TaxIdentificationNumberInput.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { AccountCountry } from "../utils/templateTranslations";
+type Props = {
+    value: string;
+    error: string | undefined;
+    valid: boolean;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    accountCountry: AccountCountry;
+    isCompany: boolean;
+    required?: boolean;
+};
+export declare const TaxIdentificationNumberInput: ({ value, error, valid, disabled, onChange, onBlur, accountCountry, isCompany, required, }: Props) => JSX.Element;
+export {};

package/src/components/TaxIdentificationNumberInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
+import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
+import { LakeTooltip } from "@swan-io/lake/src/components/LakeTooltip";
+import { colors } from "@swan-io/lake/src/constants/design";
+import { t } from "../utils/i18n";
+import { getCompanyTaxNumberHelp, getCompanyTaxNumberPlaceholder, getIndividualTaxNumberHelp, getIndividualTaxNumberPlaceholder, getTaxNumberTooltip, } from "../utils/templateTranslations";
+export const TaxIdentificationNumberInput = ({ value, error, valid, disabled, onChange, onBlur, accountCountry, isCompany, required, }) => {
+    return (_jsx(LakeLabel, { label: t("beneficiaryForm.beneficiary.taxIdentificationNumber"), optionalLabel: required === true ? undefined : t("common.optional"), help: _jsx(LakeTooltip, { content: getTaxNumberTooltip(accountCountry), placement: "top", width: accountCountry === "DEU" ? 800 : undefined, children: _jsx(Icon, { name: "question-circle-regular", size: 16, color: colors.gray[600] }) }), render: id => (_jsx(LakeTextInput, { id: id, placeholder: isCompany
+                ? getCompanyTaxNumberPlaceholder(accountCountry)
+                : getIndividualTaxNumberPlaceholder(accountCountry), help: isCompany
+                ? getCompanyTaxNumberHelp(accountCountry)
+                : getIndividualTaxNumberHelp(accountCountry), value: value, error: error, valid: valid, disabled: disabled, onChangeText: onChange, onBlur: onBlur })) }));
+};

package/src/hooks/useGoogleMapSDK.d.ts

@@ -1,8 +1,16 @@
 /// <reference types="google.maps" />
-import { AsyncData } from "@swan-io/boxed";
+import { AsyncData, Future, Result } from "@swan-io/boxed";
 type Props = {
     language?: string;
-    apiKey?: string;
+    apiKey: string;
 };
 export declare const useGoogleMapSDK: ({ language, apiKey }: Props) => AsyncData<typeof google>;
+export type PlaceDetail = {
+    completeAddress: string;
+    streetNumber: string;
+    city: string;
+    country: string;
+    postalCode: string;
+};
+export declare const getPlaceDetails: (placeId: string) => Future<Result<PlaceDetail, unknown>>;
 export {};

package/src/hooks/useGoogleMapSDK.js

@@ -1,7 +1,9 @@
 import { Loader } from "@googlemaps/js-api-loader";
-import { AsyncData } from "@swan-io/boxed";
+import { AsyncData, Future, Result } from "@swan-io/boxed";
 import { useEffect } from "react";
 import { atom, useAtom } from "react-atomic-state";
+import { match } from "ts-pattern";
+import { getCCA3forCCA2 } from "../constants/countries";
 const sdk = atom(AsyncData.NotAsked());
 export const useGoogleMapSDK = ({ language, apiKey }) => {
     const googleSdk = useAtom(sdk);
@@ -21,3 +23,40 @@ export const useGoogleMapSDK = ({ language, apiKey }) => {
     }, [language, googleSdk, apiKey]);
     return googleSdk;
 };
+export const getPlaceDetails = (placeId) => {
+    return Future.make(resolve => {
+        const place = new google.maps.places.PlacesService(document.createElement("div"));
+        place.getDetails({ placeId }, placeDetail => {
+            if (placeDetail?.address_components == null) {
+                resolve(Result.Error("No place detail found"));
+                return;
+            }
+            const result = {
+                completeAddress: "",
+                streetNumber: "",
+                postalCode: "",
+                country: "",
+                city: "",
+            };
+            placeDetail.address_components.forEach(({ types, short_name, long_name }) => {
+                const type = types[0];
+                match(type)
+                    .with("street_number", () => (result.streetNumber = long_name))
+                    .with("route", () => (result.completeAddress = long_name))
+                    .with("postal_code", () => (result.postalCode = short_name))
+                    .with("country", () => (result.country = getCCA3forCCA2(short_name) ?? short_name))
+                    .with("locality", () => (result.city = long_name))
+                    .otherwise(() => { });
+            });
+            if (result.streetNumber != "") {
+                if (placeDetail?.name === `${result.completeAddress} ${result.streetNumber}`) {
+                    result.completeAddress = `${result.completeAddress} ${result.streetNumber}`;
+                }
+                else {
+                    result.completeAddress = `${result.streetNumber} ${result.completeAddress}`;
+                }
+            }
+            resolve(Result.Ok(result));
+        });
+    });
+};

package/src/locales/en.json

@@ -47,6 +47,11 @@
   "businessActivity.scientificActivities": "Scientific activities",
   "businessActivity.transportation": "Transportation",
   "common.form.invalidTaxIdentificationNumber": "This tax identification number is invalid",
+  "common.form.taxIdentificationNumber.label": "Tax identification number",
+  "common.form.taxIdentificationNumber.placeholder": "Tax ID",
+  "common.form.taxIdentificationNumber.tooltip.deu": "Identifikationsnummer (also Steuerliche Identifikationsnummer, Persönliche Identificationsnummer, Identifikationsnummer, Steuer-IdNr., IdNr or Steuer-ID, according to § 139b AO)",
+  "common.form.help.nbCharacters": "{nbCharacters} characters",
+  "common.form.help.nbDigits": "{nbDigits} digits",
   "common.noResult": "Empty result",
   "common.optional": "Optional",
   "common.skipToContent": "Skip to content",

package/src/utils/templateTranslations.d.ts

@@ -0,0 +1,6 @@
+export type AccountCountry = "DEU" | "ESP" | "FRA";
+export declare const getIndividualTaxNumberPlaceholder: (accountCountry: AccountCountry) => string;
+export declare const getCompanyTaxNumberPlaceholder: (accountCountry: AccountCountry) => string;
+export declare const getTaxNumberTooltip: (accountCountry: AccountCountry) => string;
+export declare const getCompanyTaxNumberHelp: (accountCountry: AccountCountry) => string;
+export declare const getIndividualTaxNumberHelp: (accountCountry: AccountCountry) => string;

package/src/utils/templateTranslations.js

@@ -0,0 +1,22 @@
+import { match } from "ts-pattern";
+import { t } from "./i18n";
+export const getIndividualTaxNumberPlaceholder = (accountCountry) => match(accountCountry)
+    .with("DEU", () => `${t('common.form.taxIdentificationNumber.placeholder')} (Steueridentifikationsnummer)`)
+    .with("ESP", () => `${t('common.form.taxIdentificationNumber.placeholder')} (Número de Identificación Fiscal)`)
+    .otherwise(() => t('common.form.taxIdentificationNumber.placeholder'));
+export const getCompanyTaxNumberPlaceholder = (accountCountry) => match(accountCountry)
+    .with("DEU", () => `${t('common.form.taxIdentificationNumber.placeholder')} (Steuer-Nummer)`)
+    .with("ESP", () => `${t('common.form.taxIdentificationNumber.placeholder')} (Número de Identificación Fiscal)`)
+    .otherwise(() => t('common.form.taxIdentificationNumber.placeholder'));
+export const getTaxNumberTooltip = (accountCountry) => match(accountCountry)
+    .with("DEU", () => t("common.form.taxIdentificationNumber.tooltip.deu"))
+    .with("ESP", () => "Número de Identificación Fiscal") // no need to translate
+    .otherwise(() => '');
+export const getCompanyTaxNumberHelp = (accountCountry) => match(accountCountry)
+    .with("DEU", () => t("common.form.help.nbDigits", { nbDigits: '10-11' }))
+    .with("ESP", () => t("common.form.help.nbCharacters", { nbCharacters: '9' }))
+    .otherwise(() => '');
+export const getIndividualTaxNumberHelp = (accountCountry) => match(accountCountry)
+    .with("DEU", () => t("common.form.help.nbDigits", { nbDigits: '11' }))
+    .with("ESP", () => t("common.form.help.nbCharacters", { nbCharacters: '9' }))
+    .otherwise(() => '');

package/src/utils/validation.d.ts

@@ -1,7 +1,8 @@
 import { Validator } from "react-ux-form";
+import { AccountCountry } from "./templateTranslations";
 export declare const isValidVatNumber: (maybeVat: string) => boolean;
 export declare const validateNullableRequired: Validator<string | undefined>;
 export declare const validateRequired: Validator<string>;
 export declare const validateBooleanRequired: Validator<boolean | undefined>;
-export declare const validateIndividualTaxNumber: Validator<string | undefined>;
-export declare const validateCompanyTaxNumber: Validator<string | undefined>;
+export declare const validateIndividualTaxNumber: (accountCountry: AccountCountry) => Validator<string | undefined>;
+export declare const validateCompanyTaxNumber: (accountCountry: AccountCountry) => Validator<string | undefined>;

package/src/utils/validation.js

@@ -1,3 +1,5 @@
+import { noop } from "@swan-io/lake/src/utils/function";
+import { match } from "ts-pattern";
 import { t } from "./i18n";
 const VAT_NUMBER_REGEX = /^((AT)?U[0-9]{8}|(BE)?0[0-9]{9}|(BG)?[0-9]{9,10}|(CY)?[0-9]{8}L|(CZ)?[0-9]{8,10}|(DE)?[0-9]{9}|(DK)?[0-9]{8}|(EE)?[0-9]{9}|(EL|GR)?[0-9]{9}|(ES)?[0-9A-Z][0-9]{7}[0-9A-Z]|(FI)?[0-9]{8}|(FR)?[0-9A-Z]{2}[0-9]{9}|(GB)?([0-9]{9}([0-9]{3})?|[A-Z]{2}[0-9]{3})|(HU)?[0-9]{8}|(IE)?[0-9]S[0-9]{5}L|(IT)?[0-9]{11}|(LT)?([0-9]{9}|[0-9]{12})|(LU)?[0-9]{8}|(LV)?[0-9]{11}|(MT)?[0-9]{8}|(NL)?[0-9]{9}B[0-9]{2}|(PL)?[0-9]{10}|(PT)?[0-9]{9}|(RO)?[0-9]{2,10}|(SE)?[0-9]{12}|(SI)?[0-9]{8}|(SK)?[0-9]{10})$/;
 // (AT)?U[0-9]{8} |                              # Austria
@@ -45,21 +47,41 @@ export const validateBooleanRequired = value => {
         return t("error.requiredField");
     }
 };
-export const validateIndividualTaxNumber = value => {
+export const validateIndividualTaxNumber = (accountCountry) => value => {
     if (value == null || !value) {
         return;
     }
-    // accept 11 digits
-    if (!/^\d{11}$/.test(value)) {
-        return t("common.form.invalidTaxIdentificationNumber");
-    }
+    return match(accountCountry)
+        .with("DEU", () => {
+        // accept 11 digits
+        if (!/^\d{11}$/.test(value)) {
+            return t("common.form.invalidTaxIdentificationNumber");
+        }
+    })
+        .with("ESP", () => {
+        // accept 9 characters
+        if (!/^[a-zA-Z0-9]{9}$/.test(value)) {
+            return t("common.form.invalidTaxIdentificationNumber");
+        }
+    })
+        .otherwise(noop);
 };
-export const validateCompanyTaxNumber = value => {
+export const validateCompanyTaxNumber = (accountCountry) => value => {
     if (value == null || !value) {
         return;
     }
-    // accept 10 or 11 digits
-    if (!/^\d{10,11}$/.test(value)) {
-        return t("common.form.invalidTaxIdentificationNumber");
-    }
+    return match(accountCountry)
+        .with("DEU", () => {
+        // accept 10 or 11 digits
+        if (!/^\d{10,11}$/.test(value)) {
+            return t("common.form.invalidTaxIdentificationNumber");
+        }
+    })
+        .with("ESP", () => {
+        // accept 9 characters
+        if (!/^[a-zA-Z0-9]{9}$/.test(value)) {
+            return t("common.form.invalidTaxIdentificationNumber");
+        }
+    })
+        .otherwise(noop);
 };

package/src/components/AddressSearchInput.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsyncData, Future } from "@swan-io/boxed";
-import { AutoWidthImage } from "@swan-io/lake/src/components/AutoWidthImage";
-import { Box } from "@swan-io/lake/src/components/Box";
-import { LakeCombobox } from "@swan-io/lake/src/components/LakeCombobox";
-import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
-import { colors } from "@swan-io/lake/src/constants/colors";
-import { typography } from "@swan-io/lake/src/constants/typography";
-import { useFirstMountState } from "@swan-io/lake/src/hooks/useFirstMountState";
-import { countriesWithMultipleCCA3, getCCA3forCCA2, } from "@swan-io/shared-business/src/constants/countries";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { StyleSheet, Text } from "react-native";
-import { match } from "ts-pattern";
-import poweredByGoogle from "../assets/images/powered_by_google_on_white_hdpi.png";
-import { useGoogleMapSDK } from "../hooks/useGoogleMapSDK";
-const styles = StyleSheet.create({
-    itemTitle: {
-        ...typography.bodyLarge,
-        lineHeight: typography.lineHeights.title,
-        userSelect: "none",
-    },
-    itemSubtitle: {
-        ...typography.bodySmall,
-        color: colors.gray[50],
-        userSelect: "none",
-    },
-    poweredByGoogle: {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-    },
-});
-export const AddressSearchInput = ({ inputRef, id, country, disabled, error, value: initialValue, onValueChange, onSuggestion, language, placeholder, shouldDisplaySuggestions = true, emptyResultText, apiKey, }) => {
-    const isFirstMount = useFirstMountState();
-    const [state, setState] = useState(AsyncData.NotAsked());
-    const [value, setValue] = useState(initialValue ?? "");
-    const showTriggerSearchRef = useRef(true);
-    const sdk = useGoogleMapSDK({
-        language,
-        apiKey,
-    });
-    const autocomplete = useMemo(() => sdk.map(google => new google.maps.places.AutocompleteService()), [sdk]);
-    useEffect(() => {
-        if (!isFirstMount && initialValue != null) {
-            setValue(initialValue);
-        }
-    }, [isFirstMount, initialValue]);
-    useEffect(() => {
-        if (value.length <= 3 || !shouldDisplaySuggestions || showTriggerSearchRef.current === false) {
-            return setState(AsyncData.NotAsked());
-        }
-        setState(AsyncData.Loading());
-        const request = Future.make(resolve => {
-            const timeoutId = setTimeout(() => {
-                if (autocomplete.isDone()) {
-                    Future.fromPromise(autocomplete.get().getPlacePredictions({
-                        input: value,
-                        componentRestrictions: { country: countriesWithMultipleCCA3[country] ?? [country] },
-                        types: ["address"],
-                    })).onResolve(resolve);
-                }
-            }, 250);
-            return () => clearTimeout(timeoutId);
-        }).mapOk(({ predictions }) => predictions.map(p => ({ value: p.place_id, prediction: p })), true);
-        request.onResolve(value => setState(AsyncData.Done(value)));
-        return () => request.cancel();
-    }, [country, value, autocomplete, shouldDisplaySuggestions]);
-    useEffect(() => {
-        showTriggerSearchRef.current = true;
-    }, [value]);
-    return sdk.match({
-        NotAsked: () => null,
-        Loading: () => null,
-        Done: google => {
-            if (shouldDisplaySuggestions) {
-                const place = new google.maps.places.PlacesService(document.createElement("div"));
-                const selectAddress = (suggestion) => {
-                    place.getDetails({ placeId: suggestion.value }, placeDetail => {
-                        const result = {
-                            completeAddress: "",
-                            streetNumber: "",
-                            postalCode: "",
-                            country: "",
-                            city: "",
-                        };
-                        placeDetail?.address_components?.forEach(({ types, short_name, long_name }) => {
-                            const type = types[0];
-                            match(type)
-                                .with("street_number", () => (result.streetNumber = long_name))
-                                .with("route", () => (result.completeAddress = long_name))
-                                .with("postal_code", () => (result.postalCode = short_name))
-                                .with("country", () => (result.country = getCCA3forCCA2(short_name) ?? short_name))
-                                .with("locality", () => (result.city = long_name))
-                                .otherwise(() => { });
-                        });
-                        if (result.streetNumber != "") {
-                            if (placeDetail?.name === `${result.completeAddress} ${result.streetNumber}`) {
-                                result.completeAddress = `${result.completeAddress} ${result.streetNumber}`;
-                            }
-                            else {
-                                result.completeAddress = `${result.streetNumber} ${result.completeAddress}`;
-                            }
-                        }
-                        showTriggerSearchRef.current = false;
-                        setValue(result.completeAddress);
-                        onSuggestion?.(result);
-                    });
-                };
-                return (_jsx(LakeCombobox, { inputRef: inputRef, id: id, placeholder: placeholder, value: value, items: state, icon: "search-filled", disabled: disabled, error: error, ListFooterComponent: _jsx(Box, { direction: "row", justifyContent: "end", style: styles.poweredByGoogle, children: _jsx(AutoWidthImage, { height: 14, sourceUri: poweredByGoogle }) }), onSelectItem: suggestion => selectAddress(suggestion), onValueChange: value => {
-                        setValue(value);
-                        onValueChange(value);
-                    }, keyExtractor: item => item.value, emptyResultText: emptyResultText, renderItem: item => (_jsxs(_Fragment, { children: [_jsx(Text, { numberOfLines: 1, style: styles.itemTitle, children: item.prediction.structured_formatting.main_text }), _jsx(Text, { numberOfLines: 1, style: styles.itemSubtitle, children: item.prediction.structured_formatting.secondary_text })] })) }));
-            }
-            return (_jsx(LakeTextInput, { ref: inputRef, id: id, placeholder: placeholder, value: value, icon: "search-filled", disabled: disabled, error: error, onChangeText: value => {
-                    setValue(value);
-                    onValueChange(value);
-                } }));
-        },
-    });
-};

package/src/components/LakeCityInput.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsyncData, Future } from "@swan-io/boxed";
-import { AutoWidthImage } from "@swan-io/lake/src/components/AutoWidthImage";
-import { Box } from "@swan-io/lake/src/components/Box";
-import { LakeCombobox } from "@swan-io/lake/src/components/LakeCombobox";
-import { colors } from "@swan-io/lake/src/constants/design";
-import { typography } from "@swan-io/lake/src/constants/typography";
-import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { StyleSheet, Text } from "react-native";
-import { match } from "ts-pattern";
-import poweredByGoogle from "../assets/images/powered_by_google_on_white_hdpi.png";
-import { countriesWithMultipleCCA3 } from "../constants/countries";
-import { useGoogleMapSDK } from "../hooks/useGoogleMapSDK";
-import { t } from "../utils/i18n";
-const styles = StyleSheet.create({
-    itemTitle: {
-        ...typography.bodyLarge,
-        lineHeight: typography.lineHeights.title,
-        userSelect: "none",
-    },
-    itemSubtitle: {
-        ...typography.bodySmall,
-        color: colors.gray[400],
-        userSelect: "none",
-    },
-    poweredByGoogle: {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-    },
-});
-export const LakeCityInput = ({ value, onValueChange, country, disabled, placeholder, id, error, onSuggestion, onLoadError, apiKey, }) => {
-    const [state, setState] = useState(AsyncData.NotAsked());
-    const comboboxRef = useRef(null);
-    const sdk = useGoogleMapSDK({ apiKey });
-    const autocomplete = useMemo(() => sdk.map(google => new google.maps.places.AutocompleteService()), [sdk]);
-    useEffect(() => {
-        if (value.length <= 3) {
-            return setState(AsyncData.NotAsked());
-        }
-        setState(AsyncData.Loading());
-        if (isNotNullish(country)) {
-            const request = Future.make(resolve => {
-                const timeoutId = setTimeout(() => {
-                    if (autocomplete.isDone()) {
-                        Future.fromPromise(autocomplete.get().getPlacePredictions({
-                            input: value,
-                            componentRestrictions: {
-                                country: [...(countriesWithMultipleCCA3[country] ?? "")],
-                            },
-                            types: ["(cities)"],
-                        })).onResolve(resolve);
-                    }
-                }, 250);
-                return () => clearTimeout(timeoutId);
-            }).mapOk(({ predictions }) => predictions.map(p => ({ value: p.place_id, prediction: p })), true);
-            request.tapError(onLoadError).onResolve(value => setState(AsyncData.Done(value)));
-            return () => request.cancel();
-        }
-    }, [country, value, autocomplete, onLoadError]);
-    return sdk.match({
-        NotAsked: () => null,
-        Loading: () => null,
-        Done: google => {
-            const place = new google.maps.places.PlacesService(document.createElement("div"));
-            const selectAddress = (suggestion) => {
-                place.getDetails({ placeId: suggestion.value }, placeDetail => {
-                    const result = {
-                        postalCode: "",
-                        city: "",
-                    };
-                    placeDetail?.address_components?.forEach(({ types, short_name, long_name }) => {
-                        const type = types[0];
-                        match(type)
-                            .with("postal_code", () => (result.postalCode = short_name))
-                            .with("locality", () => (result.city = long_name))
-                            .otherwise(() => { });
-                    });
-                    onSuggestion?.(result);
-                    if (comboboxRef.current) {
-                        comboboxRef.current.close();
-                    }
-                });
-            };
-            return (_jsx(LakeCombobox, { ref: comboboxRef, placeholder: placeholder, value: value, items: state, icon: "search-filled", disabled: isNullish(country) || disabled, error: error, onValueChange: onValueChange, id: id, ListFooterComponent: _jsx(Box, { direction: "row", justifyContent: "end", style: styles.poweredByGoogle, children: _jsx(AutoWidthImage, { height: 14, sourceUri: poweredByGoogle }) }), onSelectItem: selectAddress, emptyResultText: t("common.noResult"), keyExtractor: item => item.value, renderItem: item => (_jsxs(_Fragment, { children: [_jsx(Text, { numberOfLines: 1, style: styles.itemTitle, children: item.prediction.structured_formatting.main_text }), _jsx(Text, { numberOfLines: 1, style: styles.itemSubtitle, children: item.prediction.structured_formatting.secondary_text })] })) }));
-        },
-    });
-};