@zonos/elements 1.0.16

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.css

@@ -0,0 +1,162 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+: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--hello-country-flag {
+  height: 18px;
+  width: 18px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 30px;
+  box-shadow: var(--amino-v3-shadow-medium);
+  z-index: 10;
+  justify-self: center;
+}
+:host .zonos--hello-dialog {
+  position: absolute;
+  background: var(--amino-surface-color);
+  width: 100vw;
+  max-width: 430px;
+  height: fit-content;
+  max-height: 600px;
+  border-radius: var(--amino-radius-12);
+  outline: none;
+  box-shadow: var(--amino-v3-shadow-xxl);
+  overflow-y: auto;
+  top: -2px;
+  right: -2px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transform: scale(0);
+  transform-origin: top right;
+  text-align: center;
+  z-index: 1001;
+}
+:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left {
+  transform-origin: top left;
+  right: unset;
+  left: -2px;
+}
+:host .zonos--hello-dialog::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+:host .zonos--hello-dialog::-webkit-scrollbar-track {
+  background: #f5f5f5;
+  border-top-right-radius: var(--amino-radius-12);
+  border-bottom-right-radius: var(--amino-radius-12);
+}
+:host .zonos--hello-dialog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #ccc;
+  border: 4px solid transparent;
+  background-clip: content-box;
+}
+:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+:host .zonos--hello-dialog .zonos--animate-content {
+  opacity: 0;
+  height: 0;
+  transition: all 0.3s ease-in-out;
+}
+:host .zonos--hello-dialog .zonos--show-animate-content {
+  opacity: 1;
+  height: 100%;
+}
+:host .zonos--hello-dialog.zonos--hello-dialog-open {
+  opacity: 1;
+  transform: scale(1);
+}
+:host .zonos--hello-dialog .zonos--close-button {
+  position: absolute;
+  right: var(--amino-space-8);
+  top: var(--amino-space-8);
+  width: var(--amino-size-md);
+  height: var(--amino-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+}
+:host .zonos--hello-dialog .zonos--close-button:hover {
+  background: var(--amino-hover-color);
+  border-radius: var(--amino-radius-6);
+}
+:host .zonos--hello-dialog .zonos--hello-dialog-content {
+  padding: var(--amino-space-16);
+}
+:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag {
+  border-radius: var(--amino-radius-4);
+  width: 32px;
+  height: 24px;
+}
+:host .zonos--hello-dialog .zonos--flex-message {
+  display: flex;
+  align-items: center;
+  gap: var(--amino-space-8);
+}
+:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override {
+  position: sticky;
+  top: unset;
+  left: unset;
+  right: unset;
+  bottom: 0;
+  width: 100vw;
+  max-width: 100vw;
+  max-height: unset;
+  height: fit-content;
+  transform-origin: bottom;
+  transform: scaleY(0);
+  border-radius: 0;
+}
+:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open {
+  opacity: 1;
+  transform: scaleY(1);
+}
+@media (max-width: 768px) {
+  :host .zonos--hello-dialog {
+    position: sticky;
+    top: unset;
+    left: unset;
+    right: unset;
+    bottom: 0;
+    width: 100vw;
+    max-width: 100vw;
+    max-height: unset;
+    height: fit-content;
+    transform-origin: bottom;
+    transform: scaleY(0);
+    border-radius: 0;
+  }
+  :host .zonos--hello-dialog.zonos--hello-dialog-open {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -0,0 +1,255 @@
+import { h, Host, } from "@stencil/core";
+import { localizationStore } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
+import { zonosStore } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { currencyConvertAndFormat } from "../../utils/hello/currencyConversion/currencyConvertAndFormat";
+import { getHasMoreSpaceOnRight } from "../../utils/hello/getHasMoreSpaceOnRight";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import BagIcon from "./assets/bagIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import MessageIcon from "./assets/messageIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import MoneyIcon from "./assets/moneyIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./assets/removeIcon.svg";
+export class ZonosHelloDialog {
+  constructor() {
+    this.clickOutsideDialogHandler = (e) => {
+      if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
+        this.setIsOpen(false);
+      }
+    };
+    this.getCurrentPageEnum = () => {
+      switch (zonosStore.currentHelloPage) {
+        case 'home':
+          return 'hello_homepage';
+        case 'cart':
+          return 'hello_cart';
+        case 'productList':
+          return 'hello_item_list';
+        case 'productDetail':
+          return 'hello_item_details';
+        default:
+          return null;
+      }
+    };
+    this.setShowCountrySelect = async (value) => {
+      this.showCountrySelect = value;
+    };
+    this.isOpen = false;
+    this.setIsOpen = () => { };
+    this.mobileLocationOverride = undefined;
+    this.animateFromLeftOverride = undefined;
+    this.appearanceSettings = undefined;
+    this.welcomeMessage = 'Welcome to our Demo App!';
+    this.showCountrySelect = false;
+  }
+  globalClickHandler(e) {
+    this.clickOutsideDialogHandler(e);
+  }
+  isOpenHandler(isOpen) {
+    if (!isOpen) {
+      void this.setShowCountrySelect(false);
+    }
+  }
+  render() {
+    var _a;
+    const { countryLandedCost, selectedCountryCode } = localizationStore;
+    // Our Robby API spells deminimis wrong here
+    const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
+      ? currencyConvertAndFormat(countryLandedCost.dutyDeminimus)
+      : null;
+    // If deminimis is undefined or null, assume it's $0
+    const dutyDeMinimisMessage = dutyDeminimis
+      ? `${translate('Spend')} ${dutyDeminimis} ${translate('duty free')}`
+      : translate('Duties will apply to all orders');
+    // Our Robby API spells deminimis wrong here
+    const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
+      ? currencyConvertAndFormat(countryLandedCost.vatTaxDeminimus)
+      : null;
+    const taxDeMinimisMessage = taxDeminimis
+      ? `${translate('Spend')} ${taxDeminimis} ${translate('tax free')}`
+      : translate('Taxes will apply to all orders');
+    const animateLeft = this.animateFromLeftOverride ||
+      (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
+    const { customMessages } = localizationStore;
+    const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
+    const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+      translate('Know about duties and taxes before you buy. Shop with confidence!');
+    const currentPage = this.getCurrentPageEnum();
+    const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
+    return (h(Host, { class: "zonos--elements" }, h("div", { "aria-hidden": "true", class: classes([
+        'zonos--hello-dialog',
+        animateLeft && 'zonos--hello-dialog-animate-from-left',
+        !!this.mobileLocationOverride &&
+          'zonos--hello-dialog-mobile-override',
+        this.isOpen && 'zonos--hello-dialog-open',
+      ]), ref: el => el && (this.dialogRef = el) }, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 8 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));
+  }
+  static get is() { return "zonos-hello-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-hello-dialog.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-hello-dialog.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the dialog is open"
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "setIsOpen": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(isOpen: boolean) => void",
+          "resolved": "(isOpen: boolean) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "() => {}"
+            }],
+          "text": "The function to set the open state"
+        },
+        "defaultValue": "() => {}"
+      },
+      "mobileLocationOverride": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HelloMobileLocation",
+          "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
+          "references": {
+            "HelloMobileLocation": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::HelloMobileLocation"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Force mobile styling instead of media query and use the passed location value"
+        },
+        "attribute": "mobile-location-override",
+        "reflect": false
+      },
+      "animateFromLeftOverride": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Force left animation instead of detecting which side has more space"
+        },
+        "attribute": "animate-from-left-override",
+        "reflect": false
+      },
+      "appearanceSettings": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<AppearanceConfig>",
+          "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+          "references": {
+            "Partial": {
+              "location": "global",
+              "id": "global::Partial"
+            },
+            "AppearanceConfig": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::AppearanceConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Override the appearance settings"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "welcomeMessage": {},
+      "showCountrySelect": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeDialog",
+        "name": "closeDialog",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Close dialog button click"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "isOpen",
+        "methodName": "isOpenHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "globalClickHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=zonos-hello-dialog.js.map

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-hello-dialog.js","sourceRoot":"","sources":["../../../../src/components/hello/zonos-hello-dialog/zonos-hello-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { currencyConvertAndFormat } from 'src/components/utils/hello/currencyConversion/currencyConvertAndFormat';\nimport { getHasMoreSpaceOnRight } from 'src/components/utils/hello/getHasMoreSpaceOnRight';\nimport type { AppearanceConfig, HelloMobileLocation } from 'src/types';\nimport type { Locale_PageName_Enum } from 'src/types/generated/graphql.frontend.types';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport BagIcon from './assets/bagIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MessageIcon from './assets/messageIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MoneyIcon from './assets/moneyIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/removeIcon.svg';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-hello-dialog.scss',\n  tag: 'zonos-hello-dialog',\n})\nexport class ZonosHelloDialog {\n  /**\n   * Whether or not the dialog is open\n   */\n  @Prop() isOpen: boolean = false;\n\n  /**\n   * The function to set the open state\n   * @default () => {}\n   */\n  @Prop() setIsOpen: (isOpen: boolean) => void = () => {};\n\n  /**\n   * Force mobile styling instead of media query and use the passed location value\n   * @default false\n   */\n  @Prop() mobileLocationOverride?: HelloMobileLocation;\n  /**\n   * Force left animation instead of detecting which side has more space\n   * @default false\n   */\n  @Prop() animateFromLeftOverride?: boolean;\n  /**\n   * Override the appearance settings\n   */\n  @Prop() appearanceSettings?: Partial<AppearanceConfig>;\n\n  @State() welcomeMessage: string = 'Welcome to our Demo App!';\n  @State() showCountrySelect: boolean = false;\n\n  /**\n   * Close dialog button click\n   */\n  @Event() closeDialog!: EventEmitter<void>;\n\n  private dialogRef!: HTMLDivElement;\n\n  private clickOutsideDialogHandler = (e: MouseEvent) => {\n    if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {\n      this.setIsOpen(false);\n    }\n  };\n\n  private getCurrentPageEnum = (): Locale_PageName_Enum | null => {\n    switch (zonosStore.currentHelloPage) {\n      case 'home':\n        return 'hello_homepage';\n      case 'cart':\n        return 'hello_cart';\n      case 'productList':\n        return 'hello_item_list';\n      case 'productDetail':\n        return 'hello_item_details';\n\n      default:\n        return null;\n    }\n  };\n\n  private setShowCountrySelect = async (value: boolean) => {\n    this.showCountrySelect = value;\n  };\n\n  @Listen('click', { target: 'document' })\n  globalClickHandler(e: MouseEvent) {\n    this.clickOutsideDialogHandler(e);\n  }\n\n  @Watch('isOpen')\n  isOpenHandler(isOpen: boolean) {\n    if (!isOpen) {\n      void this.setShowCountrySelect(false);\n    }\n  }\n\n  render() {\n    const { countryLandedCost, selectedCountryCode } = localizationStore;\n\n    // Our Robby API spells deminimis wrong here\n    const dutyDeminimis = countryLandedCost?.dutyDeminimus\n      ? currencyConvertAndFormat(countryLandedCost.dutyDeminimus)\n      : null;\n    // If deminimis is undefined or null, assume it's $0\n    const dutyDeMinimisMessage = dutyDeminimis\n      ? `${translate('Spend')} ${dutyDeminimis} ${translate('duty free')}`\n      : translate('Duties will apply to all orders');\n\n    // Our Robby API spells deminimis wrong here\n    const taxDeminimis = countryLandedCost?.vatTaxDeminimus\n      ? currencyConvertAndFormat(countryLandedCost.vatTaxDeminimus)\n      : null;\n    const taxDeMinimisMessage = taxDeminimis\n      ? `${translate('Spend')} ${taxDeminimis} ${translate('tax free')}`\n      : translate('Taxes will apply to all orders');\n\n    const animateLeft =\n      this.animateFromLeftOverride ||\n      (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));\n\n    const { customMessages } = localizationStore;\n    const welcomeMessage = `${translate('Welcome to')} ${\n      zonosStore.organizationName\n    }!`;\n    const defaultMessage =\n      customMessages.find(x => x.pageName === 'hello_default')?.message ||\n      translate(\n        'Know about duties and taxes before you buy. Shop with confidence!',\n      );\n\n    const currentPage = this.getCurrentPageEnum();\n    const filteredMessages = customMessages.filter(\n      x => x.pageName === currentPage,\n    );\n\n    return (\n      <Host class=\"zonos--elements\">\n        <div\n          aria-hidden=\"true\"\n          class={classes([\n            'zonos--hello-dialog',\n            animateLeft && 'zonos--hello-dialog-animate-from-left',\n            !!this.mobileLocationOverride &&\n              'zonos--hello-dialog-mobile-override',\n            this.isOpen && 'zonos--hello-dialog-open',\n          ])}\n          ref={el => el && (this.dialogRef = el)}\n        >\n          <div class=\"zonos--hello-dialog-content\">\n            <zonos-button\n              class=\"zonos--close-button\"\n              icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n              noBackground\n              onClick={() => this.setIsOpen(false)}\n            ></zonos-button>\n\n            {this.showCountrySelect ? (\n              <div>\n                <zonos-country-select\n                  closeCountrySelect={() => this.setShowCountrySelect(false)}\n                ></zonos-country-select>\n              </div>\n            ) : (\n              <div>\n                <zonos-v-stack spacing={24}>\n                  <zonos-country-flag\n                    class=\"zonos--hello-country-flag\"\n                    countryCode={selectedCountryCode}\n                  ></zonos-country-flag>\n\n                  <zonos-v-stack spacing={4}>\n                    <zonos-text type=\"boldSubheader\">\n                      {welcomeMessage}\n                    </zonos-text>\n                    <zonos-text color=\"gray-800\">{defaultMessage}</zonos-text>\n                  </zonos-v-stack>\n\n                  <zonos-v-stack spacing={8}>\n                    <zonos-card spacing=\"12px\">\n                      <zonos-v-stack spacing={8}>\n                        <div class=\"zonos--flex-message\">\n                          <zonos-icon content={BagIcon}></zonos-icon>\n                          <zonos-text>{dutyDeMinimisMessage}</zonos-text>\n                        </div>\n\n                        <div class=\"zonos--flex-message\">\n                          <zonos-icon content={MoneyIcon}></zonos-icon>\n                          <zonos-text>{taxDeMinimisMessage}</zonos-text>\n                        </div>\n                      </zonos-v-stack>\n                    </zonos-card>\n\n                    {filteredMessages.map(x => (\n                      <zonos-custom-message\n                        icon={MessageIcon}\n                        message={x.message}\n                      ></zonos-custom-message>\n                    ))}\n                  </zonos-v-stack>\n                </zonos-v-stack>\n              </div>\n            )}\n          </div>\n\n          {!this.showCountrySelect && (\n            <zonos-hello-dialog-footer\n              appearanceSettings={this.appearanceSettings}\n              setShowCountrySelect={value => this.setShowCountrySelect(value)}\n            ></zonos-hello-dialog-footer>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/main/zonos-controller.css

@@ -0,0 +1,34 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+: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 {
+  visibility: hidden;
+  opacity: 0;
+  height: 0;
+}