@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/pages/user-profile/components/left-bar.vue

@@ -0,0 +1,233 @@
+<template>
+  <div
+    class="w-full flex flex-col justify-center items-center gap-5 font-body"
+  >
+    <div
+      class="flex flex-col w-full xlg1:w-[70%] shadow-md border border-gray-100 bg-gray-50"
+    >
+      <div class="w-full flex flex-col justify-center items-center pb-10 gap-5">
+        <div
+          class="w-[80px] s:w-[100px] h-[80px] s:h-[100px] rounded-full border border-gray-50 shadow-md flex justify-center items-center p-1 bg-white absolute"
+        >
+          <img
+            v-if="logoSrc"
+            :src="logoSrc"
+            :alt="store?.name || 'Logo'"
+            class="w-full object-cover"
+          />
+        </div>
+      </div>
+      <div
+        class="h-fit p-5 flex flex-col md:flex-row md:gap-10 md:justify-center items-start md:items-center"
+      >
+        <a
+          @click="selectStep('profileDetails')"
+          class="cursor-pointer w-full md:w-auto"
+        >
+          <div
+            class="w-full py-3 border-b border-gray-100 md:border-none flex justify-start items-center gap-2"
+            :class="{
+              'text-primaryColor': activeStep === 'profileDetails',
+              'text-gray-500': activeStep !== 'profileDetails',
+            }"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z"
+              />
+              <path
+                d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"
+              />
+            </svg>
+            <p>Profile Details</p>
+          </div>
+        </a>
+
+        <a
+          class="group cursor-pointer w-full md:w-auto"
+          @click="selectStep('Whishlist')"
+        >
+          <div
+            class="w-full py-3 border-b border-gray-100 md:border-none flex justify-start items-center gap-2 group-hover:text-primaryColor"
+            :class="{
+              'text-primaryColor': activeStep === 'Whishlist',
+              'text-gray-500': activeStep !== 'Whishlist',
+            }"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              class="group-hover:text-primaryColor duration-300"
+              fill="none"
+            >
+              <path
+                d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+            </svg>
+
+            <p class="duration-300">Wishlist</p>
+          </div>
+        </a>
+
+        <a
+          class="group cursor-pointer w-full md:w-auto"
+          @click="selectStep('Orders')"
+        >
+          <div
+            class="w-full py-3 border-b border-gray-100 md:border-none group-hover:text-primaryColor flex justify-start items-center gap-2"
+            :class="{
+              'text-primaryColor': activeStep === 'Orders',
+              'text-gray-500': activeStep !== 'Orders',
+            }"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              class="group-hover:text-primaryColor duration-300"
+              fill="none"
+            >
+              <path
+                d="M3.87289 17.0194L2.66933 9.83981C2.48735 8.75428 2.39637 8.21152 2.68773 7.85576C2.9791 7.5 3.51461 7.5 4.58564 7.5H19.4144C20.4854 7.5 21.0209 7.5 21.3123 7.85576C21.6036 8.21152 21.5126 8.75428 21.3307 9.83981L20.1271 17.0194C19.7282 19.3991 19.5287 20.5889 18.7143 21.2945C17.9 22 16.726 22 14.3782 22H9.62182C7.27396 22 6.10003 22 5.28565 21.2945C4.47127 20.5889 4.27181 19.3991 3.87289 17.0194Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+              />
+              <path
+                d="M17.5 7.5C17.5 4.46243 15.0376 2 12 2C8.96243 2 6.5 4.46243 6.5 7.5"
+                stroke="currentColor"
+                stroke-width="1.5"
+              />
+            </svg>
+
+            <p class="duration-300">Orders</p>
+          </div>
+        </a>
+
+        <a
+          class="group cursor-pointer w-full md:w-auto"
+          @click="selectStep('settings')"
+        >
+          <div
+            class="w-full border-b border-gray-100 md:border-none py-3 flex justify-start items-center gap-2"
+            :class="{
+              'text-primaryColor': activeStep === 'settings',
+              'text-gray-500': activeStep !== 'settings',
+            }"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="group-hover:text-primaryColor duration-300"
+              width="24"
+              height="24"
+              fill="none"
+            >
+              <path
+                d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+              />
+              <path
+                d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+            </svg>
+
+            <p class="group-hover:text-primaryColor duration-300">Settings</p>
+          </div>
+        </a>
+
+        <router-link @click="logout" class="group" to="/">
+          <div
+            class="w-full py-3 flex justify-start items-center gap-2 text-gray-500"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-gray-500 group-hover:text-primaryColor duration-300"
+              width="24"
+              height="24"
+              color="#000000"
+              fill="none"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="1.5"
+              />
+              <path
+                d="M16 12H8M16 12C16 11.2998 14.0057 9.99153 13.5 9.5M16 12C16 12.7002 14.0057 14.0085 13.5 14.5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+
+            <p class="group-hover:text-primaryColor duration-300">Logout</p>
+          </div>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { authBus } from "../../../services/AuthBus";
+import { useStorefront } from "#osi/composables/useStorefront";
+import { useMediaUrl } from "#osi/composables/useMediaUrl";
+
+export default {
+  setup() {
+    const { storeLogo, store } = useStorefront();
+    const { mediaUrl } = useMediaUrl();
+
+    const logoSrc = computed(() => mediaUrl(storeLogo.value));
+
+    return {
+      storeLogo,
+      store,
+      logoSrc,
+    };
+  },
+  props: {
+    activeStep: String,
+    user: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    async logout() {
+      await authBus.logout();
+      this.$router.push("/");
+    },
+    selectStep(step) {
+      this.$emit("select-step", step);
+    },
+  },
+};
+</script>
+
+<style></style>

