fix: addresses (#463)

* fix: addresses * refactor: address default logic * refactor: make new checkout work with composable logic * fix: improve address calls * fix: refactor * fix: hf * fix: refactor * fix: refactor * code refactor * code refactor * feat: use new address v2 calls * feat: add address basic unit test * feat: add some more tests * refactor: fix edit address * chore: format * chore: sdk bump --------- Co-authored-by: Bedeoan Raul <bedeoan.raul@gmail.com> Co-authored-by: rbedeoan-plenty <121931658+rbedeoan-plenty@users.noreply.github.com> Co-authored-by: cristian sandru <cristian.sandru@plentysystems.com> Co-authored-by: Cristian Sandru <149154151+csandru-plenty@users.noreply.github.com>
plentymarkets · Jun 19, 2024 · 2e8e772 · 2e8e772
1 parent 3091dad
commit 2e8e772
Show file tree

Hide file tree

Showing 29 changed files with 318 additions and 174 deletions.
diff --git a/apps/web/components/Address/Address.vue b/apps/web/components/Address/Address.vue
@@ -12,7 +12,12 @@
       <SfIconCheckCircle v-if="isSelected" class="flex justify-end text-primary-700 shrink-0 default-address" />
     </div>
     <div class="actions flex justify-end">
-      <SfButton variant="tertiary" size="sm" class="self-start" @click.stop="$emit('on-edit')">
+      <SfButton
+        variant="tertiary"
+        size="sm"
+        class="self-start"
+        @click.stop="$emit('on-edit', userAddressGetters.getId(address))"
+      >
         {{ $t('account.accountSettings.edit') }}
       </SfButton>
       <SfButton variant="tertiary" size="sm" class="self-start" @click.stop="$emit('on-delete')">
@@ -30,6 +35,7 @@
 import { SfIconCheckCircle } from '@storefront-ui/vue';
 import { SfButton } from '@storefront-ui/vue';
 import type { AddressProps } from './types';
+import { userAddressGetters } from '@plentymarkets/shop-api';
 
 defineProps<AddressProps>();
 defineEmits(['on-edit', 'on-delete', 'make-default']);

diff --git a/apps/web/components/AddressForm/AddressForm.vue b/apps/web/components/AddressForm/AddressForm.vue
@@ -98,8 +98,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Address, AddressType } from '@plentymarkets/shop-api';
-import { userAddressGetters } from '@plentymarkets/shop-api';
+import { type Address, AddressType, userAddressGetters } from '@plentymarkets/shop-api';
 import { SfButton, SfCheckbox, SfInput, SfLoaderCircular, SfSelect } from '@storefront-ui/vue';
 import type { AddressFormProps } from '~/components/AddressForm/types';
 

diff --git a/apps/web/components/AddressFormNew/AddressFormNew.vue b/apps/web/components/AddressFormNew/AddressFormNew.vue
@@ -103,10 +103,8 @@ import { type Address, AddressType } from '@plentymarkets/shop-api';
 import { userAddressGetters } from '@plentymarkets/shop-api';
 import { SfButton, SfCheckbox, SfInput, SfLoaderCircular, SfSelect } from '@storefront-ui/vue';
 import type { AddressFormProps } from '~/components/AddressForm/types';
-const { loading: loadBilling } = useAddress(AddressType.Billing);
-const { useAsShippingAddress } = useCart();
+const { loading: loadBilling, useAsShippingAddress } = useAddress(AddressType.Billing);
 const { loading: loadShipping } = useAddress(AddressType.Shipping);
-
 const props = withDefaults(defineProps<AddressFormProps>(), {});
 
 const isCartUpdateLoading = computed(() => loadBilling.value || loadShipping.value);

diff --git a/apps/web/components/AddressesList/AddressesList.vue b/apps/web/components/AddressesList/AddressesList.vue
@@ -50,8 +50,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { type Address, AddressType } from '@plentymarkets/shop-api';
-import { userAddressGetters } from '@plentymarkets/shop-api';
+import { type Address, AddressType, userAddressGetters } from '@plentymarkets/shop-api';
 import { SfButton, SfIconClose, SfLoaderCircular, useDisclosure } from '@storefront-ui/vue';
 import type { AddressesListProps } from '~/components/AddressesList/types';
 
