@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/pages/resetverificationcode.vue

@@ -0,0 +1,163 @@
+<template>
+  <banner pageTitle="verification code" />
+
+  <div
+    class="mx-10 flex flex-col items-center justify-center py-10 font-body text-base 2xl:text-xl"
+  >
+    <h2
+      class="text-2xl px-4 py-4 font-body s:text-4xl font-bold text-primaryColor text-center max-w-[400px] sm:max-w-[600px]"
+    >
+      We have sent a verification code to your email address
+    </h2>
+
+    <div class="flex gap-4 flex-col">
+      <div class="flex gap-2 s:gap-4 justify-center">
+        <input
+          v-for="(digit, index) in code"
+          :key="index"
+          v-model="code[index]"
+          ref="inputs"
+          type="text"
+          maxlength="1"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          :aria-label="`Digit ${index + 1}`"
+          class="osi-input osi-otp"
+          @input="handleInput(index)"
+          @keydown.backspace="handleBackspace(index, $event)"
+          :disabled="index > 0 && !code[index - 1]"
+        />
+      </div>
+      <div>
+        <p class="text-primaryColor text-center text-sm">
+          Didn't receive code?
+          <button type="button" class="osi-btn osi-btn--text osi-verify-resend" @click="resendCode">
+            Resend it
+          </button>
+        </p>
+      </div>
+    </div>
+    <button
+      type="button"
+      class="osi-btn osi-verify-submit"
+      :disabled="isLoading"
+      :aria-busy="isLoading"
+      @click="submitCode"
+    >
+      <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true" />
+      <span>Submit</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import AuthenticationService from "../services/Authentication/AuthenticationService";
+import { authBus } from "../services/AuthBus";
+import { eventBus } from "../utils/eventBus";
+import { useToast } from "vue-toastification";
+import FadeLoader from "vue-spinner/src/FadeLoader.vue";
+
+export default {
+  components: {
+    FadeLoader,
+    banner,
+  },
+  data() {
+    return {
+      code: ["", "", "", ""],
+      email: this.$route.query.email || "",
+      errorMessage: "",
+      isLoading: false,
+      formData: {
+        profile: {
+          checkpoint: 0,
+        },
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.inputs[0].focus();
+    });
+  },
+
+  methods: {
+    handleInput(index) {
+      this.code[index] = this.code[index].replace(/\D/g, "");
+
+      if (this.code[index] && index < this.code.length - 1) {
+        this.$nextTick(() => {
+          this.$refs.inputs[index + 1].focus();
+        });
+      }
+    },
+    handleBackspace(index, event) {
+      if (!this.code[index] && index > 0) {
+        this.$nextTick(() => {
+          this.$refs.inputs[index - 1].focus();
+        });
+      }
+    },
+
+    async resendCode() {
+      const toast = useToast();
+      this.code = ["", "", "", ""];
+      this.$nextTick(() => {
+        this.$refs.inputs[0].focus();
+      });
+      try {
+        const response = await AuthenticationService.resendVerificationCode(
+          this.email
+        );
+        toast.success("Verification code resent");
+      } catch (error) {
+        //console.log(error);
+      if (Array.isArray(error?.data?.code)) {
+  this.errorMessage = error.data.code[0];
+} else {
+  this.errorMessage = "Something went wrong. Please try again.";
+}
+      }
+    },
+    async submitCode() {
+      const toast = useToast();
+      this.errorMessage = "";
+      if (this.code.includes("")) {
+        toast.error("Please complete the verification code.");
+        return;
+      }
+      this.isLoading = true;
+
+      try {
+        this.$router.push({
+          path: "/resetpassword",
+          query: { email: this.email, code: this.code.join("") },
+        });
+      } catch (error) {
+        this.isLoading = false;
+        //console.log(error);
+       if (Array.isArray(error?.data?.code)) {
+  toast.error(error.data.code[0]);
+  this.errorMessage = error.data.code[0];
+} else {
+  toast.error("Something went wrong. Please try again.");
+}
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.osi-verify-submit {
+  margin-top: 2.5rem;
+  --btn-tt: uppercase;
+}
+.osi-verify-resend {
+  --btn-fw: 600;
+  --btn-fg: currentColor;
+}
+</style>

package/app/pages/result.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="min-h-[60vh] flex items-center justify-center px-5 py-16 font-body">
+    <div class="w-full max-w-md bg-white p-8 text-center">
+      <!-- CHECKING -->
+      <template v-if="state === 'checking'">
+        <div class="flex justify-center mb-6">
+          <div class="payment-dots" role="status" aria-label="Confirming payment">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+        <h1 class="text-lg font-semibold text-primaryColor">
+          Confirming your payment
+        </h1>
+        <p class="text-sm text-gray-500 mt-2">
+          This only takes a moment. Please don't close this page.
+        </p>
+      </template>
+
+      <!-- PAID -->
+      <template v-else-if="state === 'paid'">
+        <div class="flex justify-center mb-5">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-14 h-14 text-primaryColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+            />
+          </svg>
+        </div>
+        <h1 class="text-lg font-semibold text-primaryColor">Payment received</h1>
+        <p v-if="orderNumber" class="text-sm text-gray-500 mt-2">
+          Order #{{ orderNumber }} is confirmed. A receipt is on its way to your
+          inbox.
+        </p>
+        <p v-else class="text-sm text-gray-500 mt-2">
+          Your order is confirmed. A receipt is on its way to your inbox.
+        </p>
+        <NuxtLink
+          :to="orderLink"
+          class="osi-btn osi-btn--block mt-6"
+        >
+          View your order
+        </NuxtLink>
+      </template>
+
+      <!-- FAILED -->
+      <template v-else>
+        <div class="flex justify-center mb-5">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-14 h-14 text-red-600"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+            />
+          </svg>
+        </div>
+        <h1 class="text-lg font-semibold text-primaryColor">
+          Payment not completed
+        </h1>
+        <p class="text-sm text-gray-500 mt-2">
+          {{ reason || "We could not confirm this payment." }}
+        </p>
+        <p class="text-xs text-gray-400 mt-2">
+          Your bag is still here — nothing was charged.
+        </p>
+        <NuxtLink
+          to="/checkout"
+          class="osi-btn osi-btn--block mt-6"
+        >
+          Back to checkout
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import paymentServices from "#osi/services/PaymentServices";
+
+definePageMeta({
+  name: "payment-result",
+});
+
+const route = useRoute();
+const { store } = useStorefront();
+const { clear: clearCart } = useCart();
+const storeName = computed(() => store.value?.name || "");
+
+useHead({
+  title: computed(() =>
+    storeName.value ? `Payment | ${storeName.value}` : "Payment",
+  ),
+  meta: [{ name: "robots", content: "noindex, nofollow" }],
+});
+
+const state = ref("checking"); 
+const orderNumber = ref(null);
+const orderId = ref(null);
+const reason = ref("");
+
+const orderLink = computed(() => {
+  const query = { placed: "1" };
+  if (orderId.value) query.id = orderId.value;
+  return { path: "/order-detail", query };
+});
+
+onMounted(async () => {
+  // ?status= came from our own redirect and could have been typed by hand.
+  // It is decoration. The server decides.
+  const reference = route.query.reference || paymentServices.getReference();
+
+  if (!reference) {
+    state.value = "failed";
+    reason.value = "No payment reference.";
+    return;
+  }
+
+  try {
+    // /verify/ is idempotent. Poll: the buyer can beat the gateway back here
+    // and a pending payment settles a moment later.
+    for (let i = 0; i < 5; i++) {
+      const data = await paymentServices.verify(reference);
+      if (data?.order_number) orderNumber.value = data.order_number;
+      if (data?.reason) reason.value = data.reason;
+      if (data?.order_id) {
+        orderId.value = data.order_id;
+        sessionStorage.setItem("orderId", data.order_id);
+      }
+
+      if (data?.paid) {
+        state.value = "paid";
+        break;
+      }
+      if (i < 4) await new Promise((r) => setTimeout(r, 1500));
+    }
+    if (state.value !== "paid") state.value = "failed";
+  } catch (error) {
+    state.value = "failed";
+    reason.value = error?.data?.detail || "We could not confirm this payment.";
+  } finally {
+    if (state.value === "paid") {
+      // The one and only place a card order clears the bag. clearCart()
+      // drops the cart token and resets the shared state, so the drawer and
+      // the header badge empty with it.
+      paymentServices.clearReference();
+      clearCart();
+    }
+  }
+});
+</script>
+<style scoped>
+.payment-dots {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  height: 20px; /* reserves space so the jump doesn't shift layout */
+}
+
+.payment-dots span {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: currentColor;
+  color: theme("colors.primaryColor", #000);
+  animation: jump 0.9s ease-in-out infinite;
+}
+
+.payment-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.payment-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes jump {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  30% {
+    transform: translateY(-8px);
+    opacity: 1;
+  }
+}
+</style>

package/app/pages/return-policy.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <banner pageTitle="Return and Exchange Policy" />
+
+    <div class="flex justify-center items-center">
+      <div
+        class="w-full max-w-[1800px] flex flex-col gap-5 py-10 md:py-20 px-4 sm:px-8"
+      >
+        <template v-if="!htmlContent.return_exchange">
+          <div v-for="n in 3" :key="n" class="flex flex-col gap-2">
+            <Skeletor :height="'20px'" :width="'40%'" />
+            <Skeletor :height="'12px'" :width="'100%'" />
+            <Skeletor :height="'12px'" :width="'90%'" />
+            <Skeletor :height="'12px'" :width="'95%'" />
+          </div>
+        </template>
+
+        <div
+          v-else
+          v-html="htmlContent.return_exchange"
+          class="font-body"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import policiesServices from "../services/PoliciesServices";
+import "vue-skeletor/dist/vue-skeletor.css";
+import { Skeletor } from "vue-skeletor";
+
+export default {
+  components: {
+    banner,
+    Skeletor,
+  },
+  data() {
+    return {
+      htmlContent: {},
+    };
+  },
+  async mounted() {
+    this.htmlContent = await policiesServices.getPolicies();
+  },
+};
+</script>
+
+<style></style>

package/app/pages/search.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { useRenderContext } from "#osi/composables/useRenderContext";
+
+/**
+ * Search results — /search?q=…
+ *
+ * Same shape as every theme-driven route: ask the backend which template
+ * serves the path (SEARCH), publish the payload, render its sections — like
+ * Shopify, the page is sections: "Search" (SEARCH_HEADER: title and search
+ * box), "Search results" (MAIN_SEARCH: the Toolbar and Product grid blocks) and
+ * whatever the merchant puts around or between them.
+ *
+ * Fallback: when /search doesn't resolve to a SEARCH template (a backend that
+ * doesn't route it yet), or the template is empty (an older theme), the
+ * default two sections are drawn. A template with sections is trusted as is —
+ * hidden Search results stay hidden.
+ *
+ * The query only changes what MAIN_SEARCH fetches, so the template is rendered
+ * once per path, not per search.
+ */
+const defaultSections = () => [
+  {
+    key: "search-header",
+    type: "SEARCH_HEADER",
+    settings: { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", GAP: 16, PADDING_TOP: 40, PADDING_BOTTOM: 8 },
+    blocks: [
+      { key: "search-title", type: "SEARCH_TITLE", parent_key: "", settings: { PRESET: "H2" } },
+      { key: "search-input", type: "SEARCH_INPUT", parent_key: "", settings: {} },
+    ],
+  },
+  // Toolbar + Product grid; no Card in the grid: the standard product card.
+  {
+    key: "main-search",
+    type: "MAIN_SEARCH",
+    settings: { PADDING_TOP: 24, PADDING_BOTTOM: 72 },
+    blocks: [
+      { key: "search-toolbar", type: "CLASSIFICATION_TOOLBAR", parent_key: "", settings: { TOOLBAR_MARGIN_TOP: 0 } },
+      { key: "search-grid", type: "PRODUCT_GRID", parent_key: "", settings: { PAGINATION: "LOAD_MORE" } },
+    ],
+  },
+];
+
+const route = useRoute();
+const { render, store } = useStorefront();
+const { setRenderContext } = useRenderContext();
+
+const { data } = await useAsyncData("render:/search", () => render("/search").catch(() => null));
+
+const templateName = (payload) => {
+  const t = payload?.template;
+  return String((t && typeof t === "object" ? t.name : t) ?? "").toUpperCase();
+};
+
+/** Only a SEARCH payload counts — an unrouted /search comes back as NOT_FOUND. */
+const resolved = computed(() => {
+  const name = templateName(data.value);
+  return data.value && (!name || name === "SEARCH") ? data.value : null;
+});
+
+const payload = computed(() => {
+  const sections = resolved.value?.sections ?? [];
+  return {
+    ...(resolved.value ?? {}),
+    template: "SEARCH",
+    resource: { type: "SEARCH", id: null, name: "Search", slug: "search" },
+    sections: sections.length ? sections : defaultSections(),
+    seo: resolved.value?.seo ?? {},
+  };
+});
+
+if (import.meta.dev && !resolved.value) {
+  console.warn(
+    "[search] render() did not resolve /search to SEARCH; using the default sections. " +
+      "Add match_search() to resolve_path() to fix this at the source."
+  );
+}
+
+setRenderContext(payload.value);
+watch(payload, (value) => setRenderContext(value));
+
+/* ------------------------------------------------------------------- SEO */
+
+const terms = computed(() => String(route.query.q ?? "").trim());
+const title = computed(() =>
+  [terms.value ? `Search: ${terms.value}` : "Search", store.value?.name].filter(Boolean).join(" | ")
+);
+
+useHead({
+  title,
+  titleTemplate: (value) => value ?? "",
+  // Result pages are endless variations of the catalog: never indexed.
+  meta: [{ name: "robots", content: "noindex, follow" }],
+});
+</script>
+
+<template>
+  <div>
+    <SectionRenderer :sections="payload.sections" />
+  </div>
+</template>

package/app/pages/shipping-policy.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <banner pageTitle="Shipping Policy" />
+
+    <div class="flex justify-center items-center">
+      <div
+        class="w-full max-w-[1800px] flex flex-col gap-5 py-10 md:py-20 px-4 sm:px-8"
+      >
+        <template v-if="!htmlContent.shipping">
+          <div v-for="n in 3" :key="n" class="flex flex-col gap-2">
+            <Skeletor :height="'20px'" :width="'40%'" />
+            <Skeletor :height="'12px'" :width="'100%'" />
+            <Skeletor :height="'12px'" :width="'90%'" />
+            <Skeletor :height="'12px'" :width="'95%'" />
+          </div>
+        </template>
+
+        <div v-else v-html="htmlContent.shipping" class="font-body"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import policiesServices from "../services/PoliciesServices";
+import "vue-skeletor/dist/vue-skeletor.css";
+import { Skeletor } from "vue-skeletor";
+
+export default {
+  components: {
+    banner,
+    Skeletor,
+  },
+  data() {
+    return {
+      htmlContent: {},
+    };
+  },
+  async mounted() {
+    this.htmlContent = await policiesServices.getPolicies();
+  },
+};
+</script>
+
+<style></style>