package/app/pages/user-profile/components/orders.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    class="w-full xlg1:w-[70%] h-fit shadow-md bg-gray-50 px-5 pb-5 font-body"
+  >
+    <div v-if="allOrders.length">
+      <div class="w-full flex flex-col mt-5 gap-5">
+        <div
+          v-for="order in sortedOrders"
+          :key="order.id"
+          class="w-full flex bg-white flex-col py-5 px-5"
+        >
+          <div class="flex flex-col gap-5">
+            <div class="flex justify-between">
+              <div>
+                <p class="text-gray-500 uppercase text-[17px]">
+                  {{ getLatestStatus(order) || "NA" }}
+                </p>
+                <p class="text-gray-500 font-heading uppercase text-[17px]">
+                  {{ new Date(order?.purchased_at).toLocaleString() }}
+                </p>
+              </div>
+              <div
+                class="text-gray-500 cursor-pointer"
+                @click="goToOrderHistory(order?.id)"
+              >
+                Go to order
+              </div>
+            </div>
+            <div class="pb-5">
+              <p class="text-gray-500 font-bold">
+                {{ currency }}{{ order?.checkout_cart_price + order?.checkout_delivery_fees }}
+              </p>
+            </div>
+          </div>
+          <div class="w-full max-w-[1800px] grid grid-cols-2 sm:grid-cols-4">
+            <div
+              v-for="(item, index) in getCartItemsWithLink(order?.items || [])"
+              :key="index"
+              class="transition-all w-full sm:w-[200px] duration-300"
+            >
+              <component
+                :is="item.productLink ? 'RouterLink' : 'div'"
+                :to="item.productLink"
+                class="border w-full sm:w-[200px] flex border-gray-100 relative"
+              >
+                <div
+                  class="absolute top-3 right-3 bg-white h-[30px] w-[30px] p-1 border border-primaryColor flex justify-center items-center text-primaryColor"
+                >
+                  {{ item.quantity }}
+                </div>
+                <img
+                  :src="mediaUrl(item.image?.path)"
+                  :alt="item.name"
+                  class="w-full sm:w-[200px] h-[300px] object-cover"
+                />
+              </component>
+              <div class="w-full flex gap-2 p-2 justify-between items-start">
+                <div class="flex flex-col gap-2">
+                  <p class="text-gray-500 text-sm line-clamp-1">
+                    {{ item.name }}
+                  </p>
+                  <p
+                    class="text-gray-500 text-xs mt-1"
+                    v-if="item.variant_values"
+                  >
+                    {{ item.variant_values }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div class="w-full flex flex-col pt-5 justify-center items-center gap-5">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-[50%] s:w-[200px] text-primaryColor opacity-10"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+          />
+        </svg>
+        <p
+          class="text-primaryColor font-body text-xl s:text-2xl text-center"
+        >
+          You have no orders at the moment.
+        </p>
+        <div class="text-center text-gray-500">
+          <p class="font-body text-sm">You don't have any orders yet.</p>
+          <p class="font-body text-sm">
+            You will find many interesting products on the "Shopping" page.
+          </p>
+        </div>
+        <router-link to="/" class="osi-btn mb-5">Continue Shopping</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  allOrders: {
+    type: Array,
+    required: true,
+  },
+});
+
+const { mediaUrl } = useMediaUrl();
+const router = useRouter();
+const { store } = useStorefront();
+
+const currency = computed(
+  () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+);
+
+const sortedOrders = computed(() =>
+  [...props.allOrders].sort(
+    (a, b) => new Date(b.purchased_at) - new Date(a.purchased_at),
+  ),
+);
+
+const goToOrderHistory = (id) => {
+  sessionStorage.setItem("orderId", id);
+  router.push("/order-detail/");
+};
+
+const getLatestStatus = (order) => {
+  if (!order?.statuses?.length) return null;
+
+  const latest = order.statuses.reduce((latest, status) =>
+    new Date(status.date) > new Date(latest.date) ? status : latest,
+  );
+
+  return latest.status_name;
+};
+
+const getCartItemsWithLink = (items = []) => {
+  return items.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,
+    };
+  });
+};
+</script>