@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/components/checkout/PaymentHandoff.vue

@@ -0,0 +1,388 @@
+<!-- components/checkout/PaymentHandoff.vue -->
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
+import paymentServices from "#osi/services/PaymentServices";
+
+const MPGS_SCRIPT_ID = "mc-checkout-script";
+const MPGS_TARGET_ID = "mc-payment-content";
+
+// Unified Checkout needs TWO containers. If you only give it paymentSelection
+// it renders the button list inline and puts the card form in its own sidebar
+// overlay - which is what was happening. Supplying paymentScreen keeps every
+// screen inside this modal.
+const UC_SELECTION_ID = "uc-payment-selection";
+const UC_SCREEN_ID = "uc-payment-screen";
+
+const props = defineProps({
+  payment: { type: Object, required: true },
+  // Optional: shown in the summary strip at the top of the modal.
+  amount: { type: [String, Number], default: null },
+  currency: { type: String, default: "USD" },
+  title: { type: String, default: "Payment" },
+  // MPGS ships two Hosted Checkout builds against the same session. The
+  // versioned one (/checkout/version/NN/checkout.js) renders a summary with a
+  // "Checkout" button that opens a side panel; the legacy one
+  // (/static/checkout/checkout.min.js) renders the payment tiles inline, which
+  // is what we want inside this modal. Set false to load the backend URL
+  // verbatim.
+  inlineMpgs: { type: Boolean, default: true },
+});
+const emit = defineEmits(["error", "settled", "declined", "close"]);
+
+// The amount strip shows the store's currency symbol, not a hardcoded "$".
+const { store } = useStorefront();
+const currencySymbol = computed(
+  () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+);
+
+const error = ref("");
+// A decline is not an error: nothing broke, the bank said no. It gets its own
+// state so the modal can offer a retry instead of a dead "Close" button.
+const declined = ref("");
+const loading = ref(props.payment.flow === "CLIENT_SECRET");
+
+const isEmbedded = computed(
+  () =>
+    props.payment.flow === "HOSTED_SESSION" ||
+    props.payment.flow === "CLIENT_SECRET",
+);
+
+const subtitle = computed(() => {
+  const p = props.payment;
+  if (p.merchant_name) return p.merchant_name;
+  if (p.reference) return `Ref ${p.reference}`;
+  return "Complete your payment securely";
+});
+
+// Keep the gateway host the backend sent, but swap a versioned Hosted Checkout
+// path for the legacy build so showEmbeddedPage() renders the method tiles in
+// the container rather than a button that opens a side panel.
+function mpgsScriptUrl(url) {
+  if (!props.inlineMpgs) return url;
+  try {
+    const u = new URL(url, window.location.origin);
+    if (!/\/checkout\/version\/\d+\/checkout(\.min)?\.js$/.test(u.pathname)) {
+      return url;
+    }
+    u.pathname = "/static/checkout/checkout.min.js";
+    u.search = "";
+    return u.toString();
+  } catch {
+    return url;
+  }
+}
+
+// Appended with an error path, unlike Osina - a blocked CDN there just leaves
+// an empty box.
+function loadMpgsScript(src) {
+  return new Promise((resolve, reject) => {
+    const existing = document.getElementById(MPGS_SCRIPT_ID);
+    if (existing) {
+      // A tag being present does not mean it finished loading - a second
+      // attempt while the first is still in flight would throw on
+      // window.Checkout.
+      if (window.Checkout) return resolve();
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Could not load the payment library.")),
+        { once: true },
+      );
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = MPGS_SCRIPT_ID;
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = () =>
+      reject(new Error("Could not load the payment library."));
+    document.body.appendChild(script);
+  });
+}
+
+function loadScript(src, { globalKey, ...attrs } = {}) {
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${src}"]`);
+    if (existing && globalKey && window[globalKey]) return resolve();
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Could not load the payment library.")),
+        { once: true },
+      );
+      return;
+    }
+    const el = Object.assign(document.createElement("script"), {
+      src,
+      async: true,
+      ...attrs,
+    });
+    el.onload = resolve;
+    el.onerror = () => reject(new Error("Could not load the payment library."));
+    document.head.appendChild(el);
+  });
+}
+
+// The capture context (client_secret) is itself a JWT. Its payload carries
+// the exact library URL + integrity hash to load for this client_version -
+// Cybersource docs say to always read these from the token rather than
+// hardcoding a URL, since the asset path is versioned per release
+// (e.g. /uc/v1/assets/0.24.2/SecureAcceptance.js).
+function decodeCaptureContext(jwt) {
+  const payloadSegment = jwt.split(".")[1];
+  const base64 = payloadSegment.replace(/-/g, "+").replace(/_/g, "/");
+  const json = decodeURIComponent(
+    atob(base64)
+      .split("")
+      .map((c) => "%" + c.charCodeAt(0).toString(16).padStart(2, "0"))
+      .join(""),
+  );
+  const payload = JSON.parse(json);
+  return payload?.ctx?.[0]?.data || {};
+}
+
+function fail(message) {
+  error.value = message;
+  loading.value = false;
+  emit("error", message);
+}
+
+// The bank refused, or Cybersource refused on the bank's behalf. The order
+// exists and is unpaid, which is correct - the buyer can try again.
+function decline(reason) {
+  declined.value = reason || "Your payment was declined. Please try another card.";
+  loading.value = false;
+  emit("declined", declined.value);
+}
+
+function onKeydown(e) {
+  if (e.key === "Escape") emit("close");
+}
+
+let previousOverflow = "";
+
+onMounted(async () => {
+  previousOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  window.addEventListener("keydown", onKeydown);
+
+  const p = props.payment;
+  try {
+    // Switch on flow, never on provider. Adding a gateway stays a backend change.
+    if (p.flow === "HOSTED_SESSION") {
+      if (!p.checkout_js_url || !p.session_id) {
+        return fail("This payment could not be started. Please try again.");
+      }
+      await loadMpgsScript(mpgsScriptUrl(p.checkout_js_url));
+      await nextTick(); // #mc-payment-content must exist before configure()
+      if (!window.Checkout) {
+        return fail("The payment library did not load. Please try again.");
+      }
+      // No interaction block by default, like Osina: whatever the backend set
+      // on CREATE_CHECKOUT_SESSION is what renders. Hardcoding displayControl
+      // here is what was hiding the billing address section.
+      window.Checkout.configure({
+        session: { id: p.session_id },
+        ...(p.display_control
+          ? { interaction: { displayControl: p.display_control } }
+          : {}),
+      });
+      window.Checkout.showEmbeddedPage(`#${MPGS_TARGET_ID}`);
+    } else if (p.flow === "REDIRECT") {
+      if (!p.redirect_url) {
+        return fail("This payment could not be started. Please try again.");
+      }
+      window.location.href = p.redirect_url;
+    } else if (p.flow === "CLIENT_SECRET") {
+      // Cybersource Unified Checkout. client_secret is the capture context
+      // JWT - decode it for the versioned library URL + integrity hash.
+      if (!p.client_secret) {
+        return fail("This payment could not be started. Please try again.");
+      }
+      const ctxData = decodeCaptureContext(p.client_secret);
+      if (!ctxData.clientLibrary) {
+        return fail("This payment could not be started. Please try again.");
+      }
+      await loadScript(ctxData.clientLibrary, {
+        globalKey: "Accept",
+        integrity: ctxData.clientLibraryIntegrity,
+        crossOrigin: "anonymous",
+      });
+      await nextTick();
+      if (!window.Accept) {
+        return fail("The payment library did not load. Please try again.");
+      }
+      const accept = await window.Accept(p.client_secret);
+      // sidebar = false. Combined with a paymentScreen container below, every
+      // Unified Checkout screen renders inside this modal instead of the
+      // gateway's own right-hand overlay.
+      const unifiedPayments = await accept.unifiedPayments(false);
+      loading.value = false;
+      const transientToken = await unifiedPayments.show({
+        containers: {
+          paymentSelection: `#${UC_SELECTION_ID}`,
+          paymentScreen: `#${UC_SCREEN_ID}`,
+        },
+      });
+      // The library only tokenizes the card - the backend still has to submit
+      // transientToken to Cybersource's Payments API to actually authorize the
+      // charge before this order can be considered paid.
+      //
+      // This call returns HTTP 200 for a DECLINE as well as for a success -
+      // the outcome is in the body, not the status code. Awaiting it without
+      // reading `paid` marks an unpaid order complete, which is what an
+      // insufficient-funds card was doing.
+      const result = await paymentServices.completeClientSecretPayment(
+        p.reference,
+        transientToken,
+      );
+
+      if (!result?.paid) {
+        return decline(result?.reason);
+      }
+      emit("settled", { ...p, ...result });
+    } else if (p.flow === "OFFLINE") {
+      emit("settled", p); // already placed, nothing to hand off
+    } else {
+      fail("This payment method is not supported.");
+    }
+  } catch (e) {
+    fail(e?.data?.detail || e?.message || "We could not start this payment.");
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onKeydown);
+  document.body.style.overflow = previousOverflow;
+});
+</script>
+
+<template>
+  <Teleport defer to="body">
+    <div
+      class="fixed inset-0 z-[100] font-body flex items-center justify-center bg-black bg-opacity-50 px-4"
+      @click.self="emit('close')"
+    >
+      <div
+        class="bg-white rounded-xl shadow-2xl w-full max-w-xl max-h-[92vh] overflow-y-auto"
+      >
+        <!-- header -->
+        <div
+          class="flex items-center justify-start gap-3 px-5 sm:px-6 py-4 border-b border-gray-200"
+        >
+          <button
+            type="button"
+            class="text-gray-500 rounded-full bg-gray-100 p-2 hover:text-primaryColor shrink-0 ml-3"
+            @click="emit('close')"
+          >
+         <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 72 72" id="emoji">
+  <g id="color"/>
+  <g id="hair"/>
+  <g id="skin"/>
+  <g id="skin-shadow"/>
+  <g id="line">
+    <polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="46.1964,16.2048 26.8036,35.6651 46.1964,55.1254"/>
+  </g>
+</svg>
+          </button>
+          <div class="min-w-0">
+            <h2 class="text-lg font-semibold text-primaryColor">{{ title }}</h2>
+            <p class="text-sm text-gray-500 mt-0.5 truncate">{{ subtitle }}</p>
+          </div>
+        
+        </div>
+
+        <!-- amount strip -->
+        <div
+          v-if="amount !== null && amount !== ''"
+          class="mx-5 sm:mx-6 mt-4 bg-gray-50 rounded-lg px-4 py-3 flex justify-between items-center gap-3"
+        >
+          <div class="min-w-0">
+            <p class="text-sm font-semibold text-primaryColor">Amount due</p>
+            <p class="text-xs text-gray-500">Paid securely by card</p>
+          </div>
+          <div class="text-right shrink-0">
+            <p class="text-lg font-semibold text-primaryColor">{{ currencySymbol }}{{ amount }}</p>
+            <p class="text-xs text-gray-500">{{ currency }}</p>
+          </div>
+        </div>
+
+        <!-- body -->
+        <div class="px-5 sm:px-6 pt-4 pb-6">
+          <p
+            v-if="error"
+            class="text-sm text-red-600 bg-red-50 rounded-lg px-3 py-2 text-center"
+          >
+            {{ error }}
+          </p>
+
+          <!-- A decline ends this attempt: the transient token is single-use
+               and now spent, so retrying means a fresh checkout, not a
+               resubmit of the same form. -->
+          <div v-else-if="declined" class="py-2">
+            <p
+              class="text-sm text-red-600 bg-red-50 rounded-lg px-3 py-2 text-center"
+            >
+              {{ declined }}
+            </p>
+            <button
+              type="button"
+              class="osi-btn osi-btn--block mt-4"
+              @click="emit('close')"
+            >
+              Try another card
+            </button>
+          </div>
+
+          <p
+            v-else-if="loading"
+            class="text-sm text-gray-500 text-center py-6"
+          >
+            Loading secure payment…
+          </p>
+
+          <p
+            v-if="payment.flow === 'REDIRECT' && !error && !declined"
+            class="text-sm text-gray-500 text-center py-6"
+          >
+            Taking you to the payment page…
+          </p>
+
+          <!-- v-show, not v-if: the nodes must be in the DOM before
+               configure()/show() is called -->
+          <div
+            v-show="payment.flow === 'HOSTED_SESSION' && !error && !declined"
+            :id="MPGS_TARGET_ID"
+            class="h-fit"
+          />
+
+          <!-- Unified Checkout: button list on top, card form directly under
+               it. The list is not optional in the v0 library - the form only
+               mounts after a payment type is picked - but with paymentScreen
+               supplied it opens in place instead of the sidebar. -->
+          <div v-show="payment.flow === 'CLIENT_SECRET' && !error && !declined">
+            <div :id="UC_SELECTION_ID" />
+            <div :id="UC_SCREEN_ID" class="mt-3 h-fit" />
+          </div>
+
+          <button
+            v-if="error"
+            type="button"
+            class="osi-btn osi-btn--block mt-4"
+            @click="emit('close')"
+          >
+            Close
+          </button>
+        </div>
+
+         <div
+          class="flex items-center justify-center gap-2 px-5 sm:px-6 border-t border-gray-100"
+        >
+ <img src="https://www.netcommercepay.com/new_logo/NCseal_S.png" border="0" alt="NetCommerce Security Seal">
+        </div>
+
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/common/Banner.vue

