@osimart/create-storefront 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,566 @@
+<template>
+  <div class="w-full xlg1:w-[70%] flex flex-col gap-5 font-body">
+    <!-- The confirmation modal -->
+    <ConfirmDeleteModal
+      v-if="isDeleteModalVisible"
+      :jobId="addressidtodelete"
+      :isVisible="isDeleteModalVisible"
+      @confirm-delete="deleteAddress"
+      :isLoading="isDeleteLoading"
+      @cancel-delete="closeDeleteModal"
+    />
+    <!-- User Information Section -->
+    <div class="osi-profile-card 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">
+        <h1 class="text-primaryColor font-body text-xl">Profile</h1>
+
+        <button
+          type="button"
+          class="osi-btn osi-btn--icon osi-profile-icon-btn"
+          :aria-label="isEditing ? 'Cancel editing' : 'Edit profile'"
+          @click="toggleProfileForm"
+        >
+          <svg
+            v-if="!isEditing"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            class="w-5"
+          >
+            <path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L6 20l-4 1 1-4L16.5 3.5z" />
+          </svg>
+
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="w-5"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="grid grid-cols-1 s:grid-cols-2 gap-x-5 gap-y-5 h-fit mt-5">
+        <OsiField
+          v-model="userData.first_name"
+          id="profile-first-name"
+          label="First Name"
+          autocomplete="given-name"
+          :disabled="!isEditing"
+          :error="userErrors.first_name"
+          @input="clearUserError('first_name')"
+        />
+
+        <OsiField
+          v-model="userData.last_name"
+          id="profile-last-name"
+          label="Last Name"
+          autocomplete="family-name"
+          :disabled="!isEditing"
+          :error="userErrors.last_name"
+          @input="clearUserError('last_name')"
+        />
+
+        <OsiField
+          v-model="userData.email"
+          id="profile-email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          :disabled="!isEditing"
+          :error="userErrors.email"
+          @input="clearUserError('email')"
+        />
+
+        <OsiField
+          v-if="isEditing"
+          label="Mobile Number"
+          floated
+          :error="userErrors.mobile_number"
+        >
+          <template #control="{ id, inputClass }">
+            <PhoneNumInput
+              v-model="userData.mobile_number"
+              variant="theme"
+              :input-id="id"
+              :input-class="inputClass"
+              :error="!!userErrors.mobile_number"
+              @update="phoneNumberResults = $event"
+              @clear-error="clearUserError('mobile_number')"
+            />
+          </template>
+        </OsiField>
+        <OsiField
+          v-else
+          v-model="userData.mobile_number"
+          id="profile-mobile"
+          label="Mobile Number"
+          type="tel"
+          disabled
+        />
+      </div>
+
+      <div
+        v-if="isEditing"
+        class="w-full flex justify-center items-center px-3 py-2 my-3"
+      >
+        <button
+          type="button"
+          class="osi-btn"
+          :disabled="isEditProfileLoading"
+          :aria-busy="isEditProfileLoading"
+          @click="saveProfile"
+        >
+          <span v-if="isEditProfileLoading" class="osi-btn-spinner" aria-hidden="true" />
+          <span>Update Profile</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="osi-profile-card 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 pr-2">
+        <h1 class="text-primaryColor font-body text-xl">Addresses</h1>
+
+        <button
+          type="button"
+          class="osi-btn osi-btn--icon osi-profile-icon-btn"
+          aria-label="Add address"
+          @click="toggleAddressForm"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-5 h-5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 4.5v15m7.5-7.5h-15"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div
+        v-if="
+          user?.customer_addresses &&
+          user?.customer_addresses.length === 0
+        "
+      >
+        <div class="w-full flex flex-col 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 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+            />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+            />
+          </svg>
+
+          <p
+            class="text-primaryColor font-body text-xl s:text-2xl text-center"
+          >
+            You have not added any addresses yet
+          </p>
+          <div class="text-center text-gray-500">
+            <p class="font-body text-sm">
+              Add your addresses for a quicker and more efficient checkout.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-else class="w-full grid grid-cols-1 s:grid-cols-2 gap-3 mt-5">
+        <div
+          v-for="address in user?.customer_addresses"
+          :key="address.id"
+          class="w-full flex flex-col gap-3"
+        >
+          <div class="h-[200px]">
+            <div
+              class="bg-white shadow-sm h-[200px] flex flex-col gap-3 p-3"
+            >
+            
+             <div class="flex w-full justify-end gap-1">
+                <span
+                  @click="editAddress(address)"
+                  class="cursor-pointer text-center text-primaryColor text-xs duration-200 mr-1 inline-block"
+                >
+                <svg data-v-52d6a4bb="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" class="w-5 text-primaryColor"><path data-v-52d6a4bb="" d="M16.5 3.5a2.1 2.1 0 1 1 3 3L6 20l-4 1 1-4L16.5 3.5z"></path></svg>
+                </span>
+                <span
+                  class="cursor-pointer text-center text-red-500 text-xs duration-200 inline-block"
+                  @click.stop="openDeleteModal(address.id)"
+                >
+                 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 24 24" fill="none">
+<path d="M10 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+                </span>
+                </div>
+
+              <div
+                class="w-full bg-white text-gray-500 text-sm s:text-base grid gap-2"
+              >
+                <p class="font-body">
+                  <span class="font-semibold">Country:</span>
+                  {{ address.country_name }}
+                </p>
+                <p v-if="address.zone" class="font-body">
+                  <span class="font-semibold">Zone:</span>
+                  {{ address.zone_name }}
+                </p>
+                <p
+                  class="font-body overflow-hidden text-ellipsis line-clamp-2"
+                >
+                  <span class="font-semibold">Address:</span>
+                  {{ address.address }}
+                </p>
+                <p class="font-body" v-if="address.postal_code">
+                  <span class="font-semibold">Zip Code:</span>
+                  {{ address.postal_code }}
+                </p>
+              </div>
+
+             
+            </div>
+          </div>
+
+
+      <div class="mt-5 font-body">
+        </div>
+
+  </div>
+  </div>
+  </div>
+
+    <!-- Add Address Modal -->
+    <AddAddressModal
+      :isVisible="isAddAddressModalVisible"
+      :countries="countries"
+      :addressToEdit="addressToEdit"
+      @close="closeAddAddressModal"
+      @address-added="onAddressAdded"
+    />
+  </div>
+</template>
+
+<script>
+import UserServices from "../../../services/UserServices";
+import { useToast } from "vue-toastification";
+import { PhoneNumInput } from "#components";
+import { OsiField } from "#components";
+import { authBus } from "../../../services/AuthBus";
+import { ConfirmDeleteModal } from "#components";
+import AddAddressModal from "./AddAddressModal.vue";
+
+export default {
+  components: {
+    PhoneNumInput,
+    OsiField,
+    ConfirmDeleteModal,
+    AddAddressModal,
+  },
+  data() {
+    return {
+      isEditing: false,
+      phoneNumberResults: null,
+      isEditProfileLoading: false,
+      isAddAddressModalVisible: false, 
+      isLoading: false,
+      isEditLoading: false,
+      isDeleteModalVisible: false,
+      isDeleteLoading:false,
+      addressidtodelete: null,
+      emailError: "",
+      countryCode: "LB",
+      userData: {
+        first_name: "",
+        last_name: "",
+        email: "",
+        mobile_number: "",
+      },
+      userErrors: {
+        first_name: false,
+        last_name: false,
+        email: false,
+        mobile_number: false,
+      },
+      addressToEdit: null,
+    };
+  },
+  props: {
+    countries: {
+      type: Object,
+    },
+    user: {
+      type: Object,
+      required: true,
+    },
+    addresses: {
+      type: Array,
+      required: true,
+    },
+  },
+  mounted() {
+    if (this.user) {
+      this.userData.first_name = this.user.first_name;
+      this.userData.last_name = this.user.last_name;
+      this.userData.email = this.user.email;
+      this.userData.mobile_number = this.user.mobile_number;
+    }
+  },
+  methods: {
+    clearError(field) {
+      this.errors[field] = false;
+    },
+    clearUserError(field) {
+      this.userErrors[field] = false;
+    },
+    validateEmail() {
+      const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+
+      if (!emailPattern.test(this.userData.email)) {
+        this.emailError = "Please enter a valid email address.";
+        return;
+      } else {
+        this.emailError = "";
+      }
+    },
+    async deleteAddress() {
+      const toast = useToast();
+      try {
+        if (!this.addressidtodelete) {
+          console.error("No job ID to delete.");
+          return;
+        }
+        this.isDeleteLoading = true
+        const response = await UserServices.deleteAddress(
+          this.addressidtodelete
+        );
+        toast.success("Address deleted");
+        this.$emit("address-added");
+         this.isDeleteLoading = false;
+        this.isDeleteModalVisible = false;
+      } catch (error) {
+        console.error("Error deleting address:", error);
+        toast.error("Something went wrong");
+      } finally {
+        this.isDeleteLoading = false;
+        this.isDeleteModalVisible = false;
+      
+      }
+    },
+
+    openDeleteModal(jobId) {
+      this.addressidtodelete = jobId;
+      this.isDeleteModalVisible = true;
+    },
+
+    closeDeleteModal() {
+      this.isDeleteModalVisible = false;
+    },
+    async updateAddress() {
+      const toast = useToast();
+      const updatedData = {};
+      const addressId = this.originalAddress.id;
+
+      for (const key in this.editAddressFormData.address) {
+        if (
+          key !== "id" &&
+          this.editAddressFormData.address[key] !== this.originalAddress[key]
+        ) {
+          updatedData[key] = this.editAddressFormData.address[key];
+        }
+      }
+
+      const countryChanged =
+        this.selectedCountry &&
+        this.selectedCountry.id !== this.originalAddress.country;
+
+      if (countryChanged) {
+        updatedData.country = this.selectedCountry.id;
+
+        if (this.selectedCountry.shipping_zones.length === 0) {
+          updatedData.zone = null;
+        }
+      }
+
+      if (countryChanged && this.selectedCountry.shipping_zones.length > 0) {
+        if (!this.selectedZone) {
+          toast.error("Please select a zone if required.");
+          return;
+        } else {
+          updatedData.zone = this.selectedZone.id;
+        }
+      }
+
+      const zoneChanged =
+        this.selectedZone && this.selectedZone.id !== this.originalAddress.zone;
+
+      if (zoneChanged) {
+        updatedData.zone = this.selectedZone.id;
+      }
+
+      if (Object.keys(updatedData).length === 0) {
+        return;
+      }
+
+
+      try {
+        this.isEditLoading = true;
+        await UserServices.editAddress(addressId, updatedData);
+        toast.success("Address edited");
+
+        this.originalAddress = { ...this.originalAddress, ...updatedData };
+
+        this.isEditing = false;
+        this.selectedAddress = null;
+
+        this.$emit("address-added");
+      } catch (error) {
+        toast.error("Something went wrong");
+      } finally {
+        this.isEditLoading = false;
+      }
+    },
+    toggleAddressForm() {
+      this.isAddAddressModalVisible = true;
+      if (this.isAddAddressModalVisible) {
+         this.addressToEdit = null;
+         this.showEditAddressForm = false;
+         this.selectedAddress = null;
+      }
+    },
+    
+    closeAddAddressModal() {
+      this.isAddAddressModalVisible = false;
+      this.addressToEdit = null;
+    },
+
+    onAddressAdded() {
+      this.$emit("address-added");
+      this.closeAddAddressModal();
+    },
+
+    editAddress(address) {
+      this.addressToEdit = address;
+      this.isAddAddressModalVisible = true;
+    },
+
+    toggleProfileForm() {
+      this.isEditing = !this.isEditing;
+    },
+    isValidEmail(email) {
+      const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      return regex.test(email);
+    },
+    async saveProfile() {
+      let isValid = true;
+      this.userErrors.email = false;
+      this.userErrors.first_name = false;
+      this.userErrors.last_name = false;
+      this.userErrors.mobile_number = false;
+      if (!this.userData.first_name) {
+        this.userErrors.first_name = "Last name is required";
+        isValid = false;
+      }
+      if (!this.userData.last_name) {
+        this.userErrors.last_name = "Last name is required";
+        isValid = false;
+      }
+      if (!this.userData.mobile_number) {
+        this.userErrors.mobile_number = "Mobile number is required";
+        isValid = false;
+      } else if (this.phoneNumberResults && !this.phoneNumberResults.isValid) {
+        this.userErrors.mobile_number = "Mobile number is not valid";
+        isValid = false;
+      }
+      if (!this.userData.email) {
+        this.userErrors.email = "Email is required";
+        isValid = false;
+      } else if (!this.isValidEmail(this.userData.email)) {
+        this.userErrors.email = "Please enter a valid email address";
+        isValid = false;
+      }
+      if (!isValid) {
+        return;
+      }
+      const toast = useToast();
+      try {
+        this.isEditing = true;
+        this.isEditProfileLoading = true;
+        const response = await UserServices.updateUserDetail(this.userData);
+        toast.success("Profile updated successfully");
+        await authBus.checkAuth();
+      } catch (error) {
+        const data = error?.data;
+        const errorMessages = Array.isArray(data)
+          ? data
+          : data && typeof data === 'object'
+            ? Object.values(data).flat()
+            : [error?.message || 'Something went wrong'];
+
+        if (errorMessages.length > 1) {
+          toast.error(`• ${errorMessages.join("\n• ")}`, {
+            timeout: 5000,
+            closeOnClick: true,
+            pauseOnHover: true,
+          });
+        } else {
+          toast.error(errorMessages[0]);
+        }
+
+        this.isEditing = false;
+        this.isEditProfileLoading = false;
+      } finally {
+        this.isEditing = false;
+        this.isEditProfileLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Fields and buttons come from the theme (OsiField / .osi-btn). */
+.osi-profile-card {
+  /* Floating labels cut the field border with a chip in this colour. */
+  --osi-field-chip: #f9fafb;
+}
+.osi-profile-icon-btn {
+  --btn-pad-y: 5px;
+  width: 30px;
+  height: 30px;
+}
+.osi-profile-icon-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>