@benbraide/inlinejs-stripe 1.0.4 → 1.0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/inlinejs-stripe.js +240 -185
  2. package/dist/inlinejs-stripe.min.js +1 -1
  3. package/lib/common/directive/stripe.js +155 -138
  4. package/lib/esm/directive/stripe.js +155 -138
  5. package/package.json +2 -2
package/lib/esm/directive/stripe.js CHANGED
@@ -13,6 +13,7 @@ let StripeUrl = 'https://js.stripe.com/v3/';
13
13
  let StripeStyles = null;
14
14
  let StripeClasses = null;
15
15
  export const StripeDirectiveHandler = CreateDirectiveHandlerCallback(StripeDirectiveName, ({ componentId, component, contextElement, expression, argKey, argOptions }) => {
16
+ var _a;
16
17
  if (BindEvent({ contextElement, expression,
17
18
  component: (component || componentId),
18
19
  key: StripeDirectiveName,
@@ -39,159 +40,150 @@ export const StripeDirectiveHandler = CreateDirectiveHandlerCallback(StripeDirec
39
40
  elementScope.SetLocal(localKey, CreateInplaceProxy(BuildGetterProxyOptions({
40
41
  getter: (prop) => {
41
42
  var _a;
43
+ let local = (contextElement.parentElement ? (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
42
44
  if (prop === 'parent') {
43
- return (contextElement.parentElement ? (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
45
+ return local;
44
46
  }
47
+ return ((prop && local) ? local[prop] : null);
45
48
  },
46
49
  lookup: ['parent'],
47
50
  })));
48
51
  }
49
52
  return;
50
53
  }
51
- if (argKey in StripeKeys) { //Bind Stripe field
52
- let details = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true);
53
- if (!details) { //No parent
54
- return;
55
- }
56
- let id = resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`), field = {
57
- name: argKey,
58
- mount: contextElement,
59
- element: details.elements.create(StripeKeys[argKey], {
60
- style: (StripeStyles || undefined),
61
- classes: (StripeClasses || undefined),
62
- }),
63
- ready: false,
64
- complete: false,
65
- error: undefined,
66
- };
67
- if (!field.element) {
68
- return;
69
- }
70
- field.element.mount(contextElement);
71
- details.fields.push(field);
72
- elementScope.SetLocal(localKey, CreateInplaceProxy(BuildGetterProxyOptions({
73
- getter: (prop) => {
74
- var _a, _b, _c, _d;
75
- if (prop === 'complete') {
76
- (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
77
- return field.complete;
78
- }
79
- if (prop === 'focused') {
80
- (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
81
- return field.focused;
82
- }
83
- if (prop === 'error') {
84
- (_c = FindComponentById(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
85
- return field.error;
86
- }
87
- if (prop === 'parent') {
88
- return (contextElement.parentElement ? (_d = FindComponentById(componentId)) === null || _d === void 0 ? void 0 : _d.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
89
- }
90
- if (prop === 'clear') {
91
- return () => {
92
- if (field.element) {
93
- field.element.clear();
94
- }
95
- };
96
- }
97
- if (prop === 'focus') {
98
- return () => {
99
- if (field.element) {
100
- field.element.focus();
101
- }
102
- };
103
- }
104
- if (prop === 'blur') {
105
- return () => {
106
- if (field.element) {
107
- field.element.blur();
108
- }
109
- };
110
- }
111
- },
112
- lookup: ['complete', 'focused', 'error', 'parent', 'clear', 'focus', 'blur'],
113
- })));
114
- let fields = details.fields;
115
- elementScope.AddUninitCallback(() => {
116
- var _a;
117
- (_a = field.element) === null || _a === void 0 ? void 0 : _a.destroy();
118
- fields.splice(fields.indexOf(field), 1);
119
- });
120
- field.element.on('ready', () => {
121
- if (!field.ready) {
122
- field.ready = true;
123
- field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.ready`));
124
- details.onReady();
125
- }
126
- });
127
- field.element.on('change', (e) => {
128
- var _a, _b;
129
- if ((e === null || e === void 0 ? void 0 : e.complete) === field.complete) {
54
+ if (StripeKeys.hasOwnProperty(argKey)) { //Bind Stripe field
55
+ return (_a = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true)) === null || _a === void 0 ? void 0 : _a.addField(argKey, contextElement, (field, details) => {
56
+ let resolvedComponent = FindComponentById(componentId), elementScope = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.FindElementScope(contextElement);
57
+ let id = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`);
58
+ if (!field.element) {
130
59
  return;
131
60
  }
132
- field.complete = e === null || e === void 0 ? void 0 : e.complete;
133
- field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.complete`, {
134
- detail: {
135
- completed: e === null || e === void 0 ? void 0 : e.complete,
136
- },
137
- }));
138
- if (field.complete) {
139
- if (field.error) {
140
- field.error = undefined;
141
- AddChanges('set', `${id}.error`, 'error', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
142
- }
143
- if (details.options.autofocus) { //Focus next if any
144
- let index = details.fields.indexOf(field);
145
- if (index != -1 && index < (details.fields.length - 1)) {
146
- let nextField = details.fields[index + 1];
147
- if (nextField.element) {
148
- nextField.element.focus();
149
- }
150
- else if ('focus' in nextField.mount && typeof nextField.mount.focus === 'function') {
151
- nextField.mount.focus();
152
- }
61
+ elementScope === null || elementScope === void 0 ? void 0 : elementScope.SetLocal(localKey, CreateInplaceProxy(BuildGetterProxyOptions({
62
+ getter: (prop) => {
63
+ var _a, _b, _c, _d, _e;
64
+ if (prop === 'complete') {
65
+ (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
66
+ return field.complete;
67
+ }
68
+ if (prop === 'focused') {
69
+ (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
70
+ return field.focused;
71
+ }
72
+ if (prop === 'error') {
73
+ (_c = FindComponentById(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
74
+ return field.error;
75
+ }
76
+ if (prop === 'parent') {
77
+ return (contextElement.parentElement ? (_d = FindComponentById(componentId)) === null || _d === void 0 ? void 0 : _d.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
78
+ }
79
+ if (prop === 'clear') {
80
+ return () => {
81
+ if (field.element) {
82
+ field.element.clear();
83
+ }
84
+ };
85
+ }
86
+ if (prop === 'focus') {
87
+ return () => {
88
+ if (field.element) {
89
+ field.element.focus();
90
+ }
91
+ };
92
+ }
93
+ if (prop === 'blur') {
94
+ return () => {
95
+ if (field.element) {
96
+ field.element.blur();
97
+ }
98
+ };
153
99
  }
154
- else if (details.specialMounts.submit) {
155
- details.specialMounts.submit.focus();
100
+ if (prop === 'disable') {
101
+ return (state = true) => {
102
+ if (field.element) {
103
+ field.element.update({ disabled: state });
104
+ }
105
+ };
156
106
  }
107
+ let local = (contextElement.parentElement ? (_e = FindComponentById(componentId)) === null || _e === void 0 ? void 0 : _e.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
108
+ return ((prop && local) ? local[prop] : null);
109
+ },
110
+ lookup: ['complete', 'focused', 'error', 'parent', 'clear', 'focus', 'blur', 'disable'],
111
+ })));
112
+ field.element.on('ready', () => {
113
+ if (!field.ready) {
114
+ field.ready = true;
115
+ field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.ready`));
116
+ details.onReady();
157
117
  }
158
- }
159
- else if ((e === null || e === void 0 ? void 0 : e.error) && e.error.message !== field.error) {
160
- field.error = e.error.message;
161
- AddChanges('set', `${id}.error`, 'error', (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes);
162
- field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
163
- detail: {
164
- message: e.error.message,
165
- },
166
- }));
167
- }
168
- details.onChange();
169
- });
170
- field.element.on('focus', () => {
171
- var _a;
172
- if (!field.focused) {
173
- field.focused = true;
174
- AddChanges('set', `${id}.focused`, 'focused', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
175
- field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
176
- detail: {
177
- focused: true,
178
- },
179
- }));
180
- }
181
- });
182
- field.element.on('blur', () => {
183
- var _a;
184
- if (field.focused) {
185
- field.focused = false;
186
- AddChanges('set', `${id}.focused`, 'focused', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
187
- field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
118
+ });
119
+ field.element.on('change', (e) => {
120
+ var _a, _b;
121
+ if ((e === null || e === void 0 ? void 0 : e.complete) === field.complete) {
122
+ return;
123
+ }
124
+ field.complete = e === null || e === void 0 ? void 0 : e.complete;
125
+ field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.complete`, {
188
126
  detail: {
189
- focused: false,
127
+ completed: e === null || e === void 0 ? void 0 : e.complete,
190
128
  },
191
129
  }));
192
- }
130
+ if (field.complete) {
131
+ if (field.error) {
132
+ field.error = undefined;
133
+ AddChanges('set', `${id}.error`, 'error', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
134
+ }
135
+ if (details.options.autofocus) { //Focus next if any
136
+ let index = details.fields.indexOf(field);
137
+ if (index != -1 && index < (details.fields.length - 1)) {
138
+ let nextField = details.fields[index + 1];
139
+ if (nextField.element) {
140
+ nextField.element.focus();
141
+ }
142
+ else if ('focus' in nextField.mount && typeof nextField.mount.focus === 'function') {
143
+ nextField.mount.focus();
144
+ }
145
+ }
146
+ else if (details.specialMounts.submit) {
147
+ details.specialMounts.submit.focus();
148
+ }
149
+ }
150
+ }
151
+ else if ((e === null || e === void 0 ? void 0 : e.error) && e.error.message !== field.error) {
152
+ field.error = e.error.message;
153
+ AddChanges('set', `${id}.error`, 'error', (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes);
154
+ field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
155
+ detail: {
156
+ message: e.error.message,
157
+ },
158
+ }));
159
+ }
160
+ details.onChange();
161
+ });
162
+ field.element.on('focus', () => {
163
+ var _a;
164
+ if (!field.focused) {
165
+ field.focused = true;
166
+ AddChanges('set', `${id}.focused`, 'focused', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
167
+ field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
168
+ detail: {
169
+ focused: true,
170
+ },
171
+ }));
172
+ }
173
+ });
174
+ field.element.on('blur', () => {
175
+ var _a;
176
+ if (field.focused) {
177
+ field.focused = false;
178
+ AddChanges('set', `${id}.focused`, 'focused', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
179
+ field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
180
+ detail: {
181
+ focused: false,
182
+ },
183
+ }));
184
+ }
185
+ });
193
186
  });
194
- return;
195
187
  }
196
188
  let stripeInstance = null, elements = null, backlog = new Array(), init = () => {
197
189
  EvaluateLater({ componentId, contextElement, expression })((value) => {
@@ -230,6 +222,31 @@ export const StripeDirectiveHandler = CreateDirectiveHandlerCallback(StripeDirec
230
222
  }
231
223
  };
232
224
  let details = { fields, specialMounts, options,
225
+ addField(key, target, callback) {
226
+ let add = () => {
227
+ var _a, _b;
228
+ let field = {
229
+ name: key,
230
+ mount: target,
231
+ element: elements.create(StripeKeys[key], {
232
+ style: (StripeStyles || undefined),
233
+ classes: (StripeClasses || undefined),
234
+ }),
235
+ ready: false,
236
+ complete: false,
237
+ error: undefined,
238
+ };
239
+ field.element.mount(target);
240
+ this.fields.push(field);
241
+ (_b = (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementScope(target)) === null || _b === void 0 ? void 0 : _b.AddUninitCallback(() => {
242
+ var _a;
243
+ (_a = field.element) === null || _a === void 0 ? void 0 : _a.destroy();
244
+ this.fields = this.fields.filter(item => (item !== field));
245
+ });
246
+ callback(field, this);
247
+ };
248
+ elements ? add() : backlog.push(add);
249
+ },
233
250
  onReady: () => { var _a; return AddChanges('set', `${id}.readyCount`, 'readyCount', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes); },
234
251
  onChange: () => {
235
252
  var _a;
@@ -387,9 +404,9 @@ export const StripeDirectiveHandler = CreateDirectiveHandlerCallback(StripeDirec
387
404
  };
388
405
  }
389
406
  if (prop === 'setup') {
390
- return (clientSecret, paymentMethod, save = false) => {
407
+ return (clientSecret, paymentMethod) => {
391
408
  payOrSetup(() => {
392
- let paymentDetails = getPaymentDetails(paymentMethod, save);
409
+ let paymentDetails = getPaymentDetails(paymentMethod, false);
393
410
  if (paymentDetails) {
394
411
  stripeInstance === null || stripeInstance === void 0 ? void 0 : stripeInstance.confirmCardSetup(clientSecret, paymentDetails).then(onSuccess).catch(onError);
395
412
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@benbraide/inlinejs-stripe",
3
- "version": "1.0.4",
3
+ "version": "1.0.7",
4
4
  "description": "Run javascript code by embedding them in your HTML using the element as context.",
5
5
  "main": "./lib/common/index.js",
6
6
  "module": "./lib/esm/index.js",
@@ -52,7 +52,7 @@
52
52
  "webpack": "^5.41.0"
53
53
  },
54
54
  "dependencies": {
55
- "@benbraide/inlinejs": "^1.0.19",
55
+ "@benbraide/inlinejs": "^1.0.23",
56
56
  "webpack-cli": "^4.7.2"
57
57
  }
58
58
  }