expo-openpay 0.1.8 → 0.1.9

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.
Files changed (36) hide show
  1. package/build/components/OPCardForm.d.ts +8 -0
  2. package/build/components/OPCardForm.d.ts.map +1 -1
  3. package/build/components/OPCardForm.js +18 -11
  4. package/build/components/OPCardForm.js.map +1 -1
  5. package/build/components/OPCardNumberInput.d.ts +2 -1
  6. package/build/components/OPCardNumberInput.d.ts.map +1 -1
  7. package/build/components/OPCardNumberInput.js +2 -2
  8. package/build/components/OPCardNumberInput.js.map +1 -1
  9. package/build/components/OPCvv2Input.d.ts +2 -1
  10. package/build/components/OPCvv2Input.d.ts.map +1 -1
  11. package/build/components/OPCvv2Input.js +2 -2
  12. package/build/components/OPCvv2Input.js.map +1 -1
  13. package/build/components/OPExpInput.d.ts +2 -1
  14. package/build/components/OPExpInput.d.ts.map +1 -1
  15. package/build/components/OPExpInput.js +2 -2
  16. package/build/components/OPExpInput.js.map +1 -1
  17. package/build/components/OPExpMonthInput.d.ts +2 -1
  18. package/build/components/OPExpMonthInput.d.ts.map +1 -1
  19. package/build/components/OPExpMonthInput.js +2 -2
  20. package/build/components/OPExpMonthInput.js.map +1 -1
  21. package/build/components/OPExpYearInput.d.ts +2 -1
  22. package/build/components/OPExpYearInput.d.ts.map +1 -1
  23. package/build/components/OPExpYearInput.js +2 -2
  24. package/build/components/OPExpYearInput.js.map +1 -1
  25. package/build/components/OPHolderNameInput.d.ts +2 -1
  26. package/build/components/OPHolderNameInput.d.ts.map +1 -1
  27. package/build/components/OPHolderNameInput.js +2 -2
  28. package/build/components/OPHolderNameInput.js.map +1 -1
  29. package/package.json +1 -1
  30. package/src/components/OPCardForm.tsx +26 -0
  31. package/src/components/OPCardNumberInput.tsx +3 -1
  32. package/src/components/OPCvv2Input.tsx +3 -1
  33. package/src/components/OPExpInput.tsx +3 -1
  34. package/src/components/OPExpMonthInput.tsx +3 -1
  35. package/src/components/OPExpYearInput.tsx +3 -1
  36. package/src/components/OPHolderNameInput.tsx +3 -1
package/build/components/OPCardForm.d.ts CHANGED
@@ -22,6 +22,14 @@ type CardFormProps = {
22
22
  lightTheme?: FormThemeColors;
23
23
  textInputStyle?: StyleProp<TextStyle>;
24
24
  };
25
+ placeholders?: {
26
+ cardholderInput: string;
27
+ cardNumberInput: string;
28
+ cvv2Input: string;
29
+ expInput: string;
30
+ expMonthInput: string;
31
+ expYearInput: string;
32
+ };
25
33
  withAnimatedTexts?: boolean;
26
34
  withIcons?: boolean;
27
35
  withLabels?: boolean;
package/build/components/OPCardForm.d.ts.map CHANGED
@@ -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,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;QAClC,OAAO,CAAC,EAAE;YACR,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACvC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;YAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;YAC5B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACtC,cAAc,CAAC,EAAE,OAAO,CAAC;YACzB,6BAA6B,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACrD,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAClC,UAAU,CAAC,EAAE,eAAe,CAAC;YAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;SACvC,CAAC;QACF,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,UAAU,EACV,MAAM,EACN,YAAoB,EACpB,WAAkB,EAClB,OAAY,GACb,EAAE,aAAa,+BA4Nf"}
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,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;QAClC,OAAO,CAAC,EAAE;YACR,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACvC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;YAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;YAC5B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACtC,cAAc,CAAC,EAAE,OAAO,CAAC;YACzB,6BAA6B,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YACrD,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;YAClC,UAAU,CAAC,EAAE,eAAe,CAAC;YAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;SACvC,CAAC;QACF,YAAY,CAAC,EAAE;YACb,eAAe,EAAE,MAAM,CAAC;YACxB,eAAe,EAAE,MAAM,CAAC;YACxB,SAAS,EAAE,MAAM,CAAC;YAClB,QAAQ,EAAE,MAAM,CAAC;YACjB,aAAa,EAAE,MAAM,CAAC;YACtB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,UAAU,EACV,MAAM,EACN,YAAoB,EACpB,WAAkB,EAClB,OAAY,GACb,EAAE,aAAa,+BA8Of"}
package/build/components/OPCardForm.js CHANGED
@@ -5,7 +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 { expIsMMYY = true, groupedView = true, onSubmit, styling = {}, withAnimatedTexts, withIcons, withLabels, withPlaceholders, } = options;
8
+ const { expIsMMYY = true, groupedView = true, onSubmit, styling = {}, placeholders = {
9
+ cardholderInput: "",
10
+ cardNumberInput: "",
11
+ cvv2Input: "",
12
+ expInput: "",
13
+ expMonthInput: "",
14
+ expYearInput: "",
15
+ }, withAnimatedTexts, withIcons, withLabels, withPlaceholders, } = options;
9
16
  const { buttonStyle = {}, buttonTextStyle = {}, colorScheme = "light", darkTheme, formFieldStyle = {}, defaultStyling = true, formKeyboardAvoidingViewStyle = {}, formScrollViewStyle = {}, labelStyle = {}, lightTheme, textInputStyle = {}, } = styling;
