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
|
@@ -7,7 +7,31 @@ type CardFormProps = {
|
|
|
7
7
|
merchantId: string;
|
|
8
8
|
options?: {
|
|
9
9
|
buttonTitle?: string;
|
|
10
|
-
|
|
10
|
+
expIsMMYY?: boolean;
|
|
11
|
+
groupedView?: boolean;
|
|
12
|
+
onSubmit?: (token: string) => any;
|
|
13
|
+
styling?: {
|
|
14
|
+
buttonStyle?: StyleProp<ViewStyle>;
|
|
15
|
+
buttonTextStyle?: StyleProp<TextStyle>;
|
|
16
|
+
colorScheme?: "light" | "dark";
|
|
17
|
+
darkTheme?: FormThemeColors;
|
|
18
|
+
formFieldStyle?: StyleProp<ViewStyle>;
|
|
19
|
+
defaultStyling?: boolean;
|
|
20
|
+
formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
|
|
21
|
+
formScrollViewStyle?: StyleProp<ViewStyle>;
|
|
22
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
23
|
+
lightTheme?: FormThemeColors;
|
|
24
|
+
textInputStyle?: StyleProp<TextStyle>;
|
|
25
|
+
};
|
|
26
|
+
placeholders?: {
|
|
27
|
+
cardholderInput: string;
|
|
28
|
+
cardNumberInput: string;
|
|
29
|
+
cvv2Input: string;
|
|
30
|
+
expInput: string;
|
|
31
|
+
expMonthInput: string;
|
|
32
|
+
expYearInput: string;
|
|
33
|
+
};
|
|
34
|
+
validationMessages?: {
|
|
11
35
|
cardholderInput?: {
|
|
12
36
|
required: string;
|
|
13
37
|
};
|
|
@@ -27,36 +51,16 @@ type CardFormProps = {
|
|
|
27
51
|
required: string;
|
|
28
52
|
};
|
|
29
53
|
expMonthInput?: {
|
|
54
|
+
format: string;
|
|
55
|
+
invalid: string;
|
|
30
56
|
required: string;
|
|
31
57
|
};
|
|
32
58
|
expYearInput?: {
|
|
59
|
+
expired: string;
|
|
60
|
+
format: string;
|
|
33
61
|
required: string;
|
|
34
62
|
};
|
|
35
63
|
};
|
|
36
|
-
expIsMMYY?: boolean;
|
|
37
|
-
groupedView?: boolean;
|
|
38
|
-
onSubmit?: (token: string) => any;
|
|
39
|
-
styling?: {
|
|
40
|
-
buttonStyle?: StyleProp<ViewStyle>;
|
|
41
|
-
buttonTextStyle?: StyleProp<TextStyle>;
|
|
42
|
-
colorScheme?: "light" | "dark";
|
|
43
|
-
darkTheme?: FormThemeColors;
|
|
44
|
-
formFieldStyle?: StyleProp<ViewStyle>;
|
|
45
|
-
defaultStyling?: boolean;
|
|
46
|
-
formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
|
|
47
|
-
formScrollViewStyle?: StyleProp<ViewStyle>;
|
|
48
|
-
labelStyle?: StyleProp<TextStyle>;
|
|
49
|
-
lightTheme?: FormThemeColors;
|
|
50
|
-
textInputStyle?: StyleProp<TextStyle>;
|
|
51
|
-
};
|
|
52
|
-
placeholders?: {
|
|
53
|
-
cardholderInput: string;
|
|
54
|
-
cardNumberInput: string;
|
|
55
|
-
cvv2Input: string;
|
|
56
|
-
expInput: string;
|
|
57
|
-
expMonthInput: string;
|
|
58
|
-
expYearInput: string;
|
|
59
|
-
};
|
|
60
64
|
withAnimatedTexts?: boolean;
|
|
61
65
|
withIcons?: boolean;
|
|
62
66
|
withLabels?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardForm.d.ts","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAET,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,eAAe,EAAqB,MAAM,YAAY,CAAC;AAyB9E,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,
|
|
1
|
+
{"version":3,"file":"OPCardForm.d.ts","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,14 +5,14 @@ import { initialize } from "../ExpoOpenpayModule";
|
|
|
5
5
|
import { SubmitButton } from "./forms";
|
|
6
6
|
import { OPCardNumberInput, OPCvv2Input, OPExpInput, OPExpMonthInput, OPExpYearInput, OPHolderNameInput, } from ".";
|
|
7
7
|
export default function OPCardForm({ merchantId, apiKey, isProduction = false, countryCode = "MX", options = {}, }) {
|
|
8
|
-
const { buttonTitle,
|
|
8
|
+
const { buttonTitle, expIsMMYY = true, groupedView = true, onSubmit, styling = {}, placeholders = {
|
|
9
9
|
cardholderInput: "",
|
|
10
10
|
cardNumberInput: "",
|
|
11
11
|
cvv2Input: "",
|
|
12
12
|
expInput: "",
|
|
13
13
|
expMonthInput: "",
|
|
14
14
|
expYearInput: "",
|
|
15
|
-
}, withAnimatedTexts, withIcons, withLabels, withPlaceholders, } = options;
|
|
15
|
+
}, validationMessages, withAnimatedTexts, withIcons, withLabels, withPlaceholders, } = options;
|
|
16
16
|
const { buttonStyle = {}, buttonTextStyle = {}, colorScheme = "light", darkTheme, formFieldStyle = {}, defaultStyling = true, formKeyboardAvoidingViewStyle = {}, formScrollViewStyle = {}, labelStyle = {}, lightTheme, textInputStyle = {}, } = styling;
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
const initOP = async () => {
|
|
@@ -33,88 +33,88 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
|
|
|
33
33
|
exp: "",
|
|
34
34
|
expMonth: "",
|
|
35
35
|
expYear: "",
|
|
36
|
-
}} onSubmit={onSubmit}>
|
|
36
|
+
}} onSubmit={onSubmit} validationMessages={validationMessages}>
|
|
37
37
|
<KeyboardAvoidingView behavior="padding" enabled keyboardVerticalOffset={100} style={defaultStyling
|
|
38
38
|
? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]
|
|
39
39
|
: formKeyboardAvoidingViewStyle}>
|
|
40
40
|
<ScrollView showsVerticalScrollIndicator={false} style={defaultStyling
|
|
41
41
|
? [styles.formView, formScrollViewStyle]
|
|
42
42
|
: formScrollViewStyle}>
|
|
43
|
-
<OPHolderNameInput
|
|
43
|
+
<OPHolderNameInput options={{
|
|
44
44
|
formFieldStyle,
|
|
45
45
|
defaultStyling,
|
|
46
46
|
inputStyle: {},
|
|
47
47
|
labelStyle,
|
|
48
48
|
textInputStyle,
|
|
49
|
-
}} placeholder={placeholders.cardholderInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
50
|
-
<OPCardNumberInput
|
|
49
|
+
}} placeholder={placeholders.cardholderInput} validationMessages={validationMessages?.cardholderInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
50
|
+
<OPCardNumberInput options={{
|
|
51
51
|
formFieldStyle,
|
|
52
52
|
defaultStyling,
|
|
53
53
|
inputStyle: {},
|
|
54
54
|
labelStyle,
|
|
55
55
|
textInputStyle,
|
|
56
|
-
}} placeholder={placeholders.cardNumberInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
56
|
+
}} placeholder={placeholders.cardNumberInput} validationMessages={validationMessages?.cardNumberInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
57
57
|
{defaultStyling && groupedView ? (<View style={{ flexDirection: "row", gap: 12 }}>
|
|
58
|
-
{expIsMMYY ? (<OPExpInput
|
|
58
|
+
{expIsMMYY ? (<OPExpInput options={{
|
|
59
59
|
formFieldStyle: { flex: 1 },
|
|
60
60
|
defaultStyling,
|
|
61
61
|
inputStyle: {},
|
|
62
62
|
labelStyle,
|
|
63
63
|
textInputStyle,
|
|
64
|
-
}} placeholder={placeholders.expInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
|
|
65
|
-
<OPExpMonthInput
|
|
64
|
+
}} placeholder={placeholders.expInput} validationMessages={validationMessages?.expInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
|
|
65
|
+
<OPExpMonthInput options={{
|
|
66
66
|
formFieldStyle: { flex: 1 },
|
|
67
67
|
defaultStyling,
|
|
68
68
|
inputStyle: {},
|
|
69
69
|
labelStyle,
|
|
70
70
|
textInputStyle,
|
|
71
|
-
}} placeholder={placeholders.expMonthInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
72
|
-
<OPExpYearInput
|
|
71
|
+
}} placeholder={placeholders.expMonthInput} validationMessages={validationMessages?.expMonthInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
72
|
+
<OPExpYearInput options={{
|
|
73
73
|
formFieldStyle: { flex: 1 },
|
|
74
74
|
defaultStyling,
|
|
75
75
|
inputStyle: {},
|
|
76
76
|
labelStyle,
|
|
77
77
|
textInputStyle,
|
|
78
|
-
}} placeholder={placeholders.expYearInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
78
|
+
}} placeholder={placeholders.expYearInput} validationMessages={validationMessages?.expYearInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
79
79
|
</>)}
|
|
80
|
-
<OPCvv2Input
|
|
80
|
+
<OPCvv2Input options={{
|
|
81
81
|
formFieldStyle: { flex: 1 },
|
|
82
82
|
defaultStyling,
|
|
83
83
|
inputStyle: {},
|
|
84
84
|
labelStyle,
|
|
85
85
|
textInputStyle,
|
|
86
|
-
}} placeholder={placeholders.cvv2Input} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
86
|
+
}} placeholder={placeholders.cvv2Input} validationMessages={validationMessages?.cvv2Input} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
87
87
|
</View>) : (<>
|
|
88
|
-
{expIsMMYY ? (<OPExpInput
|
|
88
|
+
{expIsMMYY ? (<OPExpInput options={{
|
|
89
89
|
formFieldStyle,
|
|
90
90
|
defaultStyling,
|
|
91
91
|
inputStyle: {},
|
|
92
92
|
labelStyle,
|
|
93
93
|
textInputStyle,
|
|
94
|
-
}} placeholder={placeholders.expInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
|
|
95
|
-
<OPExpMonthInput
|
|
94
|
+
}} placeholder={placeholders.expInput} validationMessages={validationMessages?.expInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
|
|
95
|
+
<OPExpMonthInput options={{
|
|
96
96
|
formFieldStyle,
|
|
97
97
|
defaultStyling,
|
|
98
98
|
inputStyle: {},
|
|
99
99
|
labelStyle: {},
|
|
100
100
|
textInputStyle,
|
|
101
|
-
}} placeholder={placeholders.expMonthInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
102
|
-
<OPExpYearInput
|
|
101
|
+
}} placeholder={placeholders.expMonthInput} validationMessages={validationMessages?.expMonthInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
102
|
+
<OPExpYearInput options={{
|
|
103
103
|
formFieldStyle,
|
|
104
104
|
defaultStyling,
|
|
105
105
|
inputStyle: {},
|
|
106
106
|
labelStyle,
|
|
107
107
|
textInputStyle,
|
|
108
|
-
}} placeholder={placeholders.expYearInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
108
|
+
}} placeholder={placeholders.expYearInput} validationMessages={validationMessages?.expYearInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
109
109
|
</>)}
|
|
110
110
|
|
|
111
|
-
<OPCvv2Input
|
|
111
|
+
<OPCvv2Input options={{
|
|
112
112
|
formFieldStyle,
|
|
113
113
|
defaultStyling,
|
|
114
114
|
inputStyle: {},
|
|
115
115
|
labelStyle,
|
|
116
116
|
textInputStyle,
|
|
117
|
-
}} placeholder={placeholders.cvv2Input} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
117
|
+
}} placeholder={placeholders.cvv2Input} validationMessages={validationMessages?.cvv2Input} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
|
|
118
118
|
</>)}
|
|
119
119
|
<SubmitButton buttonStyle={buttonStyle} buttonTextStyle={buttonTextStyle} defaultStyling={defaultStyling} title={buttonTitle}/>
|
|
120
120
|
</ScrollView>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardForm.js","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,UAAU,EAEV,UAAU,EAEV,IAAI,GAEL,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAmB,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,eAAe,EACf,cAAc,EACd,iBAAiB,GAClB,MAAM,GAAG,CAAC;AA+EX,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,UAAU,EACV,MAAM,EACN,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,EAAE,GACE;IACd,MAAM,EACJ,WAAW,EACX,aAAa,EACb,SAAS,GAAG,IAAI,EAChB,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,YAAY,GAAG;QACb,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,EAAE;QACnB,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,aAAa,EAAE,EAAE;QACjB,YAAY,EAAE,EAAE;KACjB,EACD,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,gBAAgB,GACjB,GAAG,OAAO,CAAC;IAEZ,MAAM,EACJ,WAAW,GAAG,EAAE,EAChB,eAAe,GAAG,EAAE,EACpB,WAAW,GAAG,OAAO,EACrB,SAAS,EACT,cAAc,GAAG,EAAE,EACnB,cAAc,GAAG,IAAI,EACrB,6BAA6B,GAAG,EAAE,EAClC,mBAAmB,GAAG,EAAE,EACxB,UAAU,GAAG,EAAE,EACf,UAAU,EACV,cAAc,GAAG,EAAE,GACpB,GAAG,OAAO,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE;YACxB,IAAI,CAAC;gBACH,MAAM,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC;YAClE,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QACF,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,iBAAiB,CAChB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,CAAC,CAAC,SAAS,CAAC,CAChB,KAAK,CAAC,CAAC,UAAU,CAAC,CAElB;MAAA,CAAC,YAAY,CACX,aAAa,CAAC,CAAC;YACb,cAAc,EAAE,EAAE;YAClB,UAAU,EAAE,EAAE;YACd,GAAG,EAAE,EAAE;YACP,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;SACZ,CAAC,CACF,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;QAAA,CAAC,oBAAoB,CACnB,QAAQ,CAAC,SAAS,CAClB,OAAO,CACP,sBAAsB,CAAC,CAAC,GAAG,CAAC,CAC5B,KAAK,CAAC,CACJ,cAAc;YACZ,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,EAAE,6BAA6B,CAAC;YAC9D,CAAC,CAAC,6BACN,CAAC,CAED;UAAA,CAAC,UAAU,CACT,4BAA4B,CAAC,CAAC,KAAK,CAAC,CACpC,KAAK,CAAC,CACJ,cAAc;YACZ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAmB,CAAC;YACxC,CAAC,CAAC,mBACN,CAAC,CAED;YAAA,CAAC,iBAAiB,CAChB,aAAa,CAAC,CAAC,aAAa,EAAE,eAAe,CAAC,CAC9C,OAAO,CAAC,CAAC;YACP,cAAc;YACd,cAAc;YACd,UAAU,EAAE,EAAE;YACd,UAAU;YACV,cAAc;SACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAC1C,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEpC;YAAA,CAAC,iBAAiB,CAChB,aAAa,CAAC,CAAC,aAAa,EAAE,eAAe,CAAC,CAC9C,OAAO,CAAC,CAAC;YACP,cAAc;YACd,cAAc;YACd,UAAU,EAAE,EAAE;YACd,UAAU;YACV,cAAc;SACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAC1C,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEpC;YAAA,CAAC,cAAc,IAAI,WAAW,CAAC,CAAC,CAAC,CAC/B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAC7C;gBAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,UAAU,CACT,aAAa,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,CACvC,OAAO,CAAC,CAAC;oBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;oBAC3B,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CACnC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAClC,CACH,CAAC,CAAC,CAAC,CACF,EACE;oBAAA,CAAC,eAAe,CACd,aAAa,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5C,OAAO,CAAC,CAAC;oBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;oBAC3B,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CACxC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEpC;oBAAA,CAAC,cAAc,CACb,aAAa,CAAC,CAAC,aAAa,EAAE,YAAY,CAAC,CAC3C,OAAO,CAAC,CAAC;oBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;oBAC3B,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CACvC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEtC;kBAAA,GAAG,CACJ,CACD;gBAAA,CAAC,WAAW,CACV,aAAa,CAAC,CAAC,aAAa,EAAE,SAAS,CAAC,CACxC,OAAO,CAAC,CAAC;gBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;gBAC3B,cAAc;gBACd,UAAU,EAAE,EAAE;gBACd,UAAU;gBACV,cAAc;aACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CACpC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEtC;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,EACE;gBAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,UAAU,CACT,aAAa,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,CACvC,OAAO,CAAC,CAAC;oBACP,cAAc;oBACd,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CACnC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAClC,CACH,CAAC,CAAC,CAAC,CACF,EACE;oBAAA,CAAC,eAAe,CACd,aAAa,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5C,OAAO,CAAC,CAAC;oBACP,cAAc;oBACd,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU,EAAE,EAAE;oBACd,cAAc;iBACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CACxC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEpC;oBAAA,CAAC,cAAc,CACb,aAAa,CAAC,CAAC,aAAa,EAAE,YAAY,CAAC,CAC3C,OAAO,CAAC,CAAC;oBACP,cAAc;oBACd,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CACvC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEtC;kBAAA,GAAG,CACJ,CAED;;gBAAA,CAAC,WAAW,CACV,aAAa,CAAC,CAAC,aAAa,EAAE,SAAS,CAAC,CACxC,OAAO,CAAC,CAAC;gBACP,cAAc;gBACd,cAAc;gBACd,UAAU,EAAE,EAAE;gBACd,UAAU;gBACV,cAAc;aACf,CAAC,CACF,WAAW,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CACpC,gBAAgB,CAAC,CAAC,iBAAiB,CAAC,CACpC,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,SAAS,CAAC,CAAC,UAAU,CAAC,CACtB,eAAe,CAAC,CAAC,gBAAgB,CAAC,EAEtC;cAAA,GAAG,CACJ,CACD;YAAA,CAAC,YAAY,CACX,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CAAC,WAAW,CAAC,EAEvB;UAAA,EAAE,UAAU,CACd;QAAA,EAAE,oBAAoB,CACxB;MAAA,EAAE,YAAY,CAChB;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM;QACd,gBAAgB,EAAE,EAAE;KACrB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC","sourcesContent":["import { useEffect } from \"react\";\nimport {\n KeyboardAvoidingView,\n ScrollView,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\n\nimport { FormProvider, FormThemeColors, FormThemeProvider } from \"../context\";\nimport { initialize } from \"../ExpoOpenpayModule\";\nimport { SubmitButton } from \"./forms\";\nimport {\n OPCardNumberInput,\n OPCvv2Input,\n OPExpInput,\n OPExpMonthInput,\n OPExpYearInput,\n OPHolderNameInput,\n} from \".\";\n\n// type ThemeColors = {\n// background: string;\n// text: string;\n// error: string;\n// primary: string;\n// placeholder: string;\n// };\n\n// type ThemeProp = {\n// light: Partial<ThemeColors>;\n// dark: Partial<ThemeColors>;\n// };\n\ntype CardFormProps = {\n apiKey: string;\n countryCode?: \"MX\" | \"CO\" | \"PE\";\n isProduction: boolean;\n merchantId: string;\n options?: {\n buttonTitle?: string;\n errorMessages?: {\n cardholderInput?: {\n required: string;\n };\n cardNumberInput?: {\n cardNumberLength: string;\n invalid: string;\n required: string;\n };\n cvv2Input?: {\n invalid: string;\n required: string;\n };\n expInput?: {\n expired: string;\n format: string;\n invalidMonth: string;\n required: string;\n };\n expMonthInput?: {\n required: string;\n };\n expYearInput?: {\n required: string;\n };\n };\n expIsMMYY?: boolean;\n groupedView?: boolean;\n onSubmit?: (token: string) => any;\n styling?: {\n buttonStyle?: StyleProp<ViewStyle>;\n buttonTextStyle?: StyleProp<TextStyle>;\n colorScheme?: \"light\" | \"dark\";\n darkTheme?: FormThemeColors;\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;\n formScrollViewStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n lightTheme?: FormThemeColors;\n textInputStyle?: StyleProp<TextStyle>;\n };\n placeholders?: {\n cardholderInput: string;\n cardNumberInput: string;\n cvv2Input: string;\n expInput: string;\n expMonthInput: string;\n expYearInput: string;\n };\n withAnimatedTexts?: boolean;\n withIcons?: boolean;\n withLabels?: boolean;\n withPlaceholders?: boolean;\n };\n};\n\nexport default function OPCardForm({\n merchantId,\n apiKey,\n isProduction = false,\n countryCode = \"MX\",\n options = {},\n}: CardFormProps) {\n const {\n buttonTitle,\n errorMessages,\n expIsMMYY = true,\n groupedView = true,\n onSubmit,\n styling = {},\n placeholders = {\n cardholderInput: \"\",\n cardNumberInput: \"\",\n cvv2Input: \"\",\n expInput: \"\",\n expMonthInput: \"\",\n expYearInput: \"\",\n },\n withAnimatedTexts,\n withIcons,\n withLabels,\n withPlaceholders,\n } = options;\n\n const {\n buttonStyle = {},\n buttonTextStyle = {},\n colorScheme = \"light\",\n darkTheme,\n formFieldStyle = {},\n defaultStyling = true,\n formKeyboardAvoidingViewStyle = {},\n formScrollViewStyle = {},\n labelStyle = {},\n lightTheme,\n textInputStyle = {},\n } = styling;\n\n useEffect(() => {\n const initOP = async () => {\n try {\n await initialize(merchantId, apiKey, isProduction, countryCode);\n } catch (e) {\n console.error(e);\n }\n };\n initOP();\n }, []);\n\n return (\n <FormThemeProvider\n colorScheme={colorScheme}\n dark={darkTheme}\n light={lightTheme}\n >\n <FormProvider\n initialValues={{\n cardholderName: \"\",\n cardNumber: \"\",\n cvc: \"\",\n exp: \"\",\n expMonth: \"\",\n expYear: \"\",\n }}\n onSubmit={onSubmit}\n >\n <KeyboardAvoidingView\n behavior=\"padding\"\n enabled\n keyboardVerticalOffset={100}\n style={\n defaultStyling\n ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]\n : formKeyboardAvoidingViewStyle\n }\n >\n <ScrollView\n showsVerticalScrollIndicator={false}\n style={\n defaultStyling\n ? [styles.formView, formScrollViewStyle]\n : formScrollViewStyle\n }\n >\n <OPHolderNameInput\n errorMessages={errorMessages?.cardholderInput}\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cardholderInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPCardNumberInput\n errorMessages={errorMessages?.cardNumberInput}\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cardNumberInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n {defaultStyling && groupedView ? (\n <View style={{ flexDirection: \"row\", gap: 12 }}>\n {expIsMMYY ? (\n <OPExpInput\n errorMessages={errorMessages?.expInput}\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n errorMessages={errorMessages?.expMonthInput}\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expMonthInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n errorMessages={errorMessages?.expYearInput}\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expYearInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <OPCvv2Input\n errorMessages={errorMessages?.cvv2Input}\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cvv2Input}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </View>\n ) : (\n <>\n {expIsMMYY ? (\n <OPExpInput\n errorMessages={errorMessages?.expInput}\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n errorMessages={errorMessages?.expMonthInput}\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle: {},\n textInputStyle,\n }}\n placeholder={placeholders.expMonthInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n errorMessages={errorMessages?.expYearInput}\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expYearInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n\n <OPCvv2Input\n errorMessages={errorMessages?.cvv2Input}\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cvv2Input}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <SubmitButton\n buttonStyle={buttonStyle}\n buttonTextStyle={buttonTextStyle}\n defaultStyling={defaultStyling}\n title={buttonTitle}\n />\n </ScrollView>\n </KeyboardAvoidingView>\n </FormProvider>\n </FormThemeProvider>\n );\n}\n\nconst styles = StyleSheet.create({\n formView: {\n height: \"100%\",\n marginHorizontal: 12,\n },\n keyboardAvoidingView: {\n flex: 1,\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"OPCardForm.js","sourceRoot":"","sources":["../../src/components/OPCardForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\nimport {\n KeyboardAvoidingView,\n ScrollView,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\n\nimport { FormProvider, FormThemeColors, FormThemeProvider } from \"../context\";\nimport { initialize } from \"../ExpoOpenpayModule\";\nimport { SubmitButton } from \"./forms\";\nimport {\n OPCardNumberInput,\n OPCvv2Input,\n OPExpInput,\n OPExpMonthInput,\n OPExpYearInput,\n OPHolderNameInput,\n} from \".\";\n\n// type ThemeColors = {\n// background: string;\n// text: string;\n// error: string;\n// primary: string;\n// placeholder: string;\n// };\n\n// type ThemeProp = {\n// light: Partial<ThemeColors>;\n// dark: Partial<ThemeColors>;\n// };\n\ntype CardFormProps = {\n apiKey: string;\n countryCode?: \"MX\" | \"CO\" | \"PE\";\n isProduction: boolean;\n merchantId: string;\n options?: {\n buttonTitle?: string;\n expIsMMYY?: boolean;\n groupedView?: boolean;\n onSubmit?: (token: string) => any;\n styling?: {\n buttonStyle?: StyleProp<ViewStyle>;\n buttonTextStyle?: StyleProp<TextStyle>;\n colorScheme?: \"light\" | \"dark\";\n darkTheme?: FormThemeColors;\n formFieldStyle?: StyleProp<ViewStyle>;\n defaultStyling?: boolean;\n formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;\n formScrollViewStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n lightTheme?: FormThemeColors;\n textInputStyle?: StyleProp<TextStyle>;\n };\n placeholders?: {\n cardholderInput: string;\n cardNumberInput: string;\n cvv2Input: string;\n expInput: string;\n expMonthInput: string;\n expYearInput: string;\n };\n validationMessages?: {\n cardholderInput?: {\n required: string;\n };\n cardNumberInput?: {\n cardNumberLength: string;\n invalid: string;\n required: string;\n };\n cvv2Input?: {\n invalid: string;\n required: string;\n };\n expInput?: {\n expired: string;\n format: string;\n invalidMonth: string;\n required: string;\n };\n expMonthInput?: {\n format: string;\n invalid: string;\n required: string;\n };\n expYearInput?: {\n expired: string;\n format: string;\n required: string;\n };\n };\n withAnimatedTexts?: boolean;\n withIcons?: boolean;\n withLabels?: boolean;\n withPlaceholders?: boolean;\n };\n};\n\nexport default function OPCardForm({\n merchantId,\n apiKey,\n isProduction = false,\n countryCode = \"MX\",\n options = {},\n}: CardFormProps) {\n const {\n buttonTitle,\n expIsMMYY = true,\n groupedView = true,\n onSubmit,\n styling = {},\n placeholders = {\n cardholderInput: \"\",\n cardNumberInput: \"\",\n cvv2Input: \"\",\n expInput: \"\",\n expMonthInput: \"\",\n expYearInput: \"\",\n },\n validationMessages,\n withAnimatedTexts,\n withIcons,\n withLabels,\n withPlaceholders,\n } = options;\n\n const {\n buttonStyle = {},\n buttonTextStyle = {},\n colorScheme = \"light\",\n darkTheme,\n formFieldStyle = {},\n defaultStyling = true,\n formKeyboardAvoidingViewStyle = {},\n formScrollViewStyle = {},\n labelStyle = {},\n lightTheme,\n textInputStyle = {},\n } = styling;\n\n useEffect(() => {\n const initOP = async () => {\n try {\n await initialize(merchantId, apiKey, isProduction, countryCode);\n } catch (e) {\n console.error(e);\n }\n };\n initOP();\n }, []);\n\n return (\n <FormThemeProvider\n colorScheme={colorScheme}\n dark={darkTheme}\n light={lightTheme}\n >\n <FormProvider\n initialValues={{\n cardholderName: \"\",\n cardNumber: \"\",\n cvc: \"\",\n exp: \"\",\n expMonth: \"\",\n expYear: \"\",\n }}\n onSubmit={onSubmit}\n validationMessages={validationMessages}\n >\n <KeyboardAvoidingView\n behavior=\"padding\"\n enabled\n keyboardVerticalOffset={100}\n style={\n defaultStyling\n ? [styles.keyboardAvoidingView, formKeyboardAvoidingViewStyle]\n : formKeyboardAvoidingViewStyle\n }\n >\n <ScrollView\n showsVerticalScrollIndicator={false}\n style={\n defaultStyling\n ? [styles.formView, formScrollViewStyle]\n : formScrollViewStyle\n }\n >\n <OPHolderNameInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cardholderInput}\n validationMessages={validationMessages?.cardholderInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPCardNumberInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cardNumberInput}\n validationMessages={validationMessages?.cardNumberInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n {defaultStyling && groupedView ? (\n <View style={{ flexDirection: \"row\", gap: 12 }}>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expInput}\n validationMessages={validationMessages?.expInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expMonthInput}\n validationMessages={validationMessages?.expMonthInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expYearInput}\n validationMessages={validationMessages?.expYearInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <OPCvv2Input\n options={{\n formFieldStyle: { flex: 1 },\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cvv2Input}\n validationMessages={validationMessages?.cvv2Input}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </View>\n ) : (\n <>\n {expIsMMYY ? (\n <OPExpInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expInput}\n validationMessages={validationMessages?.expInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n ) : (\n <>\n <OPExpMonthInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle: {},\n textInputStyle,\n }}\n placeholder={placeholders.expMonthInput}\n validationMessages={validationMessages?.expMonthInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n <OPExpYearInput\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.expYearInput}\n validationMessages={validationMessages?.expYearInput}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n\n <OPCvv2Input\n options={{\n formFieldStyle,\n defaultStyling,\n inputStyle: {},\n labelStyle,\n textInputStyle,\n }}\n placeholder={placeholders.cvv2Input}\n validationMessages={validationMessages?.cvv2Input}\n withAnimatedText={withAnimatedTexts}\n withIcon={withIcons}\n withLabel={withLabels}\n withPlaceholder={withPlaceholders}\n />\n </>\n )}\n <SubmitButton\n buttonStyle={buttonStyle}\n buttonTextStyle={buttonTextStyle}\n defaultStyling={defaultStyling}\n title={buttonTitle}\n />\n </ScrollView>\n </KeyboardAvoidingView>\n </FormProvider>\n </FormThemeProvider>\n );\n}\n\nconst styles = StyleSheet.create({\n formView: {\n height: \"100%\",\n marginHorizontal: 12,\n },\n keyboardAvoidingView: {\n flex: 1,\n },\n});\n"]}
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
2
2
|
type CardInputOptions = {
|
|
3
|
-
errorMessages?: {
|
|
4
|
-
cardNumberLength?: 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
|
+
cardNumberLength?: 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 OPCardNumberInput({
|
|
21
|
+
export default function OPCardNumberInput({ options, placeholder, validationMessages, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
|
|
22
22
|
export {};
|
|
23
23
|
//# sourceMappingURL=OPCardNumberInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardNumberInput.d.ts","sourceRoot":"","sources":["../../src/components/OPCardNumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiB/D,KAAK,gBAAgB,GAAG;IACtB,
|
|
1
|
+
{"version":3,"file":"OPCardNumberInput.d.ts","sourceRoot":"","sources":["../../src/components/OPCardNumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiB/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,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,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;AA2DF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAY,EACZ,WAAgB,EAChB,kBAAwE,EACxE,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BAoClB"}
|
|
@@ -27,12 +27,12 @@ function detectCardBrand(cardNumber) {
|
|
|
27
27
|
return null;
|
|
28
28
|
}
|
|
29
29
|
// Luhn algorithm validator
|
|
30
|
-
function validateCardNumber(value,
|
|
30
|
+
function validateCardNumber(value, validationMessages) {
|
|
31
31
|
if (!value)
|
|
32
|
-
return
|
|
32
|
+
return validationMessages?.required || "Card Number is required";
|
|
33
33
|
const sanitized = value.replace(/\s+/g, "");
|
|
34
34
|
if (sanitized.length < 13 || sanitized.length > 19) {
|
|
35
|
-
return (
|
|
35
|
+
return (validationMessages?.cardNumberLength || "Card Number must be 13-19 digits");
|
|
36
36
|
}
|
|
37
37
|
let sum = 0;
|
|
38
38
|
let shouldDouble = false;
|
|
@@ -47,14 +47,14 @@ function validateCardNumber(value, errorMessages) {
|
|
|
47
47
|
shouldDouble = !shouldDouble;
|
|
48
48
|
}
|
|
49
49
|
if (sum % 10 !== 0)
|
|
50
|
-
return
|
|
50
|
+
return validationMessages?.invalid || "Invalid card number";
|
|
51
51
|
return undefined; // valid card
|
|
52
52
|
}
|
|
53
|
-
export default function OPCardNumberInput({
|
|
53
|
+
export default function OPCardNumberInput({ options = {}, placeholder = "", validationMessages = { cardNumberLength: "", invalid: "", required: "" }, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
|
|
54
54
|
const [cardType, setCardType] = useState(null);
|
|
55
55
|
const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
|
|
56
|
-
return (<FormField autoCapitalize="none" autoComplete="cc-number" autoCorrect={false} defaultStyling={defaultStyling}
|
|
56
|
+
return (<FormField autoCapitalize="none" autoComplete="cc-number" autoCorrect={false} defaultStyling={defaultStyling} icon={getCardBrandIcon(cardType)} keyboardType="number-pad" labelStyle={labelStyle} maxLength={19} name="cardNumber" onValueChange={(text) => {
|
|
57
57
|
setCardType(detectCardBrand(text));
|
|
58
|
-
}} placeholder={placeholder || "Card Number"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateCardNumber} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
58
|
+
}} placeholder={placeholder || "Card Number"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateCardNumber} validationMessages={validationMessages} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
59
59
|
}
|
|
60
60
|
//# sourceMappingURL=OPCardNumberInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCardNumberInput.js","sourceRoot":"","sources":["../../src/components/OPCardNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmCpC,SAAS,gBAAgB,CAAC,QAAuB;IAC/C,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QACvC,KAAK,YAAY;YACf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACrC,KAAK,MAAM;YACT,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QACvC,KAAK,UAAU;YACb,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;QAC3C;YACE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;IACrD,CAAC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,UAAkB;IACzC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAEjD,IAAI,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;QAAE,OAAO,MAAM,CAAC;IACjD,IAAI,2BAA2B,CAAC,IAAI,CAAC,SAAS,CAAC;QAAE,OAAO,YAAY,CAAC;IACrE,IAAI,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QAAE,OAAO,MAAM,CAAC;IACrD,IAAI,2BAA2B,CAAC,IAAI,CAAC,SAAS,CAAC;QAAE,OAAO,UAAU,CAAC;IAEnE,OAAO,IAAI,CAAC;AACd,CAAC;AAED,2BAA2B;AAC3B,SAAS,kBAAkB,CACzB,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"OPCardNumberInput.js","sourceRoot":"","sources":["../../src/components/OPCardNumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { StyleProp, TextStyle, ViewStyle } from \"react-native\";\n\nimport { FormField } from \"./forms\";\n\ntype IconType =\n | {\n type: \"fa6\";\n name:\n | \"cc-visa\"\n | \"cc-mastercard\"\n | \"cc-amex\"\n | \"cc-discover\"\n | \"credit-card\";\n }\n | { type: \"material\"; name: \"credit-card\" }\n | { type: \"png\"; name: \"amex\" | \"discover\" | \"mc\" | \"visa\" };\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 cardNumberLength?: string;\n invalid?: string;\n required?: string;\n };\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction getCardBrandIcon(cardType: string | null): IconType {\n switch (cardType) {\n case \"visa\":\n return { type: \"png\", name: \"visa\" };\n case \"mastercard\":\n return { type: \"png\", name: \"mc\" };\n case \"amex\":\n return { type: \"png\", name: \"amex\" };\n case \"discover\":\n return { type: \"png\", name: \"discover\" };\n default:\n return { type: \"material\", name: \"credit-card\" };\n }\n}\n\nfunction detectCardBrand(cardNumber: string): string | null {\n const sanitized = cardNumber.replace(/\\s+/g, \"\");\n\n if (/^4\\d{0,15}$/.test(sanitized)) return \"visa\";\n if (/^(5[1-5]|2[2-7])\\d{0,14}$/.test(sanitized)) return \"mastercard\";\n if (/^3[47]\\d{0,13}$/.test(sanitized)) return \"amex\";\n if (/^6(?:011|5\\d{2})\\d{0,12}$/.test(sanitized)) return \"discover\";\n\n return null;\n}\n\n// Luhn algorithm validator\nfunction validateCardNumber(\n value: string,\n validationMessages?: Record<string, string | undefined>,\n) {\n if (!value) return validationMessages?.required || \"Card Number is required\";\n\n const sanitized = value.replace(/\\s+/g, \"\");\n if (sanitized.length < 13 || sanitized.length > 19) {\n return (\n validationMessages?.cardNumberLength || \"Card Number must be 13-19 digits\"\n );\n }\n\n let sum = 0;\n let shouldDouble = false;\n for (let i = sanitized.length - 1; i >= 0; i--) {\n let digit = parseInt(sanitized[i], 10);\n if (shouldDouble) {\n digit *= 2;\n if (digit > 9) digit -= 9;\n }\n sum += digit;\n shouldDouble = !shouldDouble;\n }\n if (sum % 10 !== 0)\n return validationMessages?.invalid || \"Invalid card number\";\n\n return undefined; // valid card\n}\n\nexport default function OPCardNumberInput({\n options = {},\n placeholder = \"\",\n validationMessages = { cardNumberLength: \"\", invalid: \"\", required: \"\" },\n withAnimatedText = true,\n withIcon = true,\n withLabel = false,\n withPlaceholder = true,\n ...otherProps\n}: CardInputOptions) {\n const [cardType, setCardType] = useState<string | null>(null);\n\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-number\"\n autoCorrect={false}\n defaultStyling={defaultStyling}\n icon={getCardBrandIcon(cardType)}\n keyboardType=\"number-pad\"\n labelStyle={labelStyle}\n maxLength={19}\n name=\"cardNumber\"\n onValueChange={(text) => {\n setCardType(detectCardBrand(text));\n }}\n placeholder={placeholder || \"Card Number\"}\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateCardNumber}\n validationMessages={validationMessages}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
type CardInputOptions = {
|
|
3
|
-
errorMessages?: {
|
|
4
|
-
invalid?: string;
|
|
5
|
-
required?: string;
|
|
6
|
-
};
|
|
7
3
|
options?: {
|
|
8
4
|
formFieldStyle?: StyleProp<ViewStyle>;
|
|
9
5
|
defaultStyling?: boolean;
|
|
@@ -12,11 +8,15 @@ type CardInputOptions = {
|
|
|
12
8
|
textInputStyle?: StyleProp<TextStyle>;
|
|
13
9
|
};
|
|
14
10
|
placeholder?: string;
|
|
11
|
+
validationMessages?: {
|
|
12
|
+
invalid?: string;
|
|
13
|
+
required?: string;
|
|
14
|
+
};
|
|
15
15
|
withAnimatedText?: boolean;
|
|
16
16
|
withIcon?: boolean;
|
|
17
17
|
withLabel?: boolean;
|
|
18
18
|
withPlaceholder?: boolean;
|
|
19
19
|
};
|
|
20
|
-
export default function OPExpYearInput({
|
|
20
|
+
export default function OPExpYearInput({ options, placeholder, validationMessages, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
|
|
21
21
|
export {};
|
|
22
22
|
//# sourceMappingURL=OPCvv2Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCvv2Input.d.ts","sourceRoot":"","sources":["../../src/components/OPCvv2Input.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":"OPCvv2Input.d.ts","sourceRoot":"","sources":["../../src/components/OPCvv2Input.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,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,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,cAAc,CAAC,EACrC,OAAY,EACZ,WAAgB,EAChB,kBAAkD,EAClD,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA+BlB"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FormField } from "./forms";
|
|
2
|
-
function validateCvv(value,
|
|
2
|
+
function validateCvv(value, validationMessages) {
|
|
3
3
|
if (!value)
|
|
4
|
-
return
|
|
4
|
+
return validationMessages?.required || "CVV is required";
|
|
5
5
|
if (!/^\d{3,4}$/.test(value))
|
|
6
|
-
return
|
|
6
|
+
return validationMessages?.invalid || "Invalid CVV";
|
|
7
7
|
return undefined;
|
|
8
8
|
}
|
|
9
|
-
export default function OPExpYearInput({
|
|
9
|
+
export default function OPExpYearInput({ options = {}, placeholder = "", validationMessages = { invalid: "", required: "" }, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
|
|
10
10
|
const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
|
|
11
|
-
return (<FormField autoCapitalize="none" autoComplete="cc-csc" autoCorrect={false} defaultStyling={defaultStyling}
|
|
11
|
+
return (<FormField autoCapitalize="none" autoComplete="cc-csc" autoCorrect={false} defaultStyling={defaultStyling} icon={{ type: "material", name: "lock" }} keyboardType="number-pad" labelStyle={labelStyle} maxLength={4} name="cvc" placeholder={placeholder || "CVC"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateCvv} validationMessages={validationMessages} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
12
12
|
}
|
|
13
13
|
//# sourceMappingURL=OPCvv2Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPCvv2Input.js","sourceRoot":"","sources":["../../src/components/OPCvv2Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqBpC,SAAS,WAAW,CAClB,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"OPCvv2Input.js","sourceRoot":"","sources":["../../src/components/OPCvv2Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqBpC,SAAS,WAAW,CAClB,KAAa,EACb,kBAAuD;IAEvD,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,QAAQ,IAAI,iBAAiB,CAAC;IACrE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;QAC1B,OAAO,kBAAkB,EAAE,OAAO,IAAI,aAAa,CAAC;IACtD,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,QAAQ,EAAE,EAAE,EAAE,EAClD,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,QAAQ,CACrB,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CACzC,YAAY,CAAC,YAAY,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,CAAC,CAAC,CACb,IAAI,CAAC,KAAK,CACV,WAAW,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAClC,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,WAAW,CAAC,CACtB,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 invalid?: string;\n required?: string;\n };\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateCvv(\n value: string,\n validationMessages?: Record<string, string | undefined>,\n) {\n if (!value) return validationMessages?.required || \"CVV is required\";\n if (!/^\\d{3,4}$/.test(value))\n return validationMessages?.invalid || \"Invalid CVV\";\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\n placeholder = \"\",\n validationMessages = { 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-csc\"\n autoCorrect={false}\n defaultStyling={defaultStyling}\n icon={{ type: \"material\", name: \"lock\" }}\n keyboardType=\"number-pad\"\n labelStyle={labelStyle}\n maxLength={4}\n name=\"cvc\"\n placeholder={placeholder || \"CVC\"}\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateCvv}\n validationMessages={validationMessages}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
2
2
|
type CardInputOptions = {
|
|
3
|
-
errorMessages?: {
|
|
4
|
-
expired?: string;
|
|
5
|
-
format?: string;
|
|
6
|
-
invalidMonth?: string;
|
|
7
|
-
required?: string;
|
|
8
|
-
};
|
|
9
3
|
options?: {
|
|
10
4
|
formFieldStyle?: StyleProp<ViewStyle>;
|
|
11
5
|
defaultStyling?: boolean;
|
|
@@ -14,11 +8,17 @@ type CardInputOptions = {
|
|
|
14
8
|
textInputStyle?: StyleProp<TextStyle>;
|
|
15
9
|
};
|
|
16
10
|
placeholder?: string;
|
|
11
|
+
validationMessages?: {
|
|
12
|
+
expired?: string;
|
|
13
|
+
format?: string;
|
|
14
|
+
invalidMonth?: string;
|
|
15
|
+
required?: string;
|
|
16
|
+
};
|
|
17
17
|
withAnimatedText?: boolean;
|
|
18
18
|
withIcon?: boolean;
|
|
19
19
|
withLabel?: boolean;
|
|
20
20
|
withPlaceholder?: boolean;
|
|
21
21
|
};
|
|
22
|
-
export default function OPExpYearInput({
|
|
22
|
+
export default function OPExpYearInput({ options, placeholder, validationMessages, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
|
|
23
23
|
export {};
|
|
24
24
|
//# sourceMappingURL=OPExpInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPExpInput.d.ts","sourceRoot":"","sources":["../../src/components/OPExpInput.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":"OPExpInput.d.ts","sourceRoot":"","sources":["../../src/components/OPExpInput.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,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,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;AAwBF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,WAAgB,EAChB,kBAKC,EACD,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA+BlB"}
|
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
import { FormField } from "./forms";
|
|
2
|
-
function validateExpiry(value,
|
|
2
|
+
function validateExpiry(value, validationMessages) {
|
|
3
3
|
if (!value)
|
|
4
|
-
return
|
|
4
|
+
return validationMessages?.required || "Expiry is required";
|
|
5
5
|
const match = /^(\d{2})\/(\d{2})$/.exec(value);
|
|
6
6
|
if (!match)
|
|
7
|
-
return
|
|
7
|
+
return validationMessages?.format || "Use MM/YY format";
|
|
8
8
|
const month = parseInt(match[1], 10);
|
|
9
9
|
const year = 2000 + parseInt(match[2], 10);
|
|
10
10
|
if (month < 1 || month > 12)
|
|
11
|
-
return
|
|
11
|
+
return validationMessages?.invalidMonth || "Invalid month";
|
|
12
12
|
const now = new Date();
|
|
13
13
|
const expiry = new Date(year, month);
|
|
14
14
|
if (expiry <= now)
|
|
15
|
-
return
|
|
15
|
+
return validationMessages?.expired || "Card expired";
|
|
16
16
|
return undefined;
|
|
17
17
|
}
|
|
18
|
-
export default function OPExpYearInput({
|
|
18
|
+
export default function OPExpYearInput({ options = {}, placeholder = "", validationMessages = {
|
|
19
|
+
expired: "",
|
|
20
|
+
format: "",
|
|
21
|
+
invalidMonth: "",
|
|
22
|
+
required: "",
|
|
23
|
+
}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
|
|
19
24
|
const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
|
|
20
|
-
return (<FormField autoCapitalize="none" autoComplete="cc-exp" autoCorrect={false} defaultStyling={defaultStyling}
|
|
25
|
+
return (<FormField autoCapitalize="none" autoComplete="cc-exp" autoCorrect={false} defaultStyling={defaultStyling} icon={{ type: "material", name: "calendar-blank" }} keyboardType="number-pad" labelStyle={labelStyle} maxLength={5} name="exp" placeholder={placeholder || "MM/YY"} styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateExpiry} validationMessages={validationMessages} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
|
|
21
26
|
}
|
|
22
27
|
//# sourceMappingURL=OPExpInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OPExpInput.js","sourceRoot":"","sources":["../../src/components/OPExpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAuBpC,SAAS,cAAc,CACrB,KAAa,EACb,
|
|
1
|
+
{"version":3,"file":"OPExpInput.js","sourceRoot":"","sources":["../../src/components/OPExpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAuBpC,SAAS,cAAc,CACrB,KAAa,EACb,kBAAuD;IAEvD,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,QAAQ,IAAI,oBAAoB,CAAC;IAExE,MAAM,KAAK,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,EAAE,MAAM,IAAI,kBAAkB,CAAC;IAEpE,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACrC,MAAM,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3C,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QACzB,OAAO,kBAAkB,EAAE,YAAY,IAAI,eAAe,CAAC;IAE7D,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACrC,IAAI,MAAM,IAAI,GAAG;QAAE,OAAO,kBAAkB,EAAE,OAAO,IAAI,cAAc,CAAC;IAExE,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,kBAAkB,GAAG;IACnB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,EAAE;IAChB,QAAQ,EAAE,EAAE;CACb,EACD,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,QAAQ,CACrB,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,KAAK,CACV,WAAW,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC,CACpC,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,cAAc,CAAC,CACzB,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 expired?: string;\n format?: string;\n invalidMonth?: string;\n required?: string;\n };\n withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateExpiry(\n value: string,\n validationMessages?: Record<string, string | undefined>,\n) {\n if (!value) return validationMessages?.required || \"Expiry is required\";\n\n const match = /^(\\d{2})\\/(\\d{2})$/.exec(value);\n if (!match) return validationMessages?.format || \"Use MM/YY format\";\n\n const month = parseInt(match[1], 10);\n const year = 2000 + parseInt(match[2], 10);\n\n if (month < 1 || month > 12)\n return validationMessages?.invalidMonth || \"Invalid month\";\n\n const now = new Date();\n const expiry = new Date(year, month);\n if (expiry <= now) return validationMessages?.expired || \"Card expired\";\n\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\n placeholder = \"\",\n validationMessages = {\n expired: \"\",\n format: \"\",\n invalidMonth: \"\",\n required: \"\",\n },\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\"\n autoCorrect={false}\n defaultStyling={defaultStyling}\n icon={{ type: \"material\", name: \"calendar-blank\" }}\n keyboardType=\"number-pad\"\n labelStyle={labelStyle}\n maxLength={5}\n name=\"exp\"\n placeholder={placeholder || \"MM/YY\"}\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateExpiry}\n validationMessages={validationMessages}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
|