@zonos/elements 1.3.15-alpha.3 → 1.3.16-alpha.0

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-form/zonos-address-form.js

@@ -0,0 +1,148 @@
+import { h, Host, } from "@stencil/core";
+import { translate } from "../../../../store/translationStore";
+import { isTextContainsNonLatinChars } from "../../../../utils/containsNonLatinChars";
+export class ZonosAddressForm {
+    constructor() {
+        this.onInputChange = ({ key, value, }) => {
+            this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
+        };
+        this.currentAddress = undefined;
+        this.translatedAddress = undefined;
+        this.addressType = undefined;
+        this.localAddress = this.currentAddress;
+    }
+    watchCurrentAddress() {
+        var _a, _b, _c, _d, _e, _f;
+        const { city, line1, line2, name, postal_code, state } = this.currentAddress;
+        // Update the local address when the current address changes
+        // If translated address is available, use that instead
+        this.localAddress = Object.assign(Object.assign({}, this.currentAddress), { city: ((_a = this.translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city, line1: ((_b = this.translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1, line2: ((_c = this.translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2, name: ((_d = this.translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name, postal_code: ((_e = this.translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code, state: ((_f = this.translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state });
+    }
+    componentWillLoad() {
+        this.watchCurrentAddress();
+    }
+    render() {
+        const { city, country, line1, line2, name, phone, postal_code, state } = this.localAddress;
+        const firstName = name.split(' ')[0] || '';
+        const lastName = name.split(' ')[1] || '';
+        return (h(Host, { key: '9c1ee87200d1f90e9dfac58c49aabba1777373a9', class: "zonos--address-form zonos--elements" }, h("div", { key: 'eec3416268ff2324fd751408552705086905423d', class: "zonos--title" }, h("zonos-text", { key: 'a4c254f78420dcfc712e1a83b20dd3ac9e64c460', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+            ? translate('Shipping')
+            : translate('Billing'))), h("div", { key: 'b8109545d282fb8c06a2e791c30088018d6ffec0', class: "zonos--address-group" }, h("div", { key: '833a395984cd75242e5d97697fd6566f11932d1b', class: "zonos--contact" }, h("zonos-text", { key: 'e60f574e95162aabf6465b878fc9b16c708e8029', type: "label" }, translate('Contact')), h("zonos-input", { key: '24cd24a362a1bbc76d0c91718c48ae32baa20ae6', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '84e64ef44eb3b39ac7ab542e07d7a52a95377cae', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '26621aca0d57a7fee743874b8d11af5f58c91b69', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+                key: 'name',
+                value: `${e.detail} ${lastName}`,
+            }) }), h("zonos-input", { key: '01e3e5038b4a4311dd5874a1213f936451dc300d', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+                key: 'name',
+                value: `${firstName} ${e.detail}`,
+            }) }))), h("div", { key: 'eb42dece28082ff16a453110b3208de5b44b9fdb', class: "zonos--address" }, h("zonos-text", { key: '3557122c716533be7b36a8bd395ea616a7061665', type: "label" }, translate('Address')), h("zonos-input", { key: 'bcc7d84d530f2f3a10537117eb6ef143df7cc8e2', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: '6ce78e25151a129b69b501cf768604134a395e85', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '6f7a18010e2d8131327154a31ba58544df56768c', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '48afbf7a3cbd26fddfea4f2799005a51b1c3d3c6', class: "zonos--address-row" }, h("zonos-input", { key: '6decf8c430d8d25b2c555b110009da74e0ac9e5f', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: '065e1be213d3cfec7749ab32890f96b0b484a25a', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), h("zonos-input", { key: 'a69244bf84c9fd007c9ad4aad2b6cc6d44420775', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '0bcc89de1ecc4aae8a69d74eff42dfd117ada40b', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+    }
+    static get is() { return "zonos-address-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-address-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-address-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EnteredInfo",
+                    "resolved": "{ city: string; country: CountryCode; email: string; line1: string; line2: string; name: string; phone: string; postal_code: string; state: string; }",
+                    "references": {
+                        "EnteredInfo": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::EnteredInfo"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Address to show up"
+                }
+            },
+            "translatedAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TranslatedAddressObject",
+                    "resolved": "{ line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; state?: TranslatedText | undefined; postal_code?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
+                    "references": {
+                        "TranslatedAddressObject": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::TranslatedAddressObject"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translated address"
+                }
+            },
+            "addressType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'shipping' | 'billing'",
+                    "resolved": "\"billing\" | \"shipping\"",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title for the address form"
+                },
+                "attribute": "address-type",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "localAddress": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "addressChange",
+                "name": "addressChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the address is changed"
+                },
+                "complexType": {
+                    "original": "EnteredInfo",
+                    "resolved": "{ city: string; country: CountryCode; email: string; line1: string; line2: string; name: string; phone: string; postal_code: string; state: string; }",
+                    "references": {
+                        "EnteredInfo": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::EnteredInfo"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "translatedAddress",
+                "methodName": "watchCurrentAddress"
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.css

@@ -0,0 +1,115 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--body {
+  padding: 0 24px;
+  position: relative;
+}
+:host .zonos--dialog-header {
+  margin-bottom: 32px;
+  position: sticky;
+  padding-top: 24px;
+  top: 0;
+  z-index: 11;
+  background: var(--zonos-elements-gray-0);
+}
+:host .zonos--dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+:host .zonos--group {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:host .zonos--group::-webkit-scrollbar {
+  width: 10px;
+}
+:host .zonos--group::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host .zonos--group::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host .zonos--group::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--address-display-group {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+:host .zonos--address-display-group zonos-address-display {
+  flex: 1;
+}
+:host .zonos--what-you-entered {
+  margin-bottom: 8px;
+}
+:host .zonos--address-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+:host .zonos--group-btn {
+  position: sticky;
+  padding: 24px 0;
+  bottom: 0;
+  display: flex;
+  justify-content: end;
+  background: var(--zonos-elements-gray-0);
+  z-index: 11;
+}
+:host .zonos--group-btn .zonos--button-wrapper {
+  display: flex;
+  gap: 8px;
+}
+
+:host(.mobile) .zonos--button-wrapper {
+  flex-direction: column;
+  width: 100%;
+}
+:host(.mobile) .zonos--button-wrapper zonos-button {
+  width: 100%;
+}
+:host(.mobile) .zonos--button-wrapper .zonos--cancel-btn {
+  order: 2;
+}
+:host(.mobile) .zonos--button-wrapper .zonos--update-btn {
+  order: 1;
+}