@odus/checkout 0.30.0-beta.1 → 0.30.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/checkout.es.js +561 -479
- package/dist/elements.es.js +12 -21
- package/dist/package.json +11 -1
- package/dist/shared.js +289 -292
- package/package.json +11 -1
package/dist/elements.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as a, I as m, S as y, g as C, b as g, A as E, F as k, i as z, a as c, f as N, J as
|
|
1
|
+
import { n as a, I as m, S as y, g as C, b as g, A as E, F as k, i as z, a as c, f as N, J as P, E as S, m as x, P as F, h as R, y as A, o as V, p as M, j as B } from "./shared.js";
|
|
2
2
|
const l = ".form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}", h = ".input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}", u = ".input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}", I = ":host{--odus-font-family: system-ui, sans-serif;--odus-font-size: 16px;--odus-color-error: #dc2727;--odus-color-text: #1a1a1a;--odus-color-background: #ffffff;--odus-border-color: #e0e0e0;--odus-border-radius: 6px;--odus-spacing-sm: 8px;--odus-spacing-md: 16px;--odus-spacing-lg: 24px;--odus-input-height: 44px;--odus-input-padding: 8px 12px;--odus-input-font-size: var(--odus-font-size);--odus-input-font-weight: 400;--odus-input-letter-spacing: .02em;--odus-input-line-height: 1.5;--odus-input-placeholder-color: #717173;--odus-input-placeholder-opacity: .3;--odus-input-focus-shadow: 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3);--odus-label-font-size: 14px;--odus-label-font-weight: 400;--odus-label-color: var(--odus-color-text);--odus-label-letter-spacing: normal;--odus-label-line-height: 1.4;--odus-label-margin-bottom: 6px;--odus-card-gap: 12px;--odus-button-height: 48px;--odus-button-border-radius: var(--odus-border-radius)}.form-input{opacity:1;font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:var( --odus-input-focus-shadow, 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3) );position:relative;z-index:2}.input-label{font-family:var(--odus-font-family, inherit)!important;font-size:var(--odus-label-font-size, 14px)!important;font-weight:var(--odus-label-font-weight, 400)!important;color:var(--odus-label-color, var(--odus-color-text, #1a1a1a))!important;letter-spacing:var(--odus-label-letter-spacing, normal)!important;line-height:var(--odus-label-line-height, 1.4)!important;margin-bottom:var(--odus-label-margin-bottom, 6px)!important}.form-helper-text{font-family:var(--odus-font-family, inherit)!important}";
|
|
3
3
|
class d {
|
|
4
4
|
shadowRoot = null;
|
|
@@ -336,30 +336,21 @@ class D extends d {
|
|
|
336
336
|
_country = "";
|
|
337
337
|
_input = null;
|
|
338
338
|
_select = null;
|
|
339
|
-
_allowedStates;
|
|
340
|
-
setStates(e) {
|
|
341
|
-
this._allowedStates = e.length > 0 ? e : void 0, this._value && this._allowedStates && !this._allowedStates.includes(this._value) && (this._value = "", this.emit("change", this._value)), this.shadowRoot && this.render();
|
|
342
|
-
}
|
|
343
339
|
setCountry(e) {
|
|
344
340
|
const t = this._country;
|
|
345
341
|
if (this._country = e, !this.shadowRoot) return;
|
|
346
342
|
const r = b.has(t), o = b.has(e);
|
|
347
343
|
if (r && o && t !== e) {
|
|
348
344
|
const { t: s } = a(), i = e, p = s(i === "US" ? "address.chooseState" : "address.chooseProvince");
|
|
349
|
-
this._select?.setOptions(
|
|
350
|
-
g(this._allowedStates, i),
|
|
351
|
-
p
|
|
352
|
-
), this._value = "";
|
|
345
|
+
this._select?.setOptions(g(i), p), this._value = "";
|
|
353
346
|
return;
|
|
354
347
|
}
|
|
355
348
|
r !== o && (this._value = "", this.render());
|
|
356
349
|
}
|
|
357
350
|
render() {
|
|
358
351
|
if (!this.shadowRoot) return;
|
|
359
|
-
this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null
|
|
360
|
-
|
|
361
|
-
if (this._allowedStates || e) {
|
|
362
|
-
const t = e ? this._country : "US";
|
|
352
|
+
if (this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null, b.has(this._country)) {
|
|
353
|
+
const t = this._country;
|
|
363
354
|
this._renderSelect(t);
|
|
364
355
|
} else
|
|
365
356
|
this._renderInput();
|
|
@@ -381,7 +372,7 @@ class D extends d {
|
|
|
381
372
|
}), this.shadowRoot.appendChild(this._input.getElement());
|
|
382
373
|
}
|
|
383
374
|
_renderSelect(e) {
|
|
384
|
-
const { t } = a(), r = g(
|
|
375
|
+
const { t } = a(), r = g(e), o = t(e === "US" ? "address.chooseState" : "address.chooseProvince");
|
|
385
376
|
this._select = new y({
|
|
386
377
|
name: "billingAddress.state",
|
|
387
378
|
label: t("address.state"),
|
|
@@ -572,7 +563,7 @@ class Z extends d {
|
|
|
572
563
|
return this._error;
|
|
573
564
|
}
|
|
574
565
|
}
|
|
575
|
-
const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}",
|
|
566
|
+
const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}", Q = {
|
|
576
567
|
name: "odus-elements",
|
|
577
568
|
styles: {
|
|
578
569
|
fontSize: 14,
|
|
@@ -597,7 +588,7 @@ const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-butt
|
|
|
597
588
|
},
|
|
598
589
|
additionalPaymentMethods: {}
|
|
599
590
|
};
|
|
600
|
-
class
|
|
591
|
+
class U extends d {
|
|
601
592
|
_paymentContext = null;
|
|
602
593
|
_applePayData = null;
|
|
603
594
|
_authorized = !1;
|
|
@@ -620,7 +611,7 @@ class Q extends d {
|
|
|
620
611
|
onAuthorize: w
|
|
621
612
|
} = this._paymentContext;
|
|
622
613
|
i?.length && o?.countryCode && !i.map((f) => f.toUpperCase()).includes(o.countryCode.toUpperCase()) || (this._button = new E({
|
|
623
|
-
checkoutProfile:
|
|
614
|
+
checkoutProfile: Q,
|
|
624
615
|
paymentId: e,
|
|
625
616
|
checkoutKey: t,
|
|
626
617
|
environment: r,
|
|
@@ -790,7 +781,7 @@ class Y extends d {
|
|
|
790
781
|
};
|
|
791
782
|
}
|
|
792
783
|
getPayload() {
|
|
793
|
-
const e = this._environment === "live" ? H : J, t = new
|
|
784
|
+
const e = this._environment === "live" ? H : J, t = new P();
|
|
794
785
|
t.setPublicKey(e);
|
|
795
786
|
const r = this._cardNumber.replace(/\s+/g, ""), o = this._cardExpiry.replace(/\s+/g, "").split("/"), s = o[0] ?? "";
|
|
796
787
|
let i = o[1] ?? "";
|
|
@@ -948,7 +939,7 @@ class ee extends d {
|
|
|
948
939
|
if (!this.shadowRoot) return;
|
|
949
940
|
this._field?.getElement().remove(), this.options.initialValue && !this._email && (this._email = String(this.options.initialValue));
|
|
950
941
|
const { t: e } = a();
|
|
951
|
-
this._field = new
|
|
942
|
+
this._field = new S({
|
|
952
943
|
value: this._email,
|
|
953
944
|
error: !1,
|
|
954
945
|
checkoutProfile: $,
|
|
@@ -1259,7 +1250,7 @@ class ue {
|
|
|
1259
1250
|
});
|
|
1260
1251
|
const r = {};
|
|
1261
1252
|
Object.defineProperty(r, "applePay", {
|
|
1262
|
-
get: () => (this._applePay || (this._applePay = new
|
|
1253
|
+
get: () => (this._applePay || (this._applePay = new U(), this._trackElement(this._applePay), this._paymentState.paymentId && this._paymentState.checkoutKey && this._applePay.setPaymentContext({
|
|
1263
1254
|
paymentId: this._paymentState.paymentId,
|
|
1264
1255
|
checkoutKey: this._paymentState.checkoutKey,
|
|
1265
1256
|
environment: this._config.environment,
|
|
@@ -1489,7 +1480,7 @@ export {
|
|
|
1489
1480
|
D as AddressStateElement,
|
|
1490
1481
|
O as AddressStreetElement,
|
|
1491
1482
|
Z as AddressZipCodeElement,
|
|
1492
|
-
|
|
1483
|
+
U as ApplePayElement,
|
|
1493
1484
|
d as BaseElement,
|
|
1494
1485
|
Y as CardElement,
|
|
1495
1486
|
X as CardholderElement,
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odus/checkout",
|
|
3
|
-
"version": "0.30.0-beta.
|
|
3
|
+
"version": "0.30.0-beta.2",
|
|
4
4
|
"displayName": "Odus Checkout SDK",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"odus",
|
|
@@ -106,6 +106,16 @@
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
},
|
|
109
|
+
"typecheck": {
|
|
110
|
+
"executor": "nx:run-commands",
|
|
111
|
+
"dependsOn": [
|
|
112
|
+
"^typecheck"
|
|
113
|
+
],
|
|
114
|
+
"options": {
|
|
115
|
+
"command": "tsc --build --emitDeclarationOnly",
|
|
116
|
+
"cwd": "libs/checkout"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
109
119
|
"vite:typecheck": {
|
|
110
120
|
"executor": "nx:noop"
|
|
111
121
|
}
|