10
17
  useEffect(() => {
11
18
  const initOP = async () => {
@@ -32,14 +39,14 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
32
39
  inputStyle: {},
33
40
  labelStyle,
34
41
  textInputStyle,
35
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
42
+ }} placeholder={placeholders.cardholderInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
36
43
  <OPCardNumberInput options={{
37
44
  formFieldStyle,
38
45
  defaultStyling,
39
46
  inputStyle: {},
40
47
  labelStyle,
41
48
  textInputStyle,
42
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
49
+ }} placeholder={placeholders.cardNumberInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
43
50
  {defaultStyling && groupedView ? (<View style={{ flexDirection: "row", gap: 12 }}>
44
51
  {expIsMMYY ? (<OPExpInput options={{
45
52
  formFieldStyle: { flex: 1 },
@@ -47,21 +54,21 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
47
54
  inputStyle: {},
48
55
  labelStyle,
49
56
  textInputStyle,
50
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
57
+ }} placeholder={placeholders.expInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
51
58
  <OPExpMonthInput options={{
52
59
  formFieldStyle: { flex: 1 },
53
60
  defaultStyling,
54
61
  inputStyle: {},
55
62
  labelStyle,
56
63
  textInputStyle,
57
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
64
+ }} placeholder={placeholders.expMonthInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
58
65
  <OPExpYearInput options={{
59
66
  formFieldStyle: { flex: 1 },
60
67
  defaultStyling,
61
68
  inputStyle: {},
62
69
  labelStyle,
63
70
  textInputStyle,
64
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
71
+ }} placeholder={placeholders.expYearInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
65
72
  </>)}
66
73
  <OPCvv2Input options={{
67
74
  formFieldStyle: { flex: 1 },
@@ -69,7 +76,7 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
69
76
  inputStyle: {},
70
77
  labelStyle,
71
78
  textInputStyle,
72
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
79
+ }} placeholder={placeholders.cvv2Input} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
73
80
  </View>) : (<>
74
81
  {expIsMMYY ? (<OPExpInput options={{
75
82
  formFieldStyle,
@@ -77,21 +84,21 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
77
84
  inputStyle: {},
78
85
  labelStyle,
79
86
  textInputStyle,
80
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
87
+ }} placeholder={placeholders.expInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>) : (<>
81
88
  <OPExpMonthInput options={{
82
89
  formFieldStyle,
83
90
  defaultStyling,
84
91
  inputStyle: {},
85
92
  labelStyle: {},
86
93
  textInputStyle,
87
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
94
+ }} placeholder={placeholders.expMonthInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
88
95
  <OPExpYearInput options={{
89
96
  formFieldStyle,
90
97
  defaultStyling,
91
98
  inputStyle: {},
92
99
  labelStyle,
93
100
  textInputStyle,
94
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
101
+ }} placeholder={placeholders.expYearInput} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
95
102
  </>)}
96
103
 
97
104
  <OPCvv2Input options={{
@@ -100,7 +107,7 @@ export default function OPCardForm({ merchantId, apiKey, isProduction = false, c
100
107
  inputStyle: {},
101
108
  labelStyle,
102
109
  textInputStyle,
103
- }} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
110
+ }} placeholder={placeholders.cvv2Input} withAnimatedText={withAnimatedTexts} withIcon={withIcons} withLabel={withLabels} withPlaceholder={withPlaceholders}/>
104
111
  </>)}
105
112
  <SubmitButton buttonStyle={buttonStyle} buttonTextStyle={buttonTextStyle} defaultStyling={defaultStyling}/>
106
113
  </ScrollView>
package/build/components/OPCardForm.js.map CHANGED
@@ -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;AA4CX,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,SAAS,GAAG,IAAI,EAChB,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,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,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAClE;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,OAAO,CAAC,CAAC;YACP,cAAc;YACd,cAAc;YACd,UAAU,EAAE,EAAE;YACd,UAAU;YACV,cAAc;SACf,CAAC,CACF,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,OAAO,CAAC,CAAC;YACP,cAAc;YACd,cAAc;YACd,UAAU,EAAE,EAAE;YACd,UAAU;YACV,cAAc;SACf,CAAC,CACF,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,OAAO,CAAC,CAAC;oBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;oBAC3B,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,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,OAAO,CAAC,CAAC;oBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;oBAC3B,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,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,OAAO,CAAC,CAAC;oBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;oBAC3B,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,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,OAAO,CAAC,CAAC;gBACP,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;gBAC3B,cAAc;gBACd,UAAU,EAAE,EAAE;gBACd,UAAU;gBACV,cAAc;aACf,CAAC,CACF,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,OAAO,CAAC,CAAC;oBACP,cAAc;oBACd,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,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,OAAO,CAAC,CAAC;oBACP,cAAc;oBACd,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU,EAAE,EAAE;oBACd,cAAc;iBACf,CAAC,CACF,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,OAAO,CAAC,CAAC;oBACP,cAAc;oBACd,cAAc;oBACd,UAAU,EAAE,EAAE;oBACd,UAAU;oBACV,cAAc;iBACf,CAAC,CACF,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,OAAO,CAAC,CAAC;gBACP,cAAc;gBACd,cAAc;gBACd,UAAU,EAAE,EAAE;gBACd,UAAU;gBACV,cAAc;aACf,CAAC,CACF,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,EAEnC;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 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 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 expIsMMYY = true,\n groupedView = true,\n onSubmit,\n styling = {},\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 initialValues={{ cardNumber: \"\" }} onSubmit={onSubmit}>\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 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 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 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 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 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 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 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 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 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 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 />\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":"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;AAoDX,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,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,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAClE;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,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,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,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,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,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,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,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,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,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,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,EAEnC;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 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 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 initialValues={{ cardNumber: \"\" }} onSubmit={onSubmit}>\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 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 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 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 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 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 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 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 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 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 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 />\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"]}
package/build/components/OPCardNumberInput.d.ts CHANGED
@@ -7,11 +7,12 @@ type CardInputOptions = {
7
7
  labelStyle?: StyleProp<TextStyle>;
8
8
  textInputStyle?: StyleProp<TextStyle>;
9
9
  };
10
+ placeholder?: string;
10
11
  withAnimatedText?: boolean;
11
12
  withIcon?: boolean;
12
13
  withLabel?: boolean;
13
14
  withPlaceholder?: boolean;
14
15
  };
15
- export default function OPCardNumberInput({ options, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
+ export default function OPCardNumberInput({ options, placeholder, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=OPCardNumberInput.d.ts.map
package/build/components/OPCardNumberInput.d.ts.map CHANGED
@@ -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,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,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;AAqDF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAY,EACZ,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BAmClB"}
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,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;AAqDF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BAmClB"}
package/build/components/OPCardNumberInput.js CHANGED
@@ -50,11 +50,11 @@ function validateCardNumber(value) {
50
50
  return "Invalid card number";
51
51
  return undefined; // valid card
52
52
  }
53
- export default function OPCardNumberInput({ options = {}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
53
+ export default function OPCardNumberInput({ options = {}, placeholder = "", 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
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="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} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
59
59
  }
60
60
  //# sourceMappingURL=OPCardNumberInput.js.map
package/build/components/OPCardNumberInput.js.map CHANGED
@@ -1 +1 @@
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 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(value: string) {\n if (!value) return \"Card Number is required\";\n\n const sanitized = value.replace(/\\s+/g, \"\");\n if (sanitized.length < 13 || sanitized.length > 19) {\n return \"Card Number must be 13-19 digits\";\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) return \"Invalid card number\";\n\n return undefined; // valid card\n}\n\nexport default function OPCardNumberInput({\n options = {},\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=\"Card Number\"\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateCardNumber}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
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 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(value: string) {\n if (!value) return \"Card Number is required\";\n\n const sanitized = value.replace(/\\s+/g, \"\");\n if (sanitized.length < 13 || sanitized.length > 19) {\n return \"Card Number must be 13-19 digits\";\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) return \"Invalid card number\";\n\n return undefined; // valid card\n}\n\nexport default function OPCardNumberInput({\n options = {},\n placeholder = \"\",\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 withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
package/build/components/OPCvv2Input.d.ts CHANGED
@@ -7,11 +7,12 @@ type CardInputOptions = {
7
7
  labelStyle?: StyleProp<TextStyle>;
8
8
  textInputStyle?: StyleProp<TextStyle>;
9
9
  };
10
+ placeholder?: string;
10
11
  withAnimatedText?: boolean;
11
12
  withIcon?: boolean;
12
13
  withLabel?: boolean;
13
14
  withPlaceholder?: boolean;
14
15
  };
15
- export default function OPExpYearInput({ options, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
+ export default function OPExpYearInput({ options, placeholder, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=OPCvv2Input.d.ts.map
package/build/components/OPCvv2Input.d.ts.map CHANGED
@@ -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,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,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;AAQF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA8BlB"}
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,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;AAQF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA8BlB"}
package/build/components/OPCvv2Input.js CHANGED
@@ -6,8 +6,8 @@ function validateCvv(value) {
6
6
  return "Invalid CVV";
7
7
  return undefined;
8
8
  }
9
- export default function OPExpYearInput({ options = {}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
9
+ export default function OPExpYearInput({ options = {}, placeholder = "", 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} icon={{ type: "material", name: "lock" }} keyboardType="number-pad" labelStyle={labelStyle} maxLength={4} name="cvc" placeholder="CVC" styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateCvv} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
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} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
12
12
  }
13
13
  //# sourceMappingURL=OPCvv2Input.js.map
package/build/components/OPCvv2Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OPCvv2Input.js","sourceRoot":"","sources":["../../src/components/OPCvv2Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgBpC,SAAS,WAAW,CAAC,KAAa;IAChC,IAAI,CAAC,KAAK;QAAE,OAAO,iBAAiB,CAAC;IACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,aAAa,CAAC;IACnD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,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,KAAK,CACjB,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,WAAW,CAAC,CACtB,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateCvv(value: string) {\n if (!value) return \"CVV is required\";\n if (!/^\\d{3,4}$/.test(value)) return \"Invalid CVV\";\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\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=\"CVC\"\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateCvv}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"OPCvv2Input.js","sourceRoot":"","sources":["../../src/components/OPCvv2Input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBpC,SAAS,WAAW,CAAC,KAAa;IAChC,IAAI,CAAC,KAAK;QAAE,OAAO,iBAAiB,CAAC;IACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,aAAa,CAAC;IACnD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,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,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateCvv(value: string) {\n if (!value) return \"CVV is required\";\n if (!/^\\d{3,4}$/.test(value)) return \"Invalid CVV\";\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\n placeholder = \"\",\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 withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
package/build/components/OPExpInput.d.ts CHANGED
@@ -7,11 +7,12 @@ type CardInputOptions = {
7
7
  labelStyle?: StyleProp<TextStyle>;
8
8
  textInputStyle?: StyleProp<TextStyle>;
9
9
  };
10
+ placeholder?: string;
10
11
  withAnimatedText?: boolean;
11
12
  withIcon?: boolean;
12
13
  withLabel?: boolean;
13
14
  withPlaceholder?: boolean;
14
15
  };
15
- export default function OPExpYearInput({ options, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
+ export default function OPExpYearInput({ options, placeholder, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=OPExpInput.d.ts.map
package/build/components/OPExpInput.d.ts.map CHANGED
@@ -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,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,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;AAoBF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA8BlB"}
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,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;AAoBF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA8BlB"}
package/build/components/OPExpInput.js CHANGED
@@ -15,8 +15,8 @@ function validateExpiry(value) {
15
15
  return "Card expired";
16
16
  return undefined;
17
17
  }
18
- export default function OPExpYearInput({ options = {}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
18
+ export default function OPExpYearInput({ options = {}, placeholder = "", withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
19
19
  const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
20
- 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="MM/YY" styling={{ formFieldStyle, inputStyle, textInputStyle }} validate={validateExpiry} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
20
+ 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} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
21
21
  }
22
22
  //# sourceMappingURL=OPExpInput.js.map
package/build/components/OPExpInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OPExpInput.js","sourceRoot":"","sources":["../../src/components/OPExpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgBpC,SAAS,cAAc,CAAC,KAAa;IACnC,IAAI,CAAC,KAAK;QAAE,OAAO,oBAAoB,CAAC;IAExC,MAAM,KAAK,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,CAAC;IAEtC,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;QAAE,OAAO,eAAe,CAAC;IAEpD,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,cAAc,CAAC;IAEzC,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,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,OAAO,CACnB,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,QAAQ,CAAC,CAAC,cAAc,CAAC,CACzB,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateExpiry(value: string) {\n if (!value) return \"Expiry is required\";\n\n const match = /^(\\d{2})\\/(\\d{2})$/.exec(value);\n if (!match) return \"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) return \"Invalid month\";\n\n const now = new Date();\n const expiry = new Date(year, month);\n if (expiry <= now) return \"Card expired\";\n\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\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=\"MM/YY\"\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n validate={validateExpiry}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"OPExpInput.js","sourceRoot":"","sources":["../../src/components/OPExpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBpC,SAAS,cAAc,CAAC,KAAa;IACnC,IAAI,CAAC,KAAK;QAAE,OAAO,oBAAoB,CAAC;IAExC,MAAM,KAAK,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,KAAK;QAAE,OAAO,kBAAkB,CAAC;IAEtC,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;QAAE,OAAO,eAAe,CAAC;IAEpD,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,cAAc,CAAC;IAEzC,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,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,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nfunction validateExpiry(value: string) {\n if (!value) return \"Expiry is required\";\n\n const match = /^(\\d{2})\\/(\\d{2})$/.exec(value);\n if (!match) return \"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) return \"Invalid month\";\n\n const now = new Date();\n const expiry = new Date(year, month);\n if (expiry <= now) return \"Card expired\";\n\n return undefined;\n}\n\nexport default function OPExpYearInput({\n options = {},\n placeholder = \"\",\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 withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
package/build/components/OPExpMonthInput.d.ts CHANGED
@@ -7,11 +7,12 @@ type CardInputOptions = {
7
7
  labelStyle?: StyleProp<TextStyle>;
8
8
  textInputStyle?: StyleProp<TextStyle>;
9
9
  };
10
+ placeholder?: string;
10
11
  withAnimatedText?: boolean;
11
12
  withIcon?: boolean;
12
13
  withLabel?: boolean;
13
14
  withPlaceholder?: boolean;
14
15
  };
15
- export default function OPExpMonthInput({ options, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
+ export default function OPExpMonthInput({ options, placeholder, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=OPExpMonthInput.d.ts.map
package/build/components/OPExpMonthInput.d.ts.map CHANGED
@@ -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,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,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;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAY,EACZ,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA6BlB"}
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,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;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA6BlB"}
package/build/components/OPExpMonthInput.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormField } from "./forms";
2
- export default function OPExpMonthInput({ options = {}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
2
+ export default function OPExpMonthInput({ options = {}, placeholder = "", withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
3
3
  const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
4
- 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="MM" styling={{ formFieldStyle, inputStyle, textInputStyle }} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
4
+ 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 }} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
5
5
  }
6
6
  //# sourceMappingURL=OPExpMonthInput.js.map
package/build/components/OPExpMonthInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OPExpMonthInput.js","sourceRoot":"","sources":["../../src/components/OPExpMonthInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgBpC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,GAAG,EAAE,EACZ,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,IAAI,CAChB,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function OPExpMonthInput({\n options = {},\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=\"MM\"\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"OPExpMonthInput.js","sourceRoot":"","sources":["../../src/components/OPExpMonthInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBpC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,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,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function OPExpMonthInput({\n options = {},\n placeholder = \"\",\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 withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
package/build/components/OPExpYearInput.d.ts CHANGED
@@ -7,11 +7,12 @@ type CardInputOptions = {
7
7
  labelStyle?: StyleProp<TextStyle>;
8
8
  textInputStyle?: StyleProp<TextStyle>;
9
9
  };
10
+ placeholder?: string;
10
11
  withAnimatedText?: boolean;
11
12
  withIcon?: boolean;
12
13
  withLabel?: boolean;
13
14
  withPlaceholder?: boolean;
14
15
  };
15
- export default function OPExpYearInput({ options, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
+ export default function OPExpYearInput({ options, placeholder, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=OPExpYearInput.d.ts.map
package/build/components/OPExpYearInput.d.ts.map CHANGED
@@ -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,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,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;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA6BlB"}
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,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;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA6BlB"}
package/build/components/OPExpYearInput.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormField } from "./forms";
2
- export default function OPExpYearInput({ options = {}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
2
+ export default function OPExpYearInput({ options = {}, placeholder = "", withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
3
3
  const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
4
- 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="YY" styling={{ formFieldStyle, inputStyle, textInputStyle }} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
4
+ 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 }} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
5
5
  }
6
6
  //# sourceMappingURL=OPExpYearInput.js.map
package/build/components/OPExpYearInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OPExpYearInput.js","sourceRoot":"","sources":["../../src/components/OPExpYearInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgBpC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,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,IAAI,CAChB,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function OPExpYearInput({\n options = {},\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=\"YY\"\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"OPExpYearInput.js","sourceRoot":"","sources":["../../src/components/OPExpYearInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBpC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,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,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function OPExpYearInput({\n options = {},\n placeholder = \"\",\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 withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
package/build/components/OPHolderNameInput.d.ts CHANGED
@@ -7,11 +7,12 @@ type CardInputOptions = {
7
7
  labelStyle?: StyleProp<TextStyle>;
8
8
  textInputStyle?: StyleProp<TextStyle>;
9
9
  };
10
+ placeholder?: string;
10
11
  withAnimatedText?: boolean;
11
12
  withIcon?: boolean;
12
13
  withLabel?: boolean;
13
14
  withPlaceholder?: boolean;
14
15
  };
15
- export default function OPHolderNameInput({ options, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
+ export default function OPHolderNameInput({ options, placeholder, withAnimatedText, withIcon, withLabel, withPlaceholder, ...otherProps }: CardInputOptions): import("react").JSX.Element;
16
17
  export {};
17
18
  //# sourceMappingURL=OPHolderNameInput.d.ts.map
package/build/components/OPHolderNameInput.d.ts.map CHANGED
@@ -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,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,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;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAY,EACZ,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA2BlB"}
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,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;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,QAAe,EACf,SAAiB,EACjB,eAAsB,EACtB,GAAG,UAAU,EACd,EAAE,gBAAgB,+BA2BlB"}
package/build/components/OPHolderNameInput.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormField } from "./forms";
2
- export default function OPHolderNameInput({ options = {}, withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
2
+ export default function OPHolderNameInput({ options = {}, placeholder = "", withAnimatedText = true, withIcon = true, withLabel = false, withPlaceholder = true, ...otherProps }) {
3
3
  const { defaultStyling = true, formFieldStyle = {}, inputStyle = {}, labelStyle = {}, textInputStyle = {}, } = options;
4
- return (<FormField autoCapitalize="words" autoComplete="cc-name" autoCorrect={false} defaultStyling={defaultStyling} icon={{ type: "material", name: "account" }} labelStyle={labelStyle} name="cardHolderName" placeholder="Cardholder Name" styling={{ formFieldStyle, inputStyle, textInputStyle }} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
4
+ 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 }} withAnimatedText={withAnimatedText} withIcon={withIcon} withLabel={withLabel} withPlaceholder={withPlaceholder} {...otherProps}/>);
5
5
  }
6
6
  //# sourceMappingURL=OPHolderNameInput.js.map
package/build/components/OPHolderNameInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OPHolderNameInput.js","sourceRoot":"","sources":["../../src/components/OPHolderNameInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgBpC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAO,GAAG,EAAE,EACZ,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,iBAAiB,CAC7B,OAAO,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CACxD,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function OPHolderNameInput({\n options = {},\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=\"Cardholder Name\"\n styling={{ formFieldStyle, inputStyle, textInputStyle }}\n withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"OPHolderNameInput.js","sourceRoot":"","sources":["../../src/components/OPHolderNameInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBpC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,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,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 withAnimatedText?: boolean;\n withIcon?: boolean;\n withLabel?: boolean;\n withPlaceholder?: boolean;\n};\n\nexport default function OPHolderNameInput({\n options = {},\n placeholder = \"\",\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 withAnimatedText={withAnimatedText}\n withIcon={withIcon}\n withLabel={withLabel}\n withPlaceholder={withPlaceholder}\n {...otherProps}\n />\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "expo-openpay",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "description": "Expo module for Openpay integration",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
package/src/components/OPCardForm.tsx CHANGED
@@ -56,6 +56,14 @@ type CardFormProps = {
56
56
  lightTheme?: FormThemeColors;
57
57
  textInputStyle?: StyleProp<TextStyle>;
58
58
  };
59
+ placeholders?: {
60
+ cardholderInput: string;
61
+ cardNumberInput: string;
62
+ cvv2Input: string;
63
+ expInput: string;
64
+ expMonthInput: string;
65
+ expYearInput: string;
66
+ };
59
67
  withAnimatedTexts?: boolean;
60
68
  withIcons?: boolean;
61
69
  withLabels?: boolean;
@@ -75,6 +83,14 @@ export default function OPCardForm({
75
83
  groupedView = true,
76
84
  onSubmit,
77
85
  styling = {},
86
+ placeholders = {
87
+ cardholderInput: "",
88
+ cardNumberInput: "",
89
+ cvv2Input: "",
90
+ expInput: "",
91
+ expMonthInput: "",
92
+ expYearInput: "",
93
+ },
78
94
  withAnimatedTexts,
79
95
  withIcons,
80
96
  withLabels,
@@ -139,6 +155,7 @@ export default function OPCardForm({
139
155
  labelStyle,
140
156
  textInputStyle,
141
157
  }}
158
+ placeholder={placeholders.cardholderInput}
142
159
  withAnimatedText={withAnimatedTexts}
143
160
  withIcon={withIcons}
144
161
  withLabel={withLabels}
@@ -152,6 +169,7 @@ export default function OPCardForm({
152
169
  labelStyle,
153
170
  textInputStyle,
154
171
  }}
172
+ placeholder={placeholders.cardNumberInput}
155
173
  withAnimatedText={withAnimatedTexts}
156
174
  withIcon={withIcons}
157
175
  withLabel={withLabels}
@@ -168,6 +186,7 @@ export default function OPCardForm({
168
186
  labelStyle,
169
187
  textInputStyle,
170
188
  }}
189
+ placeholder={placeholders.expInput}
171
190
  withAnimatedText={withAnimatedTexts}
172
191
  withIcon={withIcons}
173
192
  withLabel={withLabels}
@@ -183,6 +202,7 @@ export default function OPCardForm({
183
202
  labelStyle,
184
203
  textInputStyle,
185
204
  }}
205
+ placeholder={placeholders.expMonthInput}
186
206
  withAnimatedText={withAnimatedTexts}
187
207
  withIcon={withIcons}
188
208
  withLabel={withLabels}
@@ -196,6 +216,7 @@ export default function OPCardForm({
196
216
  labelStyle,
197
217
  textInputStyle,
198
218
  }}
219
+ placeholder={placeholders.expYearInput}
199
220
  withAnimatedText={withAnimatedTexts}
200
221
  withIcon={withIcons}
201
222
  withLabel={withLabels}
@@ -211,6 +232,7 @@ export default function OPCardForm({
211
232
  labelStyle,
212
233
  textInputStyle,
213
234
  }}
235
+ placeholder={placeholders.cvv2Input}
214
236
  withAnimatedText={withAnimatedTexts}
215
237
  withIcon={withIcons}
216
238
  withLabel={withLabels}
@@ -228,6 +250,7 @@ export default function OPCardForm({
228
250
  labelStyle,
229
251
  textInputStyle,
230
252
  }}
253
+ placeholder={placeholders.expInput}
231
254
  withAnimatedText={withAnimatedTexts}
232
255
  withIcon={withIcons}
233
256
  withLabel={withLabels}
@@ -243,6 +266,7 @@ export default function OPCardForm({
243
266
  labelStyle: {},
244
267
  textInputStyle,
245
268
  }}
269
+ placeholder={placeholders.expMonthInput}
246
270
  withAnimatedText={withAnimatedTexts}
247
271
  withIcon={withIcons}
248
272
  withLabel={withLabels}
@@ -256,6 +280,7 @@ export default function OPCardForm({
256
280
  labelStyle,
257
281
  textInputStyle,
258
282
  }}
283
+ placeholder={placeholders.expYearInput}
259
284
  withAnimatedText={withAnimatedTexts}
260
285
  withIcon={withIcons}
261
286
  withLabel={withLabels}
@@ -272,6 +297,7 @@ export default function OPCardForm({
272
297
  labelStyle,
273
298
  textInputStyle,
274
299
  }}
300
+ placeholder={placeholders.cvv2Input}
275
301
  withAnimatedText={withAnimatedTexts}
276
302
  withIcon={withIcons}
277
303
  withLabel={withLabels}
package/src/components/OPCardNumberInput.tsx CHANGED
@@ -24,6 +24,7 @@ type CardInputOptions = {
24
24
  labelStyle?: StyleProp<TextStyle>;
25
25
  textInputStyle?: StyleProp<TextStyle>;
26
26
  };
27
+ placeholder?: string;
27
28
  withAnimatedText?: boolean;
28
29
  withIcon?: boolean;
29
30
  withLabel?: boolean;
@@ -83,6 +84,7 @@ function validateCardNumber(value: string) {
83
84
 
84
85
  export default function OPCardNumberInput({
85
86
  options = {},
87
+ placeholder = "",
86
88
  withAnimatedText = true,
87
89
  withIcon = true,
88
90
  withLabel = false,
@@ -113,7 +115,7 @@ export default function OPCardNumberInput({
113
115
  onValueChange={(text) => {
114
116
  setCardType(detectCardBrand(text));
115
117
  }}
116
- placeholder="Card Number"
118
+ placeholder={placeholder || "Card Number"}
117
119
  styling={{ formFieldStyle, inputStyle, textInputStyle }}
118
120
  validate={validateCardNumber}
119
121
  withAnimatedText={withAnimatedText}
package/src/components/OPCvv2Input.tsx CHANGED
@@ -10,6 +10,7 @@ type CardInputOptions = {
10
10
  labelStyle?: StyleProp<TextStyle>;
11
11
  textInputStyle?: StyleProp<TextStyle>;
12
12
  };
13
+ placeholder?: string;
13
14
  withAnimatedText?: boolean;
14
15
  withIcon?: boolean;
15
16
  withLabel?: boolean;
@@ -24,6 +25,7 @@ function validateCvv(value: string) {
24
25
 
25
26
  export default function OPExpYearInput({
26
27
  options = {},
28
+ placeholder = "",
27
29
  withAnimatedText = true,
28
30
  withIcon = true,
29
31
  withLabel = false,
@@ -49,7 +51,7 @@ export default function OPExpYearInput({
49
51
  labelStyle={labelStyle}
50
52
  maxLength={4}
51
53
  name="cvc"
52
- placeholder="CVC"
54
+ placeholder={placeholder || "CVC"}
53
55
  styling={{ formFieldStyle, inputStyle, textInputStyle }}
54
56
  validate={validateCvv}
55
57
  withAnimatedText={withAnimatedText}
package/src/components/OPExpInput.tsx CHANGED
@@ -10,6 +10,7 @@ type CardInputOptions = {
10
10
  labelStyle?: StyleProp<TextStyle>;
11
11
  textInputStyle?: StyleProp<TextStyle>;
12
12
  };
13
+ placeholder?: string;
13
14
  withAnimatedText?: boolean;
14
15
  withIcon?: boolean;
15
16
  withLabel?: boolean;
@@ -36,6 +37,7 @@ function validateExpiry(value: string) {
36
37
 
37
38
  export default function OPExpYearInput({
38
39
  options = {},
40
+ placeholder = "",
39
41
  withAnimatedText = true,
40
42
  withIcon = true,
41
43
  withLabel = false,
@@ -61,7 +63,7 @@ export default function OPExpYearInput({
61
63
  labelStyle={labelStyle}
62
64
  maxLength={5}
63
65
  name="exp"
64
- placeholder="MM/YY"
66
+ placeholder={placeholder || "MM/YY"}
65
67
  styling={{ formFieldStyle, inputStyle, textInputStyle }}
66
68
  validate={validateExpiry}
67
69
  withAnimatedText={withAnimatedText}
package/src/components/OPExpMonthInput.tsx CHANGED
@@ -10,6 +10,7 @@ type CardInputOptions = {
10
10
  labelStyle?: StyleProp<TextStyle>;
11
11
  textInputStyle?: StyleProp<TextStyle>;
12
12
  };
13
+ placeholder?: string;
13
14
  withAnimatedText?: boolean;
14
15
  withIcon?: boolean;
15
16
  withLabel?: boolean;
@@ -18,6 +19,7 @@ type CardInputOptions = {
18
19
 
19
20
  export default function OPExpMonthInput({
20
21
  options = {},
22
+ placeholder = "",
21
23
  withAnimatedText = true,
22
24
  withIcon = true,
23
25
  withLabel = false,
@@ -43,7 +45,7 @@ export default function OPExpMonthInput({
43
45
  labelStyle={labelStyle}
44
46
  maxLength={2}
45
47
  name="expMonth"
46
- placeholder="MM"
48
+ placeholder={placeholder || "MM"}
47
49
  styling={{ formFieldStyle, inputStyle, textInputStyle }}
48
50
  withAnimatedText={withAnimatedText}
49
51
  withIcon={withIcon}
package/src/components/OPExpYearInput.tsx CHANGED
@@ -10,6 +10,7 @@ type CardInputOptions = {
10
10
  labelStyle?: StyleProp<TextStyle>;
11
11
  textInputStyle?: StyleProp<TextStyle>;
12
12
  };
13
+ placeholder?: string;
13
14
  withAnimatedText?: boolean;
14
15
  withIcon?: boolean;
15
16
  withLabel?: boolean;
@@ -18,6 +19,7 @@ type CardInputOptions = {
18
19
 
19
20
  export default function OPExpYearInput({
20
21
  options = {},
22
+ placeholder = "",
21
23
  withAnimatedText = true,
22
24
  withIcon = true,
23
25
  withLabel = false,
@@ -43,7 +45,7 @@ export default function OPExpYearInput({
43
45
  labelStyle={labelStyle}
44
46
  maxLength={2}
45
47
  name="expYear"
46
- placeholder="YY"
48
+ placeholder={placeholder || "YY"}
47
49
  styling={{ formFieldStyle, inputStyle, textInputStyle }}
48
50
  withAnimatedText={withAnimatedText}
49
51
  withIcon={withIcon}
package/src/components/OPHolderNameInput.tsx CHANGED
@@ -10,6 +10,7 @@ type CardInputOptions = {
10
10
  labelStyle?: StyleProp<TextStyle>;
11
11
  textInputStyle?: StyleProp<TextStyle>;
12
12
  };
13
+ placeholder?: string;
13
14
  withAnimatedText?: boolean;
14
15
  withIcon?: boolean;
15
16
  withLabel?: boolean;
@@ -18,6 +19,7 @@ type CardInputOptions = {
18
19
 
19
20
  export default function OPHolderNameInput({
20
21
  options = {},
22
+ placeholder = "",
21
23
  withAnimatedText = true,
22
24
  withIcon = true,
23
25
  withLabel = false,
@@ -41,7 +43,7 @@ export default function OPHolderNameInput({
41
43
  icon={{ type: "material", name: "account" }}
42
44
  labelStyle={labelStyle}
43
45
  name="cardHolderName"
44
- placeholder="Cardholder Name"
46
+ placeholder={placeholder || "Cardholder Name"}
45
47
  styling={{ formFieldStyle, inputStyle, textInputStyle }}
46
48
  withAnimatedText={withAnimatedText}
47
49
  withIcon={withIcon}