@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/pages/order-detail.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="font-body min-h-screen bg-gray-50">
+    <banner pageTitle="Order detail" />
+
+    <div class="max-w-[1400px] mx-auto py-10 px-4">
+      <!-- ===== SKELETON ===== -->
+      <template v-if="isLoading">
+        <div class="flex flex-col items-center justify-center mb-10 text-center">
+          <skeletor width="250px" height="32px" class="mb-2" />
+          <skeletor width="280px" height="24px" />
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          <div class="lg:col-span-3 flex flex-col gap-6">
+            <div class="bg-white p-6 shadow-sm rounded-sm border border-gray-200">
+              <skeletor width="200px" height="24px" class="mb-2" />
+              <skeletor width="100%" height="16px" class="mb-2" />
+              <skeletor width="80%" height="16px" />
+            </div>
+
+            <div class="bg-white p-6 shadow-sm rounded-sm border border-gray-200">
+              <skeletor width="180px" height="24px" class="mb-6" />
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-12">
+                <div class="flex flex-col gap-y-4">
+                  <div v-for="i in 3" :key="`sk-cust-${i}`">
+                    <skeletor width="60px" height="16px" class="mb-1" />
+                    <skeletor width="200px" height="14px" />
+                  </div>
+                </div>
+                <div>
+                  <skeletor width="140px" height="16px" class="mb-2" />
+                  <div class="space-y-2">
+                    <skeletor width="150px" height="14px" />
+                    <skeletor width="180px" height="14px" />
+                    <skeletor width="100px" height="14px" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="lg:col-span-2">
+            <div class="bg-white p-6 shadow-sm rounded-sm border border-gray-200">
+              <skeletor width="150px" height="24px" class="mb-4" />
+              <div class="space-y-3">
+                <skeletor width="100%" height="60px" />
+                <skeletor width="100%" height="60px" />
+              </div>
+              <div class="border-t border-gray-100 mt-4 pt-4 space-y-2">
+                <skeletor width="100%" height="20px" />
+                <skeletor width="100%" height="20px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ===== NOT FOUND ===== -->
+      <div
+        v-else-if="!orderData?.id"
+        class="max-w-md mx-auto bg-white p-8 text-center shadow-sm rounded-sm border border-gray-200"
+      >
+        <h1 class="text-lg font-semibold text-gray-800">Order not found</h1>
+        <p class="text-sm text-gray-500 mt-2">
+          We couldn't load this order. It may have been placed in another
+          browser or session.
+        </p>
+        <NuxtLink
+          to="/"
+          class="osi-btn osi-btn--block mt-6"
+        >
+          Continue shopping
+        </NuxtLink>
+      </div>
+
+      <!-- ===== ORDER ===== -->
+      <template v-else>
+        <!-- Confirmation framing: only right after checkout. Coming from the
+             account's order list, this is a record, not an announcement. -->
+        <div
+          v-if="placed"
+          class="flex flex-col items-center justify-center mb-10 text-center"
+        >
+          <h1 class="text-3xl font-bold text-gray-800 mb-2">
+            Thank you{{ customerFirstName ? ` ${customerFirstName}` : "" }}!
+          </h1>
+          <p class="text-gray-600 text-lg">
+            Your order is completed successfully
+          </p>
+        </div>
+        <div v-else class="mb-10">
+          <h1 class="text-2xl font-semibold text-gray-800">
+            Order
+            <span v-if="orderData.order_number">#{{ orderData.order_number }}</span>
+          </h1>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          <!-- LEFT -->
+          <div class="lg:col-span-3 flex flex-col gap-6">
+            <div
+              v-if="placed"
+              class="bg-white p-6 shadow-sm rounded-sm border border-gray-200"
+            >
+              <h2 class="text-xl font-semibold text-gray-800 mb-2">
+                Your Order is Confirmed
+              </h2>
+              <p class="text-gray-600 text-sm">
+                We have accepted your order, and we're getting it ready.
+                <template v-if="orderData.customer?.email">
+                  A confirmation mail has been sent to
+                  <span class="font-medium text-gray-800">{{
+                    orderData.customer.email
+                  }}</span>
+                </template>
+              </p>
+            </div>
+
+            <!-- Status history: the only thing this page ever showed that the
+                 old confirmation page didn't. Hidden when there's nothing but
+                 the status the order was just created with. -->
+            <div
+              v-if="sortedStatuses.length > 1 || (!placed && sortedStatuses.length)"
+              class="bg-white p-6 shadow-sm rounded-sm border border-gray-200"
+            >
+              <h2 class="text-xl font-semibold text-gray-800 mb-4">
+                Order Status History
+              </h2>
+              <div class="flex flex-col gap-4">
+                <div
+                  v-for="(status, index) in sortedStatuses"
+                  :key="index"
+                  class="border-l-4 border-primaryColor bg-gray-50 p-4 rounded-r-sm"
+                >
+                  <p class="text-sm text-gray-500 mb-1">
+                    {{ formatDate(status.date) }}
+                  </p>
+                  <p class="font-medium text-gray-800">
+                    {{ status.status_name }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Customer details -->
+            <div class="bg-white p-6 shadow-sm rounded-sm border border-gray-200">
+              <h2 class="text-xl font-semibold text-gray-800 mb-6">
+                Customer Details
+              </h2>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-12">
+                <div class="flex flex-col gap-y-4">
+                  <div>
+                    <p class="text-black font-semibold mb-1">Name</p>
+                    <p class="text-gray-600 text-sm">
+                      {{ userInfo?.first_name || orderData.customer?.first_name }}
+                      {{ userInfo?.last_name || orderData.customer?.last_name }}
+                    </p>
+                  </div>
+                  <div>
+                    <p class="text-black font-semibold mb-1">Email</p>
+                    <p class="text-gray-600 text-sm">
+                      {{ userInfo?.email || orderData.customer?.email }}
+                    </p>
+                  </div>
+                  <div
+                    v-if="userInfo?.mobile_number || orderData.customer?.mobile_number"
+                  >
+                    <p class="text-black font-semibold mb-1">Mobile</p>
+                    <p class="text-gray-600 text-sm">
+                      {{ userInfo?.mobile_number || orderData.customer?.mobile_number }}
+                    </p>
+                  </div>
+                </div>
+
+                <div>
+                  <p class="text-black font-semibold mb-2">Shipping address</p>
+                  <div class="text-gray-600 text-sm leading-relaxed">
+                    <p>{{ orderData.detailed_address }}</p>
+                    <p>
+                      {{ orderData.country }}<span
+                        v-if="orderData.zone && orderData.zone.toLowerCase() !== 'default zone'"
+                        >, {{ orderData.zone }}</span
+                      >
+                    </p>
+                    <p>{{ orderData.postal_code }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- RIGHT -->
+          <div class="lg:col-span-2">
+            <div
+              class="bg-white p-6 shadow-sm rounded-sm border border-gray-200 w-full"
+            >
+              <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-semibold text-gray-800">Order Details</h2>
+                <div v-if="currentStatus" class="flex items-center gap-2">
+                  <span class="w-2 h-2 rounded-full bg-primaryColor"></span>
+                  <span class="text-primaryColor font-medium text-sm">
+                    {{ currentStatus }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- Items -->
+              <div class="flex flex-col gap-4 mb-6">
+                <div
+                  v-for="(item, index) in cartItemsWithLink"
+                  :key="index"
+                  class="flex gap-4 items-start"
+                >
+                  <component
+                    :is="item.productLink ? 'RouterLink' : 'div'"
+                    :to="item.productLink"
+                    class="flex gap-4 items-start w-full"
+                  >
+                    <div
+                      class="relative w-16 h-16 bg-gray-100 rounded-md flex-shrink-0 border border-gray-200"
+                    >
+                      <div
+                        class="absolute top-0 right-0 bg-gray-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full shadow-sm translate-x-1/2 -translate-y-1/2 z-10"
+                      >
+                        {{ item.quantity }}
+                      </div>
+                      <div class="w-full h-full overflow-hidden rounded-md">
+                        <img
+                          :src="mediaUrl(item.image)"
+                          class="w-full h-full object-cover"
+                          :alt="item.name"
+                        />
+                      </div>
+                    </div>
+
+                    <div class="flex-1 min-w-0 flex justify-between items-start">
+                      <div>
+                        <p class="text-gray-800 font-medium text-sm truncate pr-2">
+                          {{ item.name }}
+                        </p>
+                        <p v-if="item.variant_values" class="text-gray-500 text-xs mt-1">
+                          {{ item.variant_values }}
+                        </p>
+                      </div>
+                      <p class="text-gray-800 font-medium text-sm whitespace-nowrap">
+                        {{ currency }}{{ item.checkout_price }}
+                      </p>
+                    </div>
+                  </component>
+                </div>
+              </div>
+
+              <!-- Totals -->
+              <div class="border-t border-gray-100 pt-4 space-y-3 text-sm">
+                <div class="flex justify-between text-gray-600">
+                  <span>Cart Total</span>
+                  <span class="font-medium text-gray-800">
+                    {{ currency }}{{ orderData.checkout_cart_price }}
+                  </span>
+                </div>
+
+                <div class="flex justify-between text-gray-600">
+                  <span>Shipping</span>
+                  <span v-if="orderData.freedelivery" class="font-medium text-green-500">
+                    Free
+                  </span>
+                  <span v-else class="font-medium text-gray-800">
+                    {{ currency }}{{ orderData.checkout_delivery_fees }}
+                  </span>
+                </div>
+
+                <div
+                  v-if="orderData?.promocode"
+                  class="flex justify-between text-green-500"
+                >
+                  <span>Promocode Applied: {{ orderData?.promocode?.code }}</span>
+                  <span class="font-medium">
+                    {{ Number(orderData?.promocode?.discount_value) }}
+                    {{ orderData?.promocode?.discount_type === "Percentage" ? "%" : currency }}
+                    Off
+                  </span>
+                </div>
+
+                <div v-if="orderData?.extra_fees?.length" class="flex flex-col gap-3">
+                  <div
+                    v-for="fee in orderData.extra_fees"
+                    :key="fee.id"
+                    class="flex justify-between items-start gap-10 text-gray-600"
+                  >
+                    <div class="flex items-center gap-2 min-w-0">
+                      <img
+                        v-if="fee.extra_fee?.logo?.path"
+                        :src="mediaUrl(fee.extra_fee.logo)"
+                        :alt="fee.beneficiary || fee.name"
+                        class="w-5 h-5 rounded-full object-cover flex-shrink-0 border border-gray-200"
+                      />
+                      <div class="min-w-0">
+                        <p class="truncate" :title="fee.name">{{ fee.name }}</p>
+                        <p
+                          v-if="fee.beneficiary"
+                          class="text-xs text-gray-400 truncate"
+                          :title="fee.beneficiary"
+                        >
+                          {{ fee.beneficiary }}
+                        </p>
+                      </div>
+                    </div>
+                    <span
+                      class="font-medium text-gray-800 whitespace-nowrap flex-shrink-0"
+                    >
+                      {{ currency }}{{ fee.customer_amount }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="flex justify-between text-gray-600">
+                  <span>Payment method</span>
+                  <span class="font-medium text-gray-800 text-right">
+                    {{ orderData?.order_payments?.[0]?.method_name || "N/A" }}
+                  </span>
+                </div>
+              </div>
+
+              <div
+                class="border-t border-gray-100 mt-4 pt-4 flex justify-between items-center"
+              >
+                <span class="text-black font-bold text-lg">Total</span>
+                <span class="text-black font-bold text-lg">
+                  {{ currency }}{{ orderData.checkout_order_total }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Banner as banner } from "#components";
+import checkoutServices from "#osi/services/CheckoutServices";
+import { authBus } from "#osi/services/AuthBus";
+import { Skeletor } from "vue-skeletor";
+import "vue-skeletor/dist/vue-skeletor.css";
+import { ref, computed, onMounted } from "vue";
+
+
+definePageMeta({
+  name: "order-detail",
+  alias: ["/ordersummary"],
+});
+
+const route = useRoute();
+const { store } = useStorefront();
+const { mediaUrl } = useMediaUrl();
+const storeName = computed(() => store.value?.name || "");
+const currency = computed(
+  () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+);
+
+useHead({
+  title: computed(() =>
+    storeName.value ? `Your order` : "Your order",
+  ),
+  meta: [{ name: "robots", content: "noindex, nofollow" }],
+});
+
+const cartItems = ref([]);
+const orderData = ref({});
+const order_id = ref(null);
+const isLoading = ref(true);
+
+const placed = computed(() => route.query.placed === "1");
+const userInfo = computed(() => authBus.userInfo);
+
+const customerFirstName = computed(
+  () => orderData.value?.customer?.first_name || userInfo.value?.first_name || "",
+);
+
+const sortedStatuses = computed(() =>
+  [...(orderData.value?.statuses || [])].sort(
+    (a, b) => new Date(b.date) - new Date(a.date),
+  ),
+);
+
+const currentStatus = computed(() => sortedStatuses.value[0]?.status_name || "");
+
+const cartItemsWithLink = computed(() =>
+  cartItems.value.map((item) => {
+    const product = item?.product?.product;
+    const categorySlug = product?.categories?.[0]?.category?.slugified_name;
+    const productSlug = product?.slugified_name;
+
+    return {
+      ...item,
+      productLink:
+        categorySlug && productSlug ? `/${categorySlug}/${productSlug}` : null,
+    };
+  }),
+);
+
+function formatDate(dateString) {
+  if (!dateString) return "";
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+onMounted(async () => {
+  await authBus.checkAuth();
+
+  const orderId =
+    route.query.id ||
+    (typeof window !== "undefined" ? sessionStorage.getItem("orderId") : null);
+
+  order_id.value = orderId;
+
+  if (!orderId) {
+    isLoading.value = false;
+    return;
+  }
+
+  try {
+    const response = await checkoutServices.getOrder(orderId);
+    orderData.value = response;
+    cartItems.value = response?.items || [];
+  } catch (error) {
+    console.error("[order-detail] Error loading order:", error);
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+<style scoped>
+button:hover {
+  opacity: 0.8;
+}
+</style>

package/app/pages/pages/[handle].vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <SectionRenderer v-if="data?.sections?.length" :sections="data.sections" />
+
+    <div v-else-if="!error" class="osi-empty">
+      <p>This page hasn't been set up yet.</p>
+    </div>
+
+    <div v-else class="osi-empty">
+      <p>We couldn't load this page.</p>
+      <pre v-if="isDev" class="osi-empty-detail">{{ error.message }}</pre>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useRenderContext } from '#osi/composables/useRenderContext';
+
+const route = useRoute();
+const { render, store } = useStorefront();
+const { setRenderContext, resource } = useRenderContext();
+
+const { data, error } = await useAsyncData(
+  `render:${route.path}`,
+  () => render(route.path)
+);
+
+if (error.value?.status === 404) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
+}
+
+setRenderContext(data.value);
+watch(data, (payload) => setRenderContext(payload));
+
+const isDev = import.meta.dev;
+
+const seo = computed(() => data.value?.seo ?? {});
+const origin = useRequestURL().origin;
+
+useHead({
+  title: () => seo.value.title_full ?? seo.value.title ?? resource.value?.name ?? store.value?.name ?? '',
+  titleTemplate: (title) => title ?? '',
+  meta: () => [
+    { name: 'description', content: seo.value.description ?? undefined },
+    { property: 'og:title', content: seo.value.title_full ?? seo.value.title ?? undefined },
+    { property: 'og:description', content: seo.value.description ?? undefined },
+    { property: 'og:image', content: seo.value.image ?? undefined },
+    { name: 'robots', content: seo.value.no_index ? 'noindex, nofollow' : 'index, follow' },
+  ],
+  link: () => seo.value.canonical_path
+    ? [{ rel: 'canonical', href: `${origin}${seo.value.canonical_path}` }]
+    : [],
+});
+</script>
+
+<style scoped>
+.osi-empty { padding: 6rem 1rem; text-align: center; color: var(--osi-text); opacity: 0.7; }
+.osi-empty-detail { margin-top: 1rem; font-size: 12px; white-space: pre-wrap; }
+</style>

package/app/pages/privacy-policy.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <banner pageTitle="privacy 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.privacy">
+          <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.privacy" 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/resetpassword.vue

@@ -0,0 +1,138 @@
+<template>
+  <banner pageTitle="Reset password" />
+
+  <div class="osi-auth-wrap font-body">
+    <form class="osi-auth-card" novalidate @submit.prevent="submitForm">
+      <p class="osi-auth-title">Enter your new password</p>
+
+      <div class="osi-auth-stack">
+        <OsiField
+          v-model="formData.password"
+          id="reset-password"
+          label="New Password"
+          type="password"
+          autocomplete="new-password"
+          required
+          :error="errors.password"
+          @input="clearError('password')"
+        />
+
+        <button
+          type="submit"
+          class="osi-btn osi-btn--block osi-auth-submit"
+          :disabled="isLoading"
+          :aria-busy="isLoading"
+        >
+          <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true" />
+          <span>Submit</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import { OsiField } from "#components";
+import AuthenticationService from "../services/Authentication/AuthenticationService";
+import { useToast } from "vue-toastification";
+
+export default {
+  components: {
+    OsiField,
+    banner,
+  },
+  data() {
+    return {
+      isLoading: false,
+      formData: {
+        email: "",
+        code: "",
+        password: "",
+      },
+      errors: {
+        password: false,
+      },
+    };
+  },
+  mounted() {
+    // Extract email and code from query parameters
+    const query = this.$route.query;
+    if (query.email) this.formData.email = query.email;
+    if (query.code) this.formData.code = query.code;
+  },
+  methods: {
+    async submitForm() {
+      this.errors = {}; // Clear previous errors
+      const toast = useToast();
+      if (!this.formData.password) {
+        this.errors.password = "Password is required.";
+        return;
+      }
+
+      try {
+        this.isLoading = true;
+        // Send request to reset password
+        await AuthenticationService.resetPassword(
+          this.formData.email,
+          this.formData.code,
+          this.formData.password
+        );
+        toast.success("Password changed!");
+        this.$router.push("/login");
+      } catch (error) {
+        this.isLoading = false;
+
+        console.error(error);
+        const toast = useToast();
+
+        // Extract errors from the response
+const errorData = error?.data || {};
+        let errorMessages = [];
+
+        // Loop through the errors object and format them
+        for (const key in errorData) {
+          if (Array.isArray(errorData[key])) {
+            errorMessages.push(`• ${errorData[key].join("\n• ")}`);
+          }
+        }
+
+        // Show all errors in the toast
+        if (errorMessages.length > 0) {
+          toast.error(errorMessages.join("\n"));
+        } else {
+          toast.error("Something went wrong. Try again.");
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    clearError(field) {
+      this.errors[field] = null;
+      this.errors.general = null;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.osi-auth-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 2.5rem 1.25rem;
+}
+@media (min-width: 768px) {
+  .osi-auth-wrap {
+    padding-block: 5rem;
+  }
+}
+.osi-auth-title {
+  margin: 0 0 1.25rem;
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 1.3;
+}
+.osi-auth-submit {
+  margin-top: 0.5rem;
+}
+</style>