@@ -90,6 +89,7 @@ const onSave = async (address: Address, useAsShippingAddress: boolean) => {
   if (useAsShippingAddress) {
     await saveShippingAddress(address);
   }
+  getAddresses();
 };
 
 const makeDefault = (address: Address) => {

diff --git a/apps/web/components/CategoryFilters/Filter.vue b/apps/web/components/CategoryFilters/Filter.vue
@@ -81,9 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'nuxt/app';
-import type { Filter, FilterGroup } from '@plentymarkets/shop-api';
-import { facetGetters } from '@plentymarkets/shop-api';
+import { type Filter, type FilterGroup, facetGetters } from '@plentymarkets/shop-api';
 import {
   SfInput,
   SfIconCheck,

diff --git a/apps/web/components/CheckoutAddress/CheckoutAddress.vue b/apps/web/components/CheckoutAddress/CheckoutAddress.vue
@@ -2,26 +2,26 @@
   <div data-testid="checkout-address" class="md:px-4 py-6">
     <div class="flex justify-between items-center">
       <h2 class="text-neutral-900 text-lg font-bold mb-4">{{ heading }}</h2>
-      <div v-if="!disabled && addresses.length > 0" class="flex items-center">
+      <div v-if="!disabled && addressList.length > 0" class="flex items-center">
         <SfButton v-if="type === AddressType.Billing" size="sm" variant="tertiary" @click="pick">
           {{ $t('savedBillingAddress') }}
         </SfButton>
         <SfButton v-if="type === AddressType.Shipping" size="sm" variant="tertiary" @click="pick">
           {{ $t('savedShippingAddress') }}
         </SfButton>
         <div class="h-5 w-px bg-primary-700 mx-2"></div>
-        <SfButton size="sm" variant="tertiary" @click="edit">
+        <SfButton size="sm" variant="tertiary" @click="edit(userAddressGetters.getId(displayAddress))">
           {{ $t('contactInfo.edit') }}
         </SfButton>
       </div>
     </div>
 
-    <div v-if="selectedAddress" class="mt-2 md:w-[520px]">
-      <AddressDisplay :address="selectedAddress" />
+    <div v-if="displayAddress" class="mt-2 md:w-[520px]">
+      <AddressDisplay :key="displayAddress.id" :address="displayAddress" />
     </div>
 
-    <div class="w-full md:max-w-[520px]" v-if="!disabled && (isAuthorized || addresses.length === 0)">
-      <p v-if="addresses.length === 0">{{ description }}</p>
+    <div class="w-full md:max-w-[520px]" v-if="!disabled && (isAuthorized || addressList.length === 0)">
+      <p v-if="!displayAddress.id">{{ description }}</p>
       <SfButton :data-testid="`add-${type}-button`" class="mt-4 w-full md:w-auto" variant="secondary" @click="create">
         {{ buttonText }}
       </SfButton>
@@ -44,12 +44,12 @@
         </h3>
         <h1 class="my-2 mb-6 font-semibold">{{ $t('pickSavedAddressSubtitle') }}</h1>
       </header>
-      <div class="hover:bg-primary-50" v-for="address in addresses" :key="userAddressGetters.getId(address)">
+      <div class="hover:bg-primary-50" v-for="address in addressList" :key="userAddressGetters.getId(address)">
         <Address
           :address="address"
-          :is-selected="selectedAddress.id === Number(userAddressGetters.getId(address))"
+          :is-selected="displayAddress.id === Number(userAddressGetters.getId(address))"
           :is-default="defaultAddressId === Number(userAddressGetters.getId(address))"
-          @click="setNewSelectedAddress(address)"
+          @click="setDisplayAddress(address, true)"
           @on-delete="onDelete(address)"
           @make-default="makeDefault(address)"
           @on-edit="edit"
@@ -84,9 +84,7 @@
       </header>
       <AddressForm
         :countries="activeShippingCountries"
-        :saved-address="
-          editMode ? addresses.find((address) => address.id?.toString() === selectedAddress?.id?.toString()) : undefined
-        "
+        :saved-address="addressToEdit"
         :type="type"
         @on-save="saveAddress"
         @on-close="closeEdit"
@@ -95,8 +93,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { type Address, AddressType } from '@plentymarkets/shop-api';
-import { cartGetters, userAddressGetters } from '@plentymarkets/shop-api';
+import { type Address, AddressType, userAddressGetters } from '@plentymarkets/shop-api';
 import { SfButton, SfIconClose, useDisclosure } from '@storefront-ui/vue';
 import type { CheckoutAddressProps } from '~/components/CheckoutAddress/types';
 
@@ -109,35 +106,25 @@ const { data: activeShippingCountries, getActiveShippingCountries } = useActiveS
 const props = withDefaults(defineProps<CheckoutAddressProps>(), {
   disabled: false,
 });
-const { data: cart } = useCart();
-const editMode = ref(false);
-const { data: addresses, setDefault, deleteAddress, defaultAddressId } = useAddress(props.type);
-
-const cartAddress = computed(() =>
-  props.type === AddressType.Billing
-    ? cartGetters.getCustomerInvoiceAddressId(cart.value)
-    : cartGetters.getCustomerShippingAddressId(cart.value),
-);
 
-const selectedAddress = ref(
-  props.addresses.find((address) => userAddressGetters.getId(address) === cartAddress?.value?.toString()) ??
-    ({} as Address),
-);
+const addressToEdit = ref();
+const emit = defineEmits(['on-saved']);
 
-const setNewSelectedAddress = (selectedAddressNew: Address) => {
-  selectedAddress.value = selectedAddressNew;
-};
+const editMode = ref(false);
+const { setDefault, deleteAddress, defaultAddressId, data, displayAddress, setDisplayAddress } = useAddress(props.type);
 
-const emit = defineEmits(['on-saved']);
+const addressList = computed(() => data.value ?? []);
 
 getActiveShippingCountries();
 
 const create = () => {
+  addressToEdit.value = null;
   editMode.value = false;
   openEdit();
 };
 
-const edit = () => {
+const edit = (addressId: string) => {
+  addressToEdit.value = addressList.value.find((address) => userAddressGetters.getId(address) === addressId);
   editMode.value = true;
   openEdit();
 };

diff --git a/apps/web/components/CheckoutAddress/__tests__/CheckoutAddress.spec.ts b/apps/web/components/CheckoutAddress/__tests__/CheckoutAddress.spec.ts
@@ -7,7 +7,6 @@ describe('<CheckoutAddress />', () => {
     const { getByTestId } = mount(CheckoutAddress, {
       props: {
         type: AddressType.Billing,
-        addresses: [],
         heading: '',
         description: '',
         buttonText: '',

diff --git a/apps/web/components/CheckoutAddress/types.ts b/apps/web/components/CheckoutAddress/types.ts
@@ -1,8 +1,7 @@
-import type { Address, AddressType } from '@plentymarkets/shop-api';
+import type { AddressType } from '@plentymarkets/shop-api';
 
 export type CheckoutAddressProps = {
   type: AddressType;
-  addresses: Address[];
   heading: string;
   description: string;
   buttonText: string;

diff --git a/apps/web/components/CheckoutAddressNew/CheckoutAddressNew.vue b/apps/web/components/CheckoutAddressNew/CheckoutAddressNew.vue
@@ -6,68 +6,41 @@
         {{ $t('contactInfo.edit') }}
       </SfButton>
     </div>
-    <div v-if="selectedAddress && !editMode" class="mt-2 md:w-[520px]">
-      <AddressDisplay :address="selectedAddress" />
+    <div v-if="displayAddress && !editMode" class="mt-2 md:w-[520px]">
+      <AddressDisplay :address="displayAddress" />
     </div>
 
     <div v-if="editMode">
       <AddressFormNew
         ref="addressFormNewReference"
         :countries="activeShippingCountries"
         :saved-address="
-          editMode ? addresses.find((address) => address.id?.toString() === selectedAddress?.id?.toString()) : undefined
+          editMode ? addresses.find((address) => address.id?.toString() === displayAddress?.id?.toString()) : undefined
         "
         :type="type"
-        @on-save="saveAddress"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import AddressFormNew from '~/components/AddressFormNew/AddressFormNew.vue';
-import { type Address, AddressType } from '@plentymarkets/shop-api';
-import { cartGetters, userAddressGetters } from '@plentymarkets/shop-api';
 import { SfButton } from '@storefront-ui/vue';
 import type { CheckoutAddressProps } from '~/components/CheckoutAddress/types';
 const { data: activeShippingCountries, getActiveShippingCountries } = useActiveShippingCountries();
 const props = withDefaults(defineProps<CheckoutAddressProps>(), {
   disabled: false,
 });
-const { saveAddress: updateAddress, setCheckoutAddress } = useAddress(props.type);
-const { data: cart, useAsShippingAddress } = useCart();
-const noPreviousAddressWasSet = computed(() => props.addresses.length === 0);
+const { data: addresses, displayAddress } = useAddress(props.type);
+const noPreviousAddressWasSet = computed(() => addresses.value.length === 0);
 
 const editMode = ref(noPreviousAddressWasSet.value);
 const addressFormNewReference = ref<InstanceType<typeof AddressFormNew> | null>(null);
-const cartAddress = computed(() =>
-  props.type === AddressType.Billing
-    ? cartGetters.getCustomerInvoiceAddressId(cart.value)
-    : cartGetters.getCustomerShippingAddressId(cart.value),
-);
-
-const selectedAddress = computed(
-  () =>
-    props.addresses.find((address) => userAddressGetters.getId(address) === cartAddress?.value?.toString()) ??
-    ({} as Address),
-);
-
-const emit = defineEmits(['on-saved']);
 
 getActiveShippingCountries();
 
-const edit = () => (editMode.value = !editMode.value);
-
-const saveAddress = async (address: Address) => {
-  const result = await updateAddress(address);
-  if (props.type === AddressType.Billing && useAsShippingAddress.value) {
-    setCheckoutAddress(AddressType.Shipping, -99);
-  } else if (result?.id) {
-    setCheckoutAddress(AddressType.Shipping, result.id);
-  }
-
-  emit('on-saved');
-  editMode.value = false;
+const edit = () => {
+  editMode.value = !editMode.value;
 };
 
 const disableEditMode = async () => {

diff --git a/apps/web/components/CheckoutAddressNew/__tests__/CheckoutAddress.spec.ts b/apps/web/components/CheckoutAddressNew/__tests__/CheckoutAddress.spec.ts
@@ -7,7 +7,6 @@ describe('<CheckoutAddress />', () => {
     const { getByTestId } = mount(CheckoutAddress, {
       props: {
         type: AddressType.Billing,
-        addresses: [],
         heading: '',
         description: '',
         buttonText: '',

diff --git a/apps/web/components/CheckoutAddressNew/types.ts b/apps/web/components/CheckoutAddressNew/types.ts
@@ -1,8 +1,7 @@
-import type { Address, AddressType } from '@plentymarkets/shop-api';
+import type { AddressType } from '@plentymarkets/shop-api';
 
 export type CheckoutAddressProps = {
   type: AddressType;
-  addresses: Address[];
   heading: string;
   description: string;
   buttonText: string;

diff --git a/apps/web/components/MegaMenu/MegaMenu.vue b/apps/web/components/MegaMenu/MegaMenu.vue
@@ -175,8 +175,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { CategoryTreeItem } from '@plentymarkets/shop-api';
-import { categoryTreeGetters } from '@plentymarkets/shop-api';
+import { type CategoryTreeItem, categoryTreeGetters } from '@plentymarkets/shop-api';
 import {
   SfIconClose,
   SfButton,

diff --git a/apps/web/components/ui/Badges/Badges.vue b/apps/web/components/ui/Badges/Badges.vue
@@ -33,9 +33,8 @@
 
 <script setup lang="ts">
 import { SfListItem } from '@storefront-ui/vue';
-import { productGetters, tagGetters } from '@plentymarkets/shop-api';
+import { type ProductTag, productGetters, tagGetters } from '@plentymarkets/shop-api';
 import type { BadgesProps } from '~/components/ui/Badges/types';
-import type { ProductTag } from '@plentymarkets/shop-api';
 
 const localePath = useLocalePath();
 

diff --git a/apps/web/components/ui/Review/Review.vue b/apps/web/components/ui/Review/Review.vue
@@ -181,8 +181,12 @@ import {
 import type { ReviewProps } from './types';
 import ReviewForm from '~/components/ReviewForm/ReviewForm.vue';
 import ReplyForm from '~/components/ReplyForm/ReplyForm.vue';
-import type { CreateReviewParams, ReviewItem, UpdateReviewParams } from '@plentymarkets/shop-api';
-import { reviewGetters } from '@plentymarkets/shop-api';
+import {
+  type CreateReviewParams,
+  type ReviewItem,
+  type UpdateReviewParams,
+  reviewGetters,
+} from '@plentymarkets/shop-api';
 
 const props = defineProps<ReviewProps>();
 const emits = defineEmits(['on-submit', 'review-updated', 'review-deleted']);

diff --git a/apps/web/composables/useActiveShippingCountries/useActiveShippingCountries.ts b/apps/web/composables/useActiveShippingCountries/useActiveShippingCountries.ts
@@ -25,14 +25,17 @@ export const useActiveShippingCountries: UseActiveShippingCountriesReturn = () =
   }));
 
   const getActiveShippingCountries: GetActiveShippingCountries = async () => {
-    state.value.loading = true;
+    if (state.value.data.length <= 0) {
+      state.value.loading = true;
+
+      const { data, error } = await useAsyncData('getActiveShippingCountries', () =>
+        useSdk().plentysystems.getActiveShippingCountries(),
+      );
+      useHandleError(error.value);
+      state.value.data = data.value?.data ?? state.value.data;
+      state.value.loading = false;
+    }
 
-    const { data, error } = await useAsyncData('getActiveShippingCountries', () =>
-      useSdk().plentysystems.getActiveShippingCountries(),
-    );
-    useHandleError(error.value);
-    state.value.data = data.value?.data ?? state.value.data;
-    state.value.loading = false;
     return state.value.data;
   };