@osimart/create-storefront 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,194 @@
+<template>
+  <div
+    class="osi-settings-card w-full xlg1:w-[70%] h-fit shadow-md bg-gray-50 flex justify-center items-center p-5 font-body"
+  >
+    <form
+      novalidate
+      class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative"
+      @submit.prevent="changePassword"
+    >
+      <div class="w-full s:w-[550px] h-fit flex flex-col gap-5 p-5 s:p-9">
+        <p class="text-primaryColor text-center font-body text-xl">
+          Change Password
+        </p>
+
+        <OsiField
+          v-model="currentPassword"
+          id="currentPassword"
+          label="Current Password"
+          type="password"
+          autocomplete="current-password"
+          :error="errors.currentPassword"
+          @input="clearError('currentPassword')"
+        />
+
+        <OsiField
+          v-model="newPassword"
+          id="newPassword"
+          label="New Password"
+          type="password"
+          autocomplete="new-password"
+          :error="errors.newPassword"
+          @input="validatePasswordMatch"
+        />
+
+        <OsiField
+          v-model="confirmPassword"
+          id="confirmPassword"
+          label="Confirm New Password"
+          type="password"
+          autocomplete="new-password"
+          :error="errors.confirmPassword"
+          @input="validatePasswordMatch"
+        />
+
+        <button
+          type="submit"
+          class="osi-btn osi-settings-submit"
+          :disabled="isLoading"
+          :aria-busy="isLoading"
+        >
+          <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true" />
+          <span>Change Password</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import AuthenticationService from "../../../services/Authentication/AuthenticationService";
+import { useToast } from "vue-toastification";
+import { OsiField } from "#components";
+export default {
+  components: {
+    OsiField,
+  },
+  data() {
+    return {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+      isLoading: false,
+      errors: {
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+      },
+    };
+  },
+  methods: {
+    validatePasswordMatch() {
+      this.clearError("newPassword");
+      this.clearError("confirmPassword");
+
+      if (this.newPassword && this.confirmPassword) {
+        if (this.newPassword !== this.confirmPassword) {
+          this.errors.confirmPassword = "Passwords do not match";
+        } else {
+          this.errors.confirmPassword = "";
+        }
+      }
+    },
+
+    clearError(field) {
+      this.errors[field] = "";
+    },
+
+    validateForm() {
+      let isValid = true;
+
+      this.errors = {
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+      };
+
+      if (!this.currentPassword) {
+        this.errors.currentPassword = "Current Password is required";
+        isValid = false;
+      }
+      if (!this.newPassword) {
+        this.errors.newPassword = "New Password is required";
+        isValid = false;
+      }
+      if (!this.confirmPassword) {
+        this.errors.confirmPassword = "Confirm Password is required";
+        isValid = false;
+      } else if (this.newPassword !== this.confirmPassword) {
+        this.errors.confirmPassword = "Passwords do not match";
+        isValid = false;
+      }
+
+      return isValid;
+    },
+
+    async changePassword() {
+      const toast = useToast();
+
+      if (!this.validateForm()) return;
+
+      const formData = {
+        old_password: this.currentPassword,
+        new_password: this.newPassword,
+      };
+
+      //console.log(formData);
+
+      try {
+        this.isLoading = true;
+        const response = await AuthenticationService.changePassword(formData);
+        toast.success("Password changed successfully");
+        //console.log(response);
+
+        // Reset form fields on success
+        this.currentPassword = "";
+        this.newPassword = "";
+        this.confirmPassword = "";
+     } catch (error) {
+  this.isLoading = false;
+  if (error?.data && typeof error.data === 'object') {
+    this.handleApiErrors(error.data);
+  } else {
+    toast.error(error?.message || "An unexpected error occurred.");
+  }
+} finally {
+  this.isLoading = false;
+}
+    },
+
+    // Method to format and display errors in toast
+    handleApiErrors(errors) {
+      const toast = useToast();
+      let formattedErrors = [];
+
+      for (const key in errors) {
+        if (Array.isArray(errors[key])) {
+          errors[key].forEach((message) => {
+            formattedErrors.push(`• ${message}`);
+          });
+        }
+      }
+
+      if (formattedErrors.length) {
+        toast.error(formattedErrors.join("\n"));
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.osi-settings-card {
+  --osi-field-chip: #f9fafb;
+}
+.osi-settings-submit {
+  align-self: center;
+  margin-top: 0.75rem;
+}
+@media (max-width: 479px) {
+  .osi-settings-submit {
+    align-self: stretch;
+  }
+}
+</style>

package/app/pages/user-profile/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <banner pageTitle="user details" />
+    <div class="w-full flex justify-center items-center">
+      <div
+        class="w-full flex flex-col justify-center items-center max-w-[1800px] pt-20 pb-10 md:py-20 px-5 md:px-9 gap-5"
+      >
+        <div
+          v-if="isLoading"
+          class="w-full xlg1:w-[70%] shadow-md border border-gray-100 bg-gray-50 flex flex-col gap-5"
+        >
+          <!-- Profile Card Skeleton -->
+          <div
+            class="w-full pb-10 flex flex-col justify-center items-center gap-5"
+          >
+            <div
+              class="rounded-full shadow-md flex justify-center items-center absolute"
+            >
+              <Skeletor
+                type="circle"
+                width="100"
+                height="100"
+                class="rounded-full"
+              />
+            </div>
+          </div>
+
+          <!-- Sidebar Links Skeleton -->
+          <div
+            class="h-fit p-5 flex flex-col sm:flex-row sm:gap-5 md:gap-10 sm:justify-center items-start sm:items-center"
+          >
+            <div
+              v-for="i in 5"
+              :key="i"
+              class="w-full py-3 flex items-center gap-2"
+            >
+              <Skeletor type="text" height="20" width="100%" />
+            </div>
+          </div>
+        </div>
+        <leftBar
+          v-else
+          :user="userData"
+          :activeStep="currentStepComponent"
+          @select-step="changeStep"
+        />
+
+        <div v-if="isLoading" class="w-full xlg1:w-[70%] flex flex-col gap-5">
+          <!-- User Information Section Skeleton -->
+          <div
+            class="grid grid-cols-1 s:grid-cols-2 gap-x-5 gap-y-8 h-fit border border-gray-100 shadow-md p-5 bg-gray-50"
+          >
+            <div v-for="i in 4" :key="i" class="flex flex-col gap-2">
+              <Skeletor height="20px" width="120px" class="rounded" />
+              <Skeletor
+                height="48px"
+                width="100%"
+                class="rounded-none border"
+              />
+            </div>
+          </div>
+
+          <!-- Addresses Section Skeleton -->
+          <div
+            class="w-full h-fit border border-gray-100 shadow-md p-5 bg-gray-50"
+          >
+            <div class="w-full flex justify-between items-center gap-3">
+              <Skeletor height="24px" width="150px" />
+              <Skeletor height="30px" width="30px" class="rounded-md" />
+            </div>
+            <div class="w-full grid grid-cols-1 s:grid-cols-2 mt-5 gap-3">
+              <div
+                v-for="i in 2"
+                :key="i"
+                class="h-[200px] bg-gray-100 shadow-sm flex flex-col justify-between p-3"
+              >
+                <div
+                  class="w-full text-gray-500 text-sm s:text-base grid gap-2"
+                >
+                  <!-- Country -->
+                  <div class="flex items-center gap-2">
+                    <Skeletor height="16px" width="50px" />
+                    <Skeletor height="16px" width="150px" />
+                  </div>
+                  <!-- Zone -->
+                  <div class="flex items-center gap-2">
+                    <Skeletor height="16px" width="50px" />
+                    <Skeletor height="16px" width="150px" />
+                  </div>
+                  <!-- Address -->
+                  <div class="flex items-center gap-2">
+                    <Skeletor height="16px" width="50px" />
+                    <Skeletor height="16px" width="150px" />
+                  </div>
+                  <!-- Zip Code -->
+                  <div class="flex items-center gap-2">
+                    <Skeletor height="16px" width="50px" />
+                    <Skeletor height="16px" width="150px" />
+                  </div>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="flex gap-3">
+                  <Skeletor height="24px" width="90px" />
+                  <Skeletor height="24px" width="90px" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <keep-alive v-else>
+          <component
+            :is="currentStepComponent"
+            ref="currentFormComponent"
+            :user="userData"
+            :addresses="userAddresses"
+            :wishlistItems="wishlistItems"
+            :countries="countries"
+            :allOrders="allOrders"
+            @add-address="openAddAddressModal"
+            @update-wishlist="updateWishlist"
+            @edit-address="openEditAddressModal"
+            @address-added="fetchUserInfo"
+          />
+        </keep-alive>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import leftBar from "./components/left-bar.vue";
+import profileDetails from "./components/profile-details.vue";
+import settings from "./components/settings.vue";
+import { authBus } from "../../services/AuthBus";
+import Whishlist from "./components/Whishlist.vue";
+import Orders from "./components/orders.vue";
+import utilsServices from "../../services/UtilsServices";
+import UserServices from "../../services/UserServices";
+import WishlistServices from "../../services/WishlistServices";
+import "vue-skeletor/dist/vue-skeletor.css";
+import { Skeletor } from "vue-skeletor";
+definePageMeta({
+  middleware: ["auth"],
+});
+export default {
+  components: {
+    banner,
+    leftBar,
+    profileDetails,
+    settings,
+    Whishlist,
+    Orders,
+    Skeletor,
+  },
+  data() {
+    return {
+      countries: [],
+      zones: [],
+      steps: ["profileDetails", "Whishlist", "Orders", "settings"],
+      isLoading: true,
+      currentStepIndex: 0,
+      userData: {
+        firstName: "John",
+        lastName: "Doe",
+        email: "john.doe@example.com",
+        phoneNumber: "+1234567890",
+      },
+      userAddresses: [
+        {
+          id: 1,
+          type: "Residential",
+          address: "123 Main Street, Springfield",
+        },
+        {
+          id: 2,
+          type: "Company",
+          address: "456 Business Ave, Metropolis",
+        },
+      ],
+      wishlistItems: [],
+      allOrders: [],
+    };
+  },
+  methods: {
+    updateWishlist(updatedWishlist) {
+      // Update the parent state with the new wishlist
+      this.wishlistItems = updatedWishlist;
+    },
+    changeStep(selectedStep) {
+      this.currentStepIndex = this.steps.indexOf(selectedStep);
+    },
+    openAddAddressModal() {
+      //console.log("Open Add Address Modal");
+    },
+    openEditAddressModal(id) {
+      //console.log("Edit Address Modal for ID:", id);
+    },
+    async fetchUserInfo() {
+      try {
+        const response = await UserServices.getUserDetail();
+        this.userData = await response;
+        //console.log(this.userData)
+      } catch (error) {
+        console.error("Error fetching user info:", error);
+      }
+    },
+    async fetchOrders() {
+      try {
+        const response = await UserServices.getUserOrders();
+        this.allOrders = await response;
+        //console.log(this.allOrders);
+      } catch (error) {
+        //console.log("Error fetching orders:", error);
+      }
+    },
+    async fetchWishlisted() {
+      try {
+        const response = await WishlistServices.getWishlists();
+        this.wishlistItems = await response;
+        //console.log(this.wishlistItems)
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  async mounted() {
+    try {
+      await Promise.all([
+        this.fetchUserInfo(),
+        this.fetchOrders(),
+        this.fetchWishlisted(),
+        utilsServices.getCountries().then((result) => {
+          this.countries = result;
+        }),
+      ]);
+    } catch (error) {
+      console.error("Error loading data:", error);
+    } finally {
+      this.isLoading = false;
+    }
+  },
+  computed: {
+    currentStepComponent() {
+      return this.steps[this.currentStepIndex];
+    },
+  },
+};
+</script>
+
+<style></style>

package/app/pages/verificationcode.vue

@@ -0,0 +1,188 @@
+<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
+          v-if="errorMessage"
+          class="text-primaryColor text-sm font-semibold text-center mb-2"
+        >
+          {{ errorMessage }}
+        </div> -->
+      <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";
+import { getDeviceInfo } from "#osi/utils/device";
+import CartServices from "#osi/services/CartServices";
+
+export default {
+  components: {
+    FadeLoader,
+    banner,
+  },
+  data() {
+    return {
+      code: ["", "", "", ""],
+      email: "",
+      errorMessage: "",
+      isLoading: false,
+      formData: {
+        profile: {
+          checkpoint: 0,
+        },
+      },
+    };
+  },
+  created() {
+    this.email = this.$route.query.email || "";
+  },
+  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 {
+              const deviceInfo = getDeviceInfo();
+        const response = await AuthenticationService.verificationCode(
+          this.email,
+          this.code.join(""),
+  deviceInfo,
+        );
+        toast.success("You have successfully signed into your account!");
+        authBus.checkAuth();
+          // merge guest cart into the newly-verified account
+    try {
+      await CartServices.mergeCart();
+    } catch (mergeError) {
+      console.error("Cart merge failed:", mergeError);
+      // don't block the verification success flow on a merge failure
+    }
+        eventBus.emit("cartUpdated");
+        const redirectPath = this.$route.query.redirect || "/";
+        this.$router.push(redirectPath);
+      } 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>