@kiva/kv-components 10.8.0 → 10.9.0

package/dist/vue/KvCheckoutLightbox.script.js

@@ -0,0 +1,168 @@
+import { toRefs as C, ref as p, computed as t } from "vue";
+import E from "./KvButton.js";
+import L from "./KvCheckbox.js";
+import U from "./KvLightbox.js";
+import A from "./KvTextInput.js";
+const R = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, x = "I have read and agree to the Terms of Use and Privacy Policy", f = "Receive email updates from Kiva (including borrower updates and promos). You can unsubscribe anytime.", q = {
+  name: "KvCheckoutLightbox",
+  components: {
+    KvButton: E,
+    KvCheckbox: L,
+    KvLightbox: U,
+    KvTextInput: A
+  },
+  props: {
+    /**
+     * Whether the lightbox is shown.
+     */
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The host is still preparing what is being paid for: the `loading` slot shows instead of
+     * the form and the lightbox cannot be dismissed.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Keep the lightbox from being dismissed. It is already locked while loading or paying.
+     */
+    preventClose: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: "Finalize your impact"
+    },
+    /**
+     * A signed-in lender skips the guest fields.
+     */
+    isLoggedIn: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The amounts are known. Until then the submit stays disabled and the "covered" note is hidden.
+     */
+    totalsLoaded: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Something is still owed: the `payment` slot and the disclaimer show, and the submit waits
+     * for `paymentReady`.
+     */
+    depositRequired: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The payment method in the `payment` slot is ready to be charged.
+     */
+    paymentReady: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The host is carrying out the submit: the button shows its loading state and the lightbox
+     * cannot be dismissed.
+     */
+    paying: {
+      type: Boolean,
+      default: !1
+    },
+    submitLabel: {
+      type: String,
+      default: "Submit my contribution"
+    },
+    /**
+     * Origin of the legal pages linked from the terms checkbox.
+     */
+    appUri: {
+      type: String,
+      default: "https://www.kiva.org"
+    },
+    /**
+     * Analytics callback: (category, action, label, property, value).
+     */
+    kvTrackFunction: {
+      type: Function,
+      default: () => {
+      }
+    },
+    category: {
+      type: String,
+      default: "basket"
+    },
+    /**
+     * Prefix for the guest email input id, so two lightboxes on a page do not share one.
+     */
+    idPrefix: {
+      type: String,
+      default: "kv-checkout"
+    },
+    /**
+     * Guest fields, each a v-model: `v-model:email`, `v-model:terms-agreement`,
+     * `v-model:email-updates`.
+     */
+    email: {
+      type: String,
+      default: ""
+    },
+    termsAgreement: {
+      type: Boolean,
+      default: !1
+    },
+    emailUpdates: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "lightbox-closed",
+    /**
+     * The form is valid and the lender pressed submit; the host carries out the checkout.
+     */
+    "submit",
+    "update:email",
+    "update:termsAgreement",
+    "update:emailUpdates"
+  ],
+  setup(a, { emit: o }) {
+    const {
+      isLoggedIn: l,
+      totalsLoaded: c,
+      depositRequired: g,
+      paymentReady: v,
+      paying: s,
+      email: y,
+      termsAgreement: u
+    } = C(a), n = (e, T, S, B) => {
+      a.kvTrackFunction(a.category, e, T, S, B);
+    }, i = p(!1), r = p(!1), d = t(() => R.test(y.value.trim())), m = t(() => l.value || d.value && u.value), b = t(() => !l.value && i.value && !d.value), h = t(() => !l.value && r.value && !u.value), k = t(() => !c.value || g.value && !v.value || !m.value ? "disabled" : s.value ? "loading" : "");
+    return {
+      emailTouched: i,
+      emailUpdatesCopy: f,
+      onEmailUpdatesChange: (e) => {
+        o("update:emailUpdates", e), n("click", "marketing-updates", f, e ? 1 : 0);
+      },
+      onSubmit: () => {
+        s.value || (i.value = !0, r.value = !0, m.value && o("submit"));
+      },
+      onTermsChange: (e) => {
+        o("update:termsAgreement", e), n("click", "terms-of-use", x, e ? 1 : 0);
+      },
+      showEmailError: b,
+      showTermsError: h,
+      submitState: k,
+      track: n
+    };
+  }
+};
+export {
+  q as default
+};