@@ -0,0 +1,35 @@
+<template>
+  <!---->
+  <div class="w-full h-[250px] sm:h-[40vh] relative bg-primaryColor">
+    <div class="w-full h-full absolute inset-0 flex justify-center items-center z-10 pointer-events-none">
+      <p class="text-secondaryColor font-heading uppercase text-2xl s:text-4xl text-center">
+              {{pageTitle}}
+          </p>
+      </div>
+  </div>
+</template>
+
+<script>
+import { Skeletor } from "vue-skeletor";
+import "vue-skeletor/dist/vue-skeletor.css";
+
+export default {
+  props: {
+    pageTitle: {
+      type: String,
+      default: "",
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    Skeletor,
+  },
+};
+</script>
+
+<style>
+
+</style>

package/app/components/common/ConfirmDeleteModal.vue

@@ -0,0 +1,117 @@
+<template>
+    <div v-if="isVisible" 
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
+        @click.self="cancelDelete"
+    >
+ 
+   <div class="overflow-y animate-fade-in-up">
+     <div class="flex justify-center p-4 text-center items-center sm:p-0">
+      
+       <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:w-full sm:max-w-lg">
+         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+           <div class="sm:flex sm:items-start">
+             <div class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10">
+               <svg class="size-6 text-primaryColor" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+               </svg>
+             </div>
+             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+               <h3 class="text-base font-semibold text-gray-900" id="modal-title">Delete Address</h3>
+               <div class="mt-2">
+                 <p class="text-sm text-gray-500">Are you sure you want to delete this address? This action cannot be undone.</p>
+               </div>
+             </div>
+           </div>
+         </div>
+         <div class="bg-gray-50 px-4 py-3 flex flex-col gap-3 sm:flex-row-reverse sm:px-6">
+            <button
+              type="button"
+              class="osi-btn osi-btn--solid osi-btn--danger osi-btn--sm osi-confirm-btn"
+              :disabled="isLoading"
+              :aria-busy="isLoading"
+              @click="confirmDelete"
+            >
+              <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true"></span>
+              <span>Delete</span>
+            </button>
+            <button
+              type="button"
+              class="osi-btn osi-btn--secondary osi-btn--sm osi-confirm-btn"
+              :disabled="isLoading"
+              @click="cancelDelete"
+            >
+              Cancel
+            </button>
+          </div>
+       </div>
+     </div>
+   </div>
+ </div>
+   </template>
+   
+   <script>
+   export default {
+     props: {
+    isVisible: Boolean,
+    jobId: String,
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+     mounted(){
+       document.body.classList.add('overflow-hidden');
+ 
+     },
+     methods: {
+       
+       confirmDelete() {
+         this.$emit('confirm-delete', this.jobId);
+         document.body.classList.remove('overflow-hidden');
+ 
+       },
+       cancelDelete() {
+         this.$emit('cancel-delete');
+         document.body.classList.remove('overflow-hidden');
+ 
+       }
+     }
+   }
+   </script>
+   
+   <style scoped>
+@media (max-width: 639px) {
+  .osi-confirm-btn {
+    width: 100%;
+  }
+}
+
+   @keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.3s ease-out forwards;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+   </style>
+