@osimart/create-storefront 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,452 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
+    @click.self="closeModal"
+  >
+    <div
+      class="osi-am-panel w-full max-w-lg overflow-hidden animate-fade-in-up"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="p-6">
+        <div class="flex justify-between items-center mb-6">
+          <h2 class="text-xl font-semibold font-body">
+            {{ isEditing ? "Edit Address" : "Add New Address" }}
+          </h2>
+          <button type="button" class="osi-am-close" aria-label="Close" @click="closeModal">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <form novalidate class="osi-am-form font-body" @submit.prevent="submitForm">
+          <!-- Country -->
+          <OsiField label="Country" required :floated="!!selectedCountry">
+            <template #control="{ id, inputClass, placeholderText }">
+              <div class="osi-am-select">
+                <button
+                  :id="id"
+                  type="button"
+                  :class="[inputClass, 'osi-select-trigger']"
+                  :aria-expanded="isCountryOpen"
+                  @click="toggleCountry"
+                >
+                  <span class="osi-am-trigger-text">{{ selectedCountry?.country_name || placeholderText }}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="osi-am-chevron" :class="{ 'is-open': isCountryOpen }" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                  </svg>
+                </button>
+                <ul v-show="isCountryOpen" class="osi-am-menu" role="listbox">
+                  <li
+                    v-for="(country, index) in countries"
+                    :key="index"
+                    role="option"
+                    class="osi-am-option"
+                    :class="{ 'is-selected': selectedCountry?.id === country.id }"
+                    :aria-selected="selectedCountry?.id === country.id"
+                    @click="selectCountry(country)"
+                  >
+                    {{ country?.country_name }}
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </OsiField>
+
+          <!-- Zone -->
+          <OsiField
+            v-if="selectedCountry && selectedCountry.shipping_zones && selectedCountry.shipping_zones.length > 0"
+            label="Zone"
+            required
+            :floated="!!selectedZone"
+          >
+            <template #control="{ id, inputClass, placeholderText }">
+              <div class="osi-am-select">
+                <button
+                  :id="id"
+                  type="button"
+                  :class="[inputClass, 'osi-select-trigger']"
+                  :aria-expanded="isZoneOpen"
+                  @click="toggleZone"
+                >
+                  <span class="osi-am-trigger-text">{{ selectedZone?.name || placeholderText }}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="osi-am-chevron" :class="{ 'is-open': isZoneOpen }" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                  </svg>
+                </button>
+                <ul v-show="isZoneOpen" class="osi-am-menu" role="listbox">
+                  <li
+                    v-for="(zone, index) in zones"
+                    :key="index"
+                    role="option"
+                    class="osi-am-option"
+                    :class="{ 'is-selected': selectedZone && selectedZone.id === zone.id }"
+                    :aria-selected="!!(selectedZone && selectedZone.id === zone.id)"
+                    @click="selectZone(zone)"
+                  >
+                    {{ zone.name }}
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </OsiField>
+
+          <OsiField
+            v-model="formData.address.address"
+            id="address_modal"
+            as="textarea"
+            rows="3"
+            label="Address"
+            required
+            autocomplete="street-address"
+          />
+
+          <OsiField
+            v-model="formData.address.postal_code"
+            id="postcode_modal"
+            label="Post Code/Zip Code"
+            inputmode="numeric"
+            autocomplete="postal-code"
+          />
+
+          <div class="osi-am-actions">
+            <button type="button" class="osi-btn osi-btn--secondary" @click="closeModal">
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="osi-btn"
+              :disabled="isLoading"
+              :aria-busy="isLoading"
+            >
+              <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true" />
+              <span>{{ isEditing ? "Save Changes" : "Add Address" }}</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { OsiField } from '#components';
+import UserServices from '../../../services/UserServices';
+import { useToast } from 'vue-toastification';
+
+// Props
+const props = defineProps({
+  isVisible: {
+    type: Boolean,
+    required: true,
+  },
+  countries: {
+    type: Array,
+    default: () => [],
+  },
+  addressToEdit: {
+    type: Object,
+    default: null,
+  },
+});
+
+// Emits
+const emit = defineEmits(['close', 'address-added']);
+
+// Toast
+const toast = useToast();
+
+// Reactive state
+const isLoading = ref(false);
+const isCountryOpen = ref(false);
+const isZoneOpen = ref(false);
+const selectedCountry = ref(null);
+const selectedZone = ref(null);
+const zones = ref([]);
+const formData = reactive({
+  address: {
+    country: '',
+    zone: '',
+    address: '',
+    postal_code: '',
+  },
+});
+
+// Computed
+const isEditing = computed(() => !!props.addressToEdit);
+
+// Watchers
+watch(() => props.isVisible, (val) => {
+  if (val) {
+    if (isEditing.value) {
+      populateForm();
+    } else {
+      resetForm();
+    }
+  }
+});
+
+watch(() => props.addressToEdit, (val) => {
+  if (props.isVisible) {
+    if (val) populateForm();
+    else resetForm();
+  }
+});
+
+// Methods
+const closeModal = () => {
+  emit('close');
+};
+
+const resetForm = () => {
+  formData.address = {
+    address: '',
+    country: '',
+    zone: '',
+    postal_code: '',
+  };
+  selectedCountry.value = null;
+  selectedZone.value = null;
+  zones.value = [];
+  isCountryOpen.value = false;
+  isZoneOpen.value = false;
+};
+
+const populateForm = () => {
+  const address = props.addressToEdit;
+  formData.address = {
+    country: address.country,
+    zone: address.zone,
+    address: address.address,
+    postal_code: address.postal_code,
+  };
+
+  // Set references for UI
+  selectedCountry.value = props.countries.find(c => c.id === address.country);
+  if (selectedCountry.value) {
+    zones.value = selectedCountry.value.shipping_zones || [];
+    if (address.zone) {
+      selectedZone.value = zones.value.find(z => z.id === address.zone);
+    } else {
+      selectedZone.value = null;
+    }
+  } else {
+    zones.value = [];
+    selectedZone.value = null;
+  }
+};
+
+const toggleCountry = () => {
+  isCountryOpen.value = !isCountryOpen.value;
+  isZoneOpen.value = false;
+};
+
+const selectCountry = (country) => {
+  selectedCountry.value = country;
+  formData.address.country = country.id;
+  isCountryOpen.value = false;
+
+  // Handle zones
+  if (country.shipping_zones && country.shipping_zones.length > 0) {
+    zones.value = country.shipping_zones;
+    selectedZone.value = null;
+    formData.address.zone = '';
+  } else {
+    zones.value = [];
+    selectedZone.value = null;
+    formData.address.zone = null;
+  }
+};
+
+const toggleZone = () => {
+  isZoneOpen.value = !isZoneOpen.value;
+  isCountryOpen.value = false;
+};
+
+const selectZone = (zone) => {
+  selectedZone.value = zone;
+  formData.address.zone = zone.id;
+  isZoneOpen.value = false;
+};
+
+const submitForm = async () => {
+  if (isEditing.value) {
+    await updateAddress();
+  } else {
+    await addAddress();
+  }
+};
+
+const addAddress = async () => {
+  // Basic validation
+  if (!formData.address.country) {
+    toast.error('Please select a country');
+    return;
+  }
+  if (!formData.address.address) {
+    toast.error('Please enter an address');
+    return;
+  }
+  if (zones.value.length > 0 && !formData.address.zone) {
+    toast.error('Please select a zone');
+    return;
+  }
+
+  try {
+    isLoading.value = true;
+    await UserServices.addAddress(formData.address);
+    toast.success('Address added successfully');
+    emit('address-added');
+    closeModal();
+  } catch (error) {
+    console.error('Error adding address:', error);
+    toast.error('Failed to add address');
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const updateAddress = async () => {
+  const original = props.addressToEdit;
+  const current = formData.address;
+  const updatedData = {};
+
+  // Diff logic
+  if (current.address !== original.address) updatedData.address = current.address;
+  if (current.postal_code !== original.postal_code) updatedData.postal_code = current.postal_code;
+  
+  // Country changed
+  if (current.country !== original.country) {
+    updatedData.country = current.country;
+    const countryObj = props.countries.find(c => c.id === current.country);
+    if (!countryObj?.shipping_zones?.length) {
+      updatedData.zone = null;
+    } else {
+      if (current.zone) updatedData.zone = current.zone;
+    }
+  } else {
+    // Country same, check zone
+    if (current.zone !== original.zone) {
+      updatedData.zone = current.zone;
+    }
+  }
+
+  if (Object.keys(updatedData).length === 0) {
+    closeModal();
+    return; 
+  }
+
+  try {
+    isLoading.value = true;
+    await UserServices.editAddress(original.id, updatedData);
+    toast.success('Address updated successfully');
+    emit('address-added');
+    closeModal();
+  } catch(error) {
+    console.error('Error updating address:', error);
+    toast.error('Failed to update address');
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.3s ease-out forwards;
+}
+
+.osi-am-panel {
+  --osi-field-chip: var(--osi-bg, #ffffff);
+  background: var(--osi-bg, #ffffff);
+  color: var(--osi-text, inherit);
+  border-radius: calc(var(--osi-button-radius, 4px) * 2);
+  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
+}
+.osi-am-close {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.osi-am-close:hover {
+  opacity: 1;
+}
+.osi-am-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osi-input-gap, 1rem);
+}
+.osi-am-select {
+  position: relative;
+}
+.osi-am-trigger-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.osi-am-chevron {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.5;
+  transition: transform 0.2s ease;
+}
+.osi-am-chevron.is-open {
+  transform: rotate(180deg);
+}
+.osi-am-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  max-height: 15rem;
+  margin: 0;
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  list-style: none;
+  background: var(--osi-bg, #ffffff);
+  color: var(--osi-text, inherit);
+  border: var(--osi-input-border-w, 1px) solid var(--osi-input-border-color, var(--osi-border, #e5e5e5));
+  border-radius: var(--osi-input-radius, 4px);
+  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.2);
+}
+.osi-am-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+.osi-am-option:hover {
+  background: color-mix(in srgb, currentColor 6%, transparent);
+}
+.osi-am-option.is-selected {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  font-weight: 500;
+}
+.osi-am-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}
+</style>

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

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="w-full xlg1:w-[70%] h-fit border border-gray-100 shadow-md p-5 bg-gray-50 font-body"
+  >
+    <div v-if="wishlistItems && wishlistItems.length > 0">
+      <div
+        class="bg-gray-50 grid grid-cols-1 s:grid-cols-2 l:grid-cols-3 gap-3"
+      >
+        <div
+          v-for="item in wishlistItems"
+          :key="item?.product?.id"
+          class="border border-primaryColor border-opacity-10"
+        >
+          <div class="relative">
+            <router-link
+              :to="`/${item?.product?.categories[0].category.slugified_name}/${item?.product?.slugified_name}/`"
+            >
+              <img
+                :src="mediaUrl(item?.product?.main_image?.path)"
+                class="w-full h-[350px] object-cover"
+              />
+            </router-link>
+
+            <button
+              type="button"
+              class="osi-btn osi-btn--icon absolute top-3 right-3 w-[40px] h-[40px] removeWishlistButton"
+              style="--btn-pad-y: 0px"
+              aria-label="Remove from wishlist"
+              :data-product-id="item.product.id"
+              @click="removeFromWishlist(item.product.id)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <router-link :to="`/${item.product.categories[0].category.slugified_name}/${item.product.slugified_name}`">
+            <div class="w-full flex flex-col justify-center h-[60px] p-3">
+              <p class="text-primaryColor text-sm">{{ item?.product?.name }}</p>
+              <!-- <p class="text-gray-500 text-sm">${{ item?.product?.price }}</p> -->
+            </div>
+          </router-link>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <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="currentColor"
+          stroke-width="1.5"
+          class="w-[50%] s:w-[200px] text-primaryColor opacity-10"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
+          />
+        </svg>
+
+        <p class="text-primaryColor font-body text-xl s:text-2xl">
+          Wishlist is empty
+        </p>
+        <div class="text-center text-gray-500">
+          <p class="font-body text-sm">
+            You don't have any products in your wishlist 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 WishlistServices from "../../../services/WishlistServices";
+import { useToast } from "vue-toastification";
+import { useQueryClient } from "@tanstack/vue-query";
+
+// props
+const props = defineProps({
+  wishlistItems: {
+    type: Array,
+    required: true,
+  },
+});
+
+// emits
+const emit = defineEmits(["update-wishlist"]);
+
+// base URL
+const { mediaUrl } = useMediaUrl();
+
+// query client + toast
+const queryClient = useQueryClient();
+const toast = useToast();
+
+// remove function
+async function removeFromWishlist(productId) {
+  try {
+    await WishlistServices.removeFromWishlist(productId);
+    toast.success("Product removed from wishlist");
+
+    // Use props.wishlistItems instead of wishlistItems
+    const updatedWishlist = props.wishlistItems.filter(
+      (item) => item.product.id !== productId
+    );
+    emit("update-wishlist", updatedWishlist);
+
+    await queryClient.invalidateQueries({ queryKey: ["section1"] });
+    await queryClient.invalidateQueries({ queryKey: ["section2"] });
+  } catch (error) {
+    toast.error("Something went wrong");
+    console.error("Error removing from wishlist:", error);
+  }
+}
+</script>
+<style scoped>
+/* Add custom styles here if needed */
+</style>