expo-openpay 0.1.21 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/OPCardForm.d.ts +29 -25
- package/build/components/OPCardForm.d.ts.map +1 -1
- package/build/components/OPCardForm.js +23 -23
- package/build/components/OPCardForm.js.map +1 -1
- package/build/components/OPCardNumberInput.d.ts +6 -6
- package/build/components/OPCardNumberInput.d.ts.map +1 -1
- package/build/components/OPCardNumberInput.js +7 -7
- package/build/components/OPCardNumberInput.js.map +1 -1
- package/build/components/OPCvv2Input.d.ts +5 -5
- package/build/components/OPCvv2Input.d.ts.map +1 -1
- package/build/components/OPCvv2Input.js +5 -5
- package/build/components/OPCvv2Input.js.map +1 -1
- package/build/components/OPExpInput.d.ts +7 -7
- package/build/components/OPExpInput.d.ts.map +1 -1
- package/build/components/OPExpInput.js +12 -7
- package/build/components/OPExpInput.js.map +1 -1
- package/build/components/OPExpMonthInput.d.ts +6 -6
- package/build/components/OPExpMonthInput.d.ts.map +1 -1
- package/build/components/OPExpMonthInput.js +6 -6
- package/build/components/OPExpMonthInput.js.map +1 -1
- package/build/components/OPExpYearInput.d.ts +6 -6
- package/build/components/OPExpYearInput.d.ts.map +1 -1
- package/build/components/OPExpYearInput.js +6 -6
- package/build/components/OPExpYearInput.js.map +1 -1
- package/build/components/OPHolderNameInput.d.ts +4 -4
- package/build/components/OPHolderNameInput.d.ts.map +1 -1
- package/build/components/OPHolderNameInput.js +4 -4
- package/build/components/OPHolderNameInput.js.map +1 -1
- package/build/components/forms/FormField.d.ts +3 -3
- package/build/components/forms/FormField.d.ts.map +1 -1
- package/build/components/forms/FormField.js +18 -3
- package/build/components/forms/FormField.js.map +1 -1
- package/build/context/FormContext.d.ts +2 -1
- package/build/context/FormContext.d.ts.map +1 -1
- package/build/context/FormContext.js +38 -1
- package/build/context/FormContext.js.map +1 -1
- package/package.json +1 -1
- package/src/components/OPCardForm.tsx +41 -36
- package/src/components/OPCardNumberInput.tsx +12 -11
- package/src/components/OPCvv2Input.tsx +10 -9
- package/src/components/OPExpInput.tsx +19 -13
- package/src/components/OPExpMonthInput.tsx +8 -7
- package/src/components/OPExpYearInput.tsx +7 -7
- package/src/components/OPHolderNameInput.tsx +8 -7
- package/src/components/forms/FormField.tsx +26 -5
- package/src/context/FormContext.tsx +50 -0
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
type CardInputOptions = {
|
|
3
|
-
errorMessages?: {
|
|
4
|
-
format?: string;
|
|
5
|
-
invalid?: string;
|
|
6
|
-
required?: string;
|
|
7
|
-
};
|
|
8
3
|
options?: {
|
|
9
4
|
formFieldStyle?: StyleProp<ViewStyle>;
|
|
10
5
|
defaultStyling?: boolean;
|
|
@@ -13,11 +8,16 @@ type CardInputOptions = {
|
|
|
13
8
|
textInputStyle?: StyleProp<TextStyle>;
|
|
14
9
|
};
|
|
15
10
|
placeholder?: string;
|
|
11
|
+
validationMessages?: {
|
|
12
|
+
format?: string;
|
|
13
|
+
invalid?: string;
|
|
14
|
+
required?: string;
|
|
15
|
+
};
|
|
16
16
|
withAnimatedText?: boolean;
|
|
17
17
|
withIcon?: boolean;
|
|
18
18
|
withLabel?: boolean;
|
|
19
19
|
withPlaceholder?: boolean;
|
|
20
20
|
};
|
|
21
|
-
export default function OPExpMonthInput({
|
|
21
|
+
export default function OPExpMonthInput({ options, placeholder, validationMessages, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
|
|
22
22
|
export {};
|
|
23
23
|
//# sourceMappingURL=OPExpMonthInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPExpMonthInput.d.ts","sourceRoot":"","sources":["../../src/components/OPExpMonthInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACtB,
|
|
1
|
+
{"version":3,"file":"OPExpMonthInput.d.ts","sourceRoot":"","sources":["../../src/components/OPExpMonthInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACtB,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAmBF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAY,EACZ,WAAgB,EAChB,kBAA8D,EAC9D,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA+BlB"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { FormField } from "./forms";
|
|
2
|
-
function validateExpiryMonth(value,
|
|
2
|
+
function validateExpiryMonth(value, validationMessages) {
|
|
3
3
|
if (!value)
|
|
4
|
-
return
|
|
4
|
+
return validationMessages?.required || "Month is required";
|
|
5
5
|
const match = /^(\d{2})$/.exec(value);
|
|
6
6
|
if (!match)
|
|
7
|
-
return
|
|
7
|
+
return validationMessages?.format || "Use MM format";
|
|
8
8
|
const month = parseInt(value, 10);
|
|
9
9
|
if (month < 1 || month > 12)
|
|
10
|
-
return
|
|
10
|
+
return validationMessages?.invalid || "Invalid month";
|
|
11
11
|
return undefined;
|
|
12
12
|
}
|
|
13
|
-
export default function OPExpMonthInput({
|
|
13
|
+
export default function OPExpMonthInput({ options = {}, placeholder = "", validationMessages = { format: "", invalid: "", required: "" }, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
|
|
14
14
|
const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
|
|
15
|
-
return (<FormField autoCapitalize="none" autoComplete="cc-exp-month" autoCorrect={false} defaultStyling={defaultStyling}
|
|
15
|
+
return (<FormField autoCapitalize="none" autoComplete="cc-exp-month" autoCorrect={false} defaultStyling={defaultStyling} icon={{ type: "material", name: "calendar-blank" }} keyboardType="number-pad" labelStyle={labelStyle} maxLength={2} name="expMonth" placeholder={placeholder || "MM"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateExpiryMonth} validationMessages={validationMessages} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=OPExpMonthInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPExpMonthInput.js","sourceRoot":"","sources":["../../src/components/OPExpMonthInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBpC,SAAS,mBAAmB,CAC1B,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"OPExpMonthInput.js","sourceRoot":"","sources":["../../src/components/OPExpMonthInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBpC,SAAS,mBAAmB,CAC1B,KAAa,EACb,kBAAuD;IAEvD,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,QAAQ,IAAI,mBAAmB,CAAC;IAEvE,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,MAAM,IAAI,eAAe,CAAC;IAEjE,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAElC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QACzB,OAAO,kBAAkB,EAAE,OAAO,IAAI,eAAe,CAAC;IAExD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,kBAAkB,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EAC9D,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,GAAG,UAAU,EACI;IACjB,MAAM,EACJ,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,EAAE,EACnB,UAAU,GAAG,EAAE,EACf,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,GACpB,GAAG,OAAO,CAAC;IAEZ,OAAO,CACL,CAAC,SAAS,CACR,cAAc,CAAC,MAAM,CACrB,YAAY,CAAC,cAAc,CAC3B,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CACnD,YAAY,CAAC,YAAY,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,CAAC,CAAC,CACb,IAAI,CAAC,UAAU,CACf,WAAW,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CACjC,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,mBAAmB,CAAC,CAC9B,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,IAAI,UAAU,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { StyleProp, ViewStyle, TextStyle } from \"react-native\";\n\nimport { FormField } from \"./forms\";\n\ntype CardInputOptions = {\n options?: {\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n inputStyle?: StyleProp<TextStyle>;\n labelStyle?: StyleProp<TextStyle>;\n textInputStyle?: StyleProp<TextStyle>;\n };\n placeholder?: string;\n validationMessages?: { format?: string; invalid?: string; required?: string };\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateExpiryMonth(\n value: string,\n validationMessages?: Record<string, string | undefined>,\n) {\n if (!value) return validationMessages?.required || \"Month is required\";\n\n const match = /^(\\d{2})$/.exec(value);\n if (!match) return validationMessages?.format || \"Use MM format\";\n\n const month = parseInt(value, 10);\n\n if (month < 1 || month > 12)\n return validationMessages?.invalid || \"Invalid month\";\n\n return undefined;\n}\n\nexport default function OPExpMonthInput({\n options = {},\n placeholder = \"\",\n validationMessages = { format: \"\", invalid: \"\", required: \"\" },\n withAnimatedText = true,\n withIcon = true,\n withLabel = false,\n withPlaceholder = true,\n ...otherProps\n}: CardInputOptions) {\n const {\n defaultStyling = true,\n formFieldStyle = {},\n inputStyle = {},\n labelStyle = {},\n textInputStyle = {},\n } = options;\n\n return (\n <FormField\n autoCapitalize=\"none\"\n autoComplete=\"cc-exp-month\"\n autoCorrect={false}\n defaultStyling={defaultStyling}\n icon={{ type: \"material\", name: \"calendar-blank\" }}\n keyboardType=\"number-pad\"\n labelStyle={labelStyle}\n maxLength={2}\n name=\"expMonth\"\n placeholder={placeholder || \"MM\"}\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateExpiryMonth}\n validationMessages={validationMessages}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
type CardInputOptions = {
|
|
3
|
-
errorMessages?: {
|
|
4
|
-
format?: string;
|
|
5
|
-
expired?: string;
|
|
6
|
-
required?: string;
|
|
7
|
-
};
|
|
8
3
|
options?: {
|
|
9
4
|
formFieldStyle?: StyleProp<ViewStyle>;
|
|
10
5
|
defaultStyling?: boolean;
|
|
@@ -13,11 +8,16 @@ type CardInputOptions = {
|
|
|
13
8
|
textInputStyle?: StyleProp<TextStyle>;
|
|
14
9
|
};
|
|
15
10
|
placeholder?: string;
|
|
11
|
+
validationMessages?: {
|
|
12
|
+
expired?: string;
|
|
13
|
+
format?: string;
|
|
14
|
+
required?: string;
|
|
15
|
+
};
|
|
16
16
|
withAnimatedText?: boolean;
|
|
17
17
|
withIcon?: boolean;
|
|
18
18
|
withLabel?: boolean;
|
|
19
19
|
withPlaceholder?: boolean;
|
|
20
20
|
};
|
|
21
|
-
export default function OPExpYearInput({
|
|
21
|
+
export default function OPExpYearInput({ options, placeholder, validationMessages, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
|
|
22
22
|
export {};
|
|
23
23
|
//# sourceMappingURL=OPExpYearInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPExpYearInput.d.ts","sourceRoot":"","sources":["../../src/components/OPExpYearInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACtB,
|
|
1
|
+
{"version":3,"file":"OPExpYearInput.d.ts","sourceRoot":"","sources":["../../src/components/OPExpYearInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACtB,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAmBF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,WAAgB,EAChB,kBAA8D,EAC9D,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA+BlB"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { FormField } from "./forms";
|
|
2
|
-
function validateExpiryYear(value,
|
|
2
|
+
function validateExpiryYear(value, validationMessages) {
|
|
3
3
|
if (!value)
|
|
4
|
-
return
|
|
4
|
+
return validationMessages?.required || "Year is required";
|
|
5
5
|
const match = /^(\d{2})$/.exec(value);
|
|
6
6
|
if (!match)
|
|
7
|
-
return
|
|
7
|
+
return validationMessages?.format || "Use YY format";
|
|
8
8
|
const year = 2000 + parseInt(value, 10);
|
|
9
9
|
const currentYear = new Date().getFullYear();
|
|
10
10
|
if (year <= currentYear)
|
|
11
|
-
return
|
|
11
|
+
return validationMessages?.expired || "Card expired";
|
|
12
12
|
return undefined;
|
|
13
13
|
}
|
|
14
|
-
export default function OPExpYearInput({
|
|
14
|
+
export default function OPExpYearInput({ options = {}, placeholder = "", validationMessages = { expired: "", format: "", required: "" }, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
|
|
15
15
|
const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
|
|
16
|
-
return (<FormField autoCapitalize="none" autoComplete="cc-exp-year" autoCorrect={false} defaultStyling={defaultStyling}
|
|
16
|
+
return (<FormField autoCapitalize="none" autoComplete="cc-exp-year" autoCorrect={false} defaultStyling={defaultStyling} icon={{ type: "material", name: "calendar-blank" }} keyboardType="number-pad" labelStyle={labelStyle} maxLength={2} name="expYear" placeholder={placeholder || "YY"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateExpiryYear} validationMessages={validationMessages} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
17
17
|
}
|
|
18
18
|
//# sourceMappingURL=OPExpYearInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPExpYearInput.js","sourceRoot":"","sources":["../../src/components/OPExpYearInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBpC,SAAS,kBAAkB,CACzB,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"OPExpYearInput.js","sourceRoot":"","sources":["../../src/components/OPExpYearInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBpC,SAAS,kBAAkB,CACzB,KAAa,EACb,kBAAuD;IAEvD,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,QAAQ,IAAI,kBAAkB,CAAC;IAEtE,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,MAAM,IAAI,eAAe,CAAC;IAEjE,MAAM,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAE7C,IAAI,IAAI,IAAI,WAAW;QAAE,OAAO,kBAAkB,EAAE,OAAO,IAAI,cAAc,CAAC;IAE9E,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,kBAAkB,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EAC9D,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,GAAG,UAAU,EACI;IACjB,MAAM,EACJ,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,EAAE,EACnB,UAAU,GAAG,EAAE,EACf,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,GACpB,GAAG,OAAO,CAAC;IAEZ,OAAO,CACL,CAAC,SAAS,CACR,cAAc,CAAC,MAAM,CACrB,YAAY,CAAC,aAAa,CAC1B,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CACnD,YAAY,CAAC,YAAY,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,CAAC,CAAC,CACb,IAAI,CAAC,SAAS,CACd,WAAW,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CACjC,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAC7B,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,IAAI,UAAU,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { StyleProp, ViewStyle, TextStyle } from \"react-native\";\n\nimport { FormField } from \"./forms\";\n\ntype CardInputOptions = {\n options?: {\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n inputStyle?: StyleProp<TextStyle>;\n labelStyle?: StyleProp<TextStyle>;\n textInputStyle?: StyleProp<TextStyle>;\n };\n placeholder?: string;\n validationMessages?: { expired?: string; format?: string; required?: string };\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateExpiryYear(\n value: string,\n validationMessages?: Record<string, string | undefined>,\n) {\n if (!value) return validationMessages?.required || \"Year is required\";\n\n const match = /^(\\d{2})$/.exec(value);\n if (!match) return validationMessages?.format || \"Use YY format\";\n\n const year = 2000 + parseInt(value, 10);\n const currentYear = new Date().getFullYear();\n\n if (year <= currentYear) return validationMessages?.expired || \"Card expired\";\n\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\n placeholder = \"\",\n validationMessages = { expired: \"\", format: \"\", required: \"\" },\n withAnimatedText = true,\n withIcon = true,\n withLabel = false,\n withPlaceholder = true,\n ...otherProps\n}: CardInputOptions) {\n const {\n defaultStyling = true,\n formFieldStyle = {},\n inputStyle = {},\n labelStyle = {},\n textInputStyle = {},\n } = options;\n\n return (\n <FormField\n autoCapitalize=\"none\"\n autoComplete=\"cc-exp-year\"\n autoCorrect={false}\n defaultStyling={defaultStyling}\n icon={{ type: \"material\", name: \"calendar-blank\" }}\n keyboardType=\"number-pad\"\n labelStyle={labelStyle}\n maxLength={2}\n name=\"expYear\"\n placeholder={placeholder || \"YY\"}\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateExpiryYear}\n validationMessages={validationMessages}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
type CardInputOptions = {
|
|
3
|
-
errorMessages?: {
|
|
4
|
-
required: string;
|
|
5
|
-
};
|
|
6
3
|
options?: {
|
|
7
4
|
formFieldStyle?: StyleProp<ViewStyle>;
|
|
8
5
|
defaultStyling?: boolean;
|
|
@@ -11,11 +8,14 @@ type CardInputOptions = {
|
|
|
11
8
|
textInputStyle?: StyleProp<TextStyle>;
|
|
12
9
|
};
|
|
13
10
|
placeholder?: string;
|
|
11
|
+
validationMessages?: {
|
|
12
|
+
required: string;
|
|
13
|
+
};
|
|
14
14
|
withAnimatedText?: boolean;
|
|
15
15
|
withIcon?: boolean;
|
|
16
16
|
withLabel?: boolean;
|
|
17
17
|
withPlaceholder?: boolean;
|
|
18
18
|
};
|
|
19
|
-
export default function OPHolderNameInput({
|
|
19
|
+
export default function OPHolderNameInput({ options, placeholder, validationMessages, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
|
|
20
20
|
export {};
|
|
21
21
|
//# sourceMappingURL=OPHolderNameInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPHolderNameInput.d.ts","sourceRoot":"","sources":["../../src/components/OPHolderNameInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACtB,
|
|
1
|
+
{"version":3,"file":"OPHolderNameInput.d.ts","sourceRoot":"","sources":["../../src/components/OPHolderNameInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACtB,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAYF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAY,EACZ,WAAgB,EAChB,kBAAqC,EACrC,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA6BlB"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FormField } from "./forms";
|
|
2
|
-
function validateCardholderName(value,
|
|
2
|
+
function validateCardholderName(value, validationMessages) {
|
|
3
3
|
if (!value)
|
|
4
|
-
return
|
|
4
|
+
return validationMessages?.required || "Cardholder name is required";
|
|
5
5
|
return undefined; // valid cardholder name
|
|
6
6
|
}
|
|
7
|
-
export default function OPHolderNameInput({
|
|
7
|
+
export default function OPHolderNameInput({ options = {}, placeholder = "", validationMessages = { required: "" }, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
|
|
8
8
|
const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
|
|
9
|
-
return (<FormField autoCapitalize="words" autoComplete="cc-name" autoCorrect={false} defaultStyling={defaultStyling}
|
|
9
|
+
return (<FormField autoCapitalize="words" autoComplete="cc-name" autoCorrect={false} defaultStyling={defaultStyling} icon={{ type: "material", name: "account" }} labelStyle={labelStyle} name="cardholderName" placeholder={placeholder || "Cardholder Name"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateCardholderName} validationMessages={validationMessages} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
10
10
|
}
|
|
11
11
|
//# sourceMappingURL=OPHolderNameInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPHolderNameInput.js","sourceRoot":"","sources":["../../src/components/OPHolderNameInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoBpC,SAAS,sBAAsB,CAC7B,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"OPHolderNameInput.js","sourceRoot":"","sources":["../../src/components/OPHolderNameInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAoBpC,SAAS,sBAAsB,CAC7B,KAAa,EACb,kBAAuD;IAEvD,IAAI,CAAC,KAAK;QACR,OAAO,kBAAkB,EAAE,QAAQ,IAAI,6BAA6B,CAAC;IAEvE,OAAO,SAAS,CAAC,CAAC,wBAAwB;AAC5C,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,kBAAkB,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,EACrC,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,GAAG,UAAU,EACI;IACjB,MAAM,EACJ,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,EAAE,EACnB,UAAU,GAAG,EAAE,EACf,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,GACpB,GAAG,OAAO,CAAC;IAEZ,OAAO,CACL,CAAC,SAAS,CACR,cAAc,CAAC,OAAO,CACtB,YAAY,CAAC,SAAS,CACtB,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAC5C,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,IAAI,CAAC,gBAAgB,CACrB,WAAW,CAAC,CAAC,WAAW,IAAI,iBAAiB,CAAC,CAC9C,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,sBAAsB,CAAC,CACjC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,IAAI,UAAU,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { StyleProp, ViewStyle, TextStyle } from \"react-native\";\n\nimport { FormField } from \"./forms\";\n\ntype CardInputOptions = {\n options?: {\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n inputStyle?: StyleProp<TextStyle>;\n labelStyle?: StyleProp<TextStyle>;\n textInputStyle?: StyleProp<TextStyle>;\n };\n placeholder?: string;\n validationMessages?: {\n required: string;\n };\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateCardholderName(\n value: string,\n validationMessages?: Record<string, string | undefined>,\n) {\n if (!value)\n return validationMessages?.required || \"Cardholder name is required\";\n\n return undefined; // valid cardholder name\n}\n\nexport default function OPHolderNameInput({\n options = {},\n placeholder = \"\",\n validationMessages = { required: \"\" },\n withAnimatedText = true,\n withIcon = true,\n withLabel = false,\n withPlaceholder = true,\n ...otherProps\n}: CardInputOptions) {\n const {\n defaultStyling = true,\n formFieldStyle = {},\n inputStyle = {},\n labelStyle = {},\n textInputStyle = {},\n } = options;\n\n return (\n <FormField\n autoCapitalize=\"words\"\n autoComplete=\"cc-name\"\n autoCorrect={false}\n defaultStyling={defaultStyling}\n icon={{ type: \"material\", name: \"account\" }}\n labelStyle={labelStyle}\n name=\"cardholderName\"\n placeholder={placeholder || \"Cardholder Name\"}\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateCardholderName}\n validationMessages={validationMessages}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
|
|
@@ -8,7 +8,6 @@ type StylingProps = {
|
|
|
8
8
|
type AppFormFieldProps = TextInputProps & {
|
|
9
9
|
customStyles?: StyleProp<ViewStyle>;
|
|
10
10
|
defaultStyling?: boolean;
|
|
11
|
-
errorMessages?: Record<string, string | undefined>;
|
|
12
11
|
icon?: {
|
|
13
12
|
type: "material";
|
|
14
13
|
name: keyof typeof MaterialCommunityIcons.glyphMap;
|
|
@@ -24,12 +23,13 @@ type AppFormFieldProps = TextInputProps & {
|
|
|
24
23
|
styling?: StylingProps;
|
|
25
24
|
labelStyle?: StyleProp<TextStyle>;
|
|
26
25
|
onValueChange?: (value: string) => void;
|
|
27
|
-
validate?: (value: string,
|
|
26
|
+
validate?: (value: string, validationMessages?: Record<string, string | undefined>) => string | undefined;
|
|
27
|
+
validationMessages?: Record<string, string | undefined>;
|
|
28
28
|
withAnimatedText: boolean;
|
|
29
29
|
withIcon: boolean;
|
|
30
30
|
withLabel?: boolean;
|
|
31
31
|
withPlaceholder?: boolean;
|
|
32
32
|
};
|
|
33
|
-
export default function AppFormField({ defaultStyling,
|
|
33
|
+
export default function AppFormField({ defaultStyling, name, labelStyle, placeholder, validate, validationMessages, withLabel, ...otherProps }: AppFormFieldProps): import("react").JSX.Element;
|
|
34
34
|
export {};
|
|
35
35
|
//# sourceMappingURL=FormField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAM1E,KAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,KAAK,iBAAiB,GAAG,cAAc,GAAG;IACxC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAM1E,KAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,KAAK,iBAAiB,GAAG,cAAc,GAAG;IACxC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EACD;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,MAAM,OAAO,sBAAsB,CAAC,QAAQ,CAAA;KAAE,GACxE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,OAAO,YAAY,CAAC,QAAQ,CAAA;KAAE,GACzD;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,KACpD,MAAM,GAAG,SAAS,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACxD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,cAAc,EACd,IAAI,EACJ,UAAe,EACf,WAAW,EACX,QAAQ,EACR,kBAAuB,EACvB,SAAiB,EACjB,GAAG,UAAU,EACd,EAAE,iBAAiB,+BAiEnB"}
|
|
@@ -2,7 +2,7 @@ import { StyleSheet, Text, } from "react-native";
|
|
|
2
2
|
import TextInput from "./TextInput";
|
|
3
3
|
import { formatCreditCardNumber, formatExp } from "../../utility/formatting";
|
|
4
4
|
import { useFormContext } from "../../context/FormContext";
|
|
5
|
-
export default function AppFormField({ defaultStyling,
|
|
5
|
+
export default function AppFormField({ defaultStyling, name, labelStyle = {}, placeholder, validate, validationMessages = {}, withLabel = false, ...otherProps }) {
|
|
6
6
|
const { errors, setFieldTouched, setFieldValue, setFieldError, touched, values, } = useFormContext();
|
|
7
7
|
const hasError = !!touched[name] && !!errors[name];
|
|
8
8
|
return (<>
|
|
@@ -12,14 +12,29 @@ export default function AppFormField({ defaultStyling, errorMessages = {}, name,
|
|
|
12
12
|
<TextInput defaultStyling={defaultStyling} onBlur={() => {
|
|
13
13
|
setFieldTouched(name);
|
|
14
14
|
if (validate) {
|
|
15
|
-
const errorMessage = validate(values[name],
|
|
15
|
+
const errorMessage = validate(values[name], validationMessages);
|
|
16
16
|
setFieldError(name, errorMessage);
|
|
17
17
|
}
|
|
18
18
|
}} onChangeText={(text) => {
|
|
19
19
|
if (name === "cardNumber")
|
|
20
20
|
text = formatCreditCardNumber(text);
|
|
21
|
-
if (name === "exp")
|
|
21
|
+
if (name === "exp") {
|
|
22
22
|
text = formatExp(text);
|
|
23
|
+
const month = text.slice(0, 2);
|
|
24
|
+
const year = text.slice(3);
|
|
25
|
+
if (month.length === 2) {
|
|
26
|
+
setFieldValue("expMonth", month);
|
|
27
|
+
setFieldError("expMonth", undefined);
|
|
28
|
+
}
|
|
29
|
+
if (year.length === 2) {
|
|
30
|
+
setFieldValue("expYear", year);
|
|
31
|
+
setFieldError("expYear", undefined);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
if (name === "expMonth" || name === "expYear") {
|
|
35
|
+
setFieldError("exp", undefined);
|
|
36
|
+
}
|
|
37
|
+
setFieldError(name, undefined);
|
|
23
38
|
setFieldValue(name, text);
|
|
24
39
|
if (otherProps.onValueChange) {
|
|
25
40
|
otherProps.onValueChange(text);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,IAAI,GAIL,MAAM,cAAc,CAAC;AAGtB,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AA+B3D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,cAAc,EACd,
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n StyleProp,\n StyleSheet,\n Text,\n TextInputProps,\n TextStyle,\n ViewStyle,\n} from \"react-native\";\nimport { FontAwesome6, MaterialCommunityIcons } from \"@expo/vector-icons\";\n\nimport TextInput from \"./TextInput\";\nimport { formatCreditCardNumber, formatExp } from \"../../utility/formatting\";\nimport { useFormContext } from \"../../context/FormContext\";\n\ntype StylingProps = {\n formFieldStyle?: StyleProp<ViewStyle>;\n inputStyle?: StyleProp<ViewStyle>;\n textInputStyle?: StyleProp<TextStyle>;\n};\n\ntype AppFormFieldProps = TextInputProps & {\n customStyles?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n icon?:\n | { type: \"material\"; name: keyof typeof MaterialCommunityIcons.glyphMap }\n | { type: \"fa6\"; name: keyof typeof FontAwesome6.glyphMap }\n | { type: \"png\"; name: \"amex\" | \"discover\" | \"mc\" | \"visa\" };\n name: string;\n placeholder?: string;\n styling?: StylingProps;\n labelStyle?: StyleProp<TextStyle>;\n onValueChange?: (value: string) => void;\n validate?: (\n value: string,\n validationMessages?: Record<string, string | undefined>,\n ) => string | undefined;\n validationMessages?: Record<string, string | undefined>;\n withAnimatedText: boolean;\n withIcon: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function AppFormField({\n defaultStyling,\n name,\n labelStyle = {},\n placeholder,\n validate,\n validationMessages = {},\n withLabel = false,\n ...otherProps\n}: AppFormFieldProps) {\n const {\n errors,\n setFieldTouched,\n setFieldValue,\n setFieldError,\n touched,\n values,\n } = useFormContext();\n const hasError: boolean = !!touched[name] && !!errors[name];\n\n return (\n <>\n {withLabel && (\n <Text style={defaultStyling ? [styles.label, labelStyle] : labelStyle}>\n {placeholder}\n </Text>\n )}\n <TextInput\n defaultStyling={defaultStyling}\n onBlur={() => {\n setFieldTouched(name);\n if (validate) {\n const errorMessage = validate(values[name], validationMessages);\n setFieldError(name, errorMessage);\n }\n }}\n onChangeText={(text) => {\n if (name === \"cardNumber\") text = formatCreditCardNumber(text);\n if (name === \"exp\") {\n text = formatExp(text);\n\n const month = text.slice(0, 2);\n const year = text.slice(3);\n\n if (month.length === 2) {\n setFieldValue(\"expMonth\", month);\n setFieldError(\"expMonth\", undefined);\n }\n\n if (year.length === 2) {\n setFieldValue(\"expYear\", year);\n setFieldError(\"expYear\", undefined);\n }\n }\n\n if (name === \"expMonth\" || name === \"expYear\") {\n setFieldError(\"exp\", undefined);\n }\n\n setFieldError(name, undefined);\n setFieldValue(name, text);\n\n if (otherProps.onValueChange) {\n otherProps.onValueChange(text);\n }\n }}\n hasError={hasError}\n errorText={errors[name]}\n placeholder={hasError ? errors[name] : placeholder}\n value={values[name]}\n {...otherProps}\n />\n </>\n );\n}\n\nconst styles = StyleSheet.create({\n label: { fontSize: 18, fontWeight: \"500\", marginTop: 12, paddingLeft: 6 },\n});\n"]}
|
|
@@ -13,11 +13,12 @@ interface FormContextType {
|
|
|
13
13
|
setFieldError: (field: string, error: string | undefined) => void;
|
|
14
14
|
}
|
|
15
15
|
export declare const useFormContext: () => FormContextType;
|
|
16
|
-
export default function FormProvider({ children, initialValues, onSubmit, }: {
|
|
16
|
+
export default function FormProvider({ children, initialValues, onSubmit, validationMessages, }: {
|
|
17
17
|
children: React.ReactNode;
|
|
18
18
|
initialValues?: FormValues;
|
|
19
19
|
onSubmit?: (token: string) => any;
|
|
20
20
|
onDeviceSessionId?: (id: string) => any;
|
|
21
|
+
validationMessages?: any;
|
|
21
22
|
}): import("react").JSX.Element;
|
|
22
23
|
export {};
|
|
23
24
|
//# sourceMappingURL=FormContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormContext.d.ts","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACtC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACrD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE3C,UAAU,eAAe;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,aAAkB,EAClB,QAAQ,
|
|
1
|
+
{"version":3,"file":"FormContext.d.ts","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACtC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AACrD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE3C,UAAU,eAAe;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,aAAkB,EAClB,QAAQ,EACR,kBAAuB,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;IACxC,kBAAkB,CAAC,EAAE,GAAG,CAAC;CAC1B,+BAqHA"}
|
|
@@ -9,18 +9,55 @@ export const useFormContext = () => {
|
|
|
9
9
|
}
|
|
10
10
|
return context;
|
|
11
11
|
};
|
|
12
|
-
export default function FormProvider({ children, initialValues = {}, onSubmit, }) {
|
|
12
|
+
export default function FormProvider({ children, initialValues = {}, onSubmit, validationMessages = {}, }) {
|
|
13
13
|
const [values, setValues] = useState(initialValues);
|
|
14
14
|
const [errors, setErrors] = useState({});
|
|
15
15
|
const [touched, setTouched] = useState({});
|
|
16
16
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
17
|
+
const isEmpty = (val) => val === undefined ||
|
|
18
|
+
val === null ||
|
|
19
|
+
(typeof val === "string" && val.trim() === "");
|
|
17
20
|
const handleSubmit = async () => {
|
|
18
21
|
try {
|
|
19
22
|
setIsSubmitting(true);
|
|
23
|
+
const newErrors = {};
|
|
24
|
+
// Required validations
|
|
25
|
+
if (isEmpty(values["cardholderName"]))
|
|
26
|
+
newErrors["cardholderName"] =
|
|
27
|
+
validationMessages?.cardholderInput?.required ||
|
|
28
|
+
"Cardholder name is required";
|
|
29
|
+
if (isEmpty(values["cardNumber"]))
|
|
30
|
+
newErrors["cardNumber"] =
|
|
31
|
+
validationMessages?.cardNumberInput?.required ||
|
|
32
|
+
"Card number is required";
|
|
33
|
+
if (isEmpty(values["cvc"]))
|
|
34
|
+
newErrors["cvc"] =
|
|
35
|
+
validationMessages?.cvv2Input?.required || "CVC is required";
|
|
20
36
|
if (values["exp"]) {
|
|
21
37
|
values["expMonth"] = values["exp"].slice(0, 2);
|
|
22
38
|
values["expYear"] = values["exp"].slice(3);
|
|
23
39
|
}
|
|
40
|
+
else {
|
|
41
|
+
newErrors["exp"] =
|
|
42
|
+
validationMessages?.expInput?.required || "Expiration is required";
|
|
43
|
+
}
|
|
44
|
+
if (isEmpty(values["expMonth"]))
|
|
45
|
+
newErrors["expMonth"] =
|
|
46
|
+
validationMessages?.expMonthInput?.required ||
|
|
47
|
+
"Expiration month is required";
|
|
48
|
+
if (isEmpty(values["expYear"]))
|
|
49
|
+
newErrors["expYear"] =
|
|
50
|
+
validationMessages?.expYearInput?.required ||
|
|
51
|
+
"Expiration year is required";
|
|
52
|
+
if (Object.keys(newErrors).length > 0) {
|
|
53
|
+
setErrors(newErrors);
|
|
54
|
+
const touchedFields = {};
|
|
55
|
+
Object.keys(newErrors).forEach((key) => {
|
|
56
|
+
touchedFields[key] = true;
|
|
57
|
+
});
|
|
58
|
+
setTouched((prev) => ({ ...prev, ...touchedFields }));
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
24
61
|
const token = await tokenizeCard(unformat(values["cardNumber"]), values["cardholderName"], values["expYear"], values["expMonth"], values["cvc"]);
|
|
25
62
|
if (onSubmit)
|
|
26
63
|
await onSubmit(token);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormContext.js","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAkBjD,MAAM,WAAW,GAAG,aAAa,CAA8B,SAAS,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,QAAQ,
|
|
1
|
+
{"version":3,"file":"FormContext.js","sourceRoot":"","sources":["../../src/context/FormContext.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useState } from \"react\";\n\nimport { tokenizeCard } from \"../ExpoOpenpayModule\";\nimport { unformat } from \"../utility/formatting\";\n\ntype FormValues = Record<string, any>;\ntype FormErrors = Record<string, string | undefined>;\ntype FormTouched = Record<string, boolean>;\n\ninterface FormContextType {\n errors: FormErrors;\n isSubmitting: boolean;\n touched: FormTouched;\n values: FormValues;\n handleSubmit: () => Promise<any>;\n resetForm: () => void;\n setFieldValue: (field: string, value: any) => void;\n setFieldTouched: (field: string, touched?: boolean) => void;\n setFieldError: (field: string, error: string | undefined) => void;\n}\n\nconst FormContext = createContext<FormContextType | undefined>(undefined);\n\nexport const useFormContext = () => {\n const context = useContext(FormContext);\n if (!context) {\n throw new Error(\"useFormContext must be used within a FormProvider\");\n }\n return context;\n};\n\nexport default function FormProvider({\n children,\n initialValues = {},\n onSubmit,\n validationMessages = {},\n}: {\n children: React.ReactNode;\n initialValues?: FormValues;\n onSubmit?: (token: string) => any;\n onDeviceSessionId?: (id: string) => any;\n validationMessages?: any;\n}) {\n const [values, setValues] = useState<FormValues>(initialValues);\n const [errors, setErrors] = useState<FormErrors>({});\n const [touched, setTouched] = useState<FormTouched>({});\n const [isSubmitting, setIsSubmitting] = useState<boolean>(false);\n\n const isEmpty = (val: any) =>\n val === undefined ||\n val === null ||\n (typeof val === \"string\" && val.trim() === \"\");\n\n const handleSubmit = async (): Promise<any> => {\n try {\n setIsSubmitting(true);\n\n const newErrors: FormErrors = {};\n\n // Required validations\n if (isEmpty(values[\"cardholderName\"]))\n newErrors[\"cardholderName\"] =\n validationMessages?.cardholderInput?.required ||\n \"Cardholder name is required\";\n\n if (isEmpty(values[\"cardNumber\"]))\n newErrors[\"cardNumber\"] =\n validationMessages?.cardNumberInput?.required ||\n \"Card number is required\";\n\n if (isEmpty(values[\"cvc\"]))\n newErrors[\"cvc\"] =\n validationMessages?.cvv2Input?.required || \"CVC is required\";\n\n if (values[\"exp\"]) {\n values[\"expMonth\"] = values[\"exp\"].slice(0, 2);\n values[\"expYear\"] = values[\"exp\"].slice(3);\n } else {\n newErrors[\"exp\"] =\n validationMessages?.expInput?.required || \"Expiration is required\";\n }\n\n if (isEmpty(values[\"expMonth\"]))\n newErrors[\"expMonth\"] =\n validationMessages?.expMonthInput?.required ||\n \"Expiration month is required\";\n\n if (isEmpty(values[\"expYear\"]))\n newErrors[\"expYear\"] =\n validationMessages?.expYearInput?.required ||\n \"Expiration year is required\";\n\n if (Object.keys(newErrors).length > 0) {\n setErrors(newErrors);\n\n const touchedFields: FormTouched = {};\n Object.keys(newErrors).forEach((key) => {\n touchedFields[key] = true;\n });\n\n setTouched((prev) => ({ ...prev, ...touchedFields }));\n\n return;\n }\n\n const token = await tokenizeCard(\n unformat(values[\"cardNumber\"]),\n values[\"cardholderName\"],\n values[\"expYear\"],\n values[\"expMonth\"],\n values[\"cvc\"],\n );\n\n if (onSubmit) await onSubmit(token);\n\n resetForm();\n } catch (e) {\n if (e instanceof Error) {\n console.error(\"Error during submission:\", e.message);\n } else {\n console.error(\"Unknown error during submission\", e);\n }\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const resetForm = () => {\n setValues({});\n setErrors({});\n setTouched({});\n };\n\n const setFieldValue = (field: string, value: any) =>\n setValues((prev) => ({ ...prev, [field]: value }));\n\n const setFieldTouched = (field: string, isTouched: boolean = true) =>\n setTouched((prev) => ({ ...prev, [field]: isTouched }));\n\n const setFieldError = (field: string, error: string | undefined) =>\n setErrors((prev) => ({ ...prev, [field]: error }));\n\n return (\n <FormContext.Provider\n value={{\n errors,\n isSubmitting,\n touched,\n values,\n handleSubmit,\n resetForm,\n setFieldValue,\n setFieldTouched,\n setFieldError,\n }}\n >\n {children}\n </FormContext.Provider>\n );\n}\n"]}
|