fix: paypal readonly checkout (#859)

Co-authored-by: cristian sandru <cristian.sandru@plentysystems.com>
Co-authored-by: Cristi Sandru <149154151+csandru-plenty@users.noreply.github.com>

apps/web/components/AddressSelect/AddressSelect.vue

@@ -110,7 +110,15 @@ const persistCheckoutAddress = async (address: Address) => {
 };
 
 const handleSetCheckoutAddress = async (address: Address) => {
+  const { isAuthorized } = useCustomer();
+  const { restrictedAddresses } = useRestrictedAddress();
+  const { handleCartTotalChanges } = useCartTotalChange();
+
   await persistCheckoutAddress(address);
+
+  if (isAuthorized.value && restrictedAddresses.value) {
+    await handleCartTotalChanges();
+  }
 };
 
 const handleDeleteAddress = async (address: Address) => {

apps/web/components/CheckoutPayment/CheckoutPayment.vue

@@ -1,7 +1,7 @@
 <template>
   <fieldset class="md:mx-4 my-6" data-testid="checkout-payment">
     <legend class="text-neutral-900 text-lg font-bold mb-4">{{ t('checkoutPayment.heading') }}</legend>
-    <div v-if="paymentMethods.list.length > 0" class="grid gap-4 grid-cols-2">
+    <div v-if="paymentMethods?.list && paymentMethods.list.length > 0" class="grid gap-4 grid-cols-2">
       <label v-for="paymentMethod in paymentMethods.list" :key="paymentMethod.id" class="relative">
         <input
           type="radio"
@@ -56,6 +56,7 @@ const { t } = useI18n();
 const { send } = useNotification();
 const { data: cart } = useCart();
 const { selectedMethod: selectedShippingMethod } = useCartShippingMethods();
+const { paymentMethods } = useCheckoutPagePaymentAndShipping();
 
 const isPaymentMethodChecked = (paymentMethod: PaymentMethod): boolean =>
   !paymentProviderGetters.isPaymentMethodExcluded(selectedShippingMethod.value, paymentMethod.id) &&

apps/web/components/CheckoutPayment/types.ts

@@ -1,7 +1,4 @@
-import { type PaymentProviders } from '@plentymarkets/shop-api';
-
 export type CheckoutPaymentProps = {
-  paymentMethods: PaymentProviders;
   disabled?: boolean;
 };
 

apps/web/components/ShippingMethod/ShippingMethod.vue

@@ -57,18 +57,19 @@ import { AddressType, shippingProviderGetters } from '@plentymarkets/shop-api';
 import { SfIconWarning, SfListItem, SfRadio } from '@storefront-ui/vue';
 import { type CheckoutShippingEmits, type ShippingMethodProps } from './types';
 
-const { shippingMethods, disabled = false } = defineProps<ShippingMethodProps>();
+const { disabled = false } = defineProps<ShippingMethodProps>();
 const { hasCheckoutAddress } = useCheckoutAddress(AddressType.Shipping);
 const emit = defineEmits<CheckoutShippingEmits>();
 
 const { data: cart } = useCart();
 const { t, n } = useI18n();
 const { selectedMethod } = useCartShippingMethods();
+const { shippingMethods } = useCheckoutPagePaymentAndShipping();
 const radioModel = ref(shippingProviderGetters.getShippingProfileId(cart.value));
 
 const showShippingPrivacy = computed(
   () =>
-    shippingMethods.length > 0 &&
+    shippingMethods.value.length > 0 &&
     selectedMethod.value &&
     shippingProviderGetters.getDataPrivacyAgreementHint(selectedMethod.value),
 );

apps/web/components/ShippingMethod/types.ts

@@ -1,7 +1,4 @@
-import type { ShippingMethod } from '@plentymarkets/shop-api';
-
 export type ShippingMethodProps = {
-  shippingMethods: ShippingMethod[];
   disabled?: boolean;
 };
 

apps/web/composables/useAggregatedCountries/useAggregatedCountries.ts

@@ -54,7 +54,7 @@ export const useAggregatedCountries: UseAggregatedCountriesReturn = () => {
     );
 
     return [...uniqueCountries.values()].sort((firstCountry, secondCountry) =>
-      firstCountry.currLangName.localeCompare(secondCountry.currLangName, useI18n().locale.value),
+      firstCountry.currLangName.localeCompare(secondCountry.currLangName, useNuxtApp().$i18n.locale.value),
     );
   });
 

apps/web/composables/useCartTotalChange/useCartTotalChange.ts

@@ -8,30 +8,48 @@ export const useCartTotalChange = () => {
   const { restrictedAddresses } = useRestrictedAddress();
 
   const state = useState('useCartTotalChange', () => ({
-    initialTotal: '0',
+    initialTotal: 0,
+    initialCurrency: '',
     changedTotal: false,
   }));
 
   const setInitialCartTotal = async () => {
+    const { $i18n } = useNuxtApp();
+    const { send } = useNotification();
+    const localePath = useLocalePath();
     const paypalOrder = await getOrder({
       paypalOrderId: route.query.orderId?.toString() || '',
       payPalPayerId: route.query.payerId?.toString() || '',
     });
 
-    if (paypalOrder) {
-      state.value.initialTotal = paypalOrder.result.purchase_units[0].amount.value;
+    if (
+      paypalOrder &&
+      paypalOrder.result.purchase_units &&
+      paypalOrder.result.purchase_units.length === 1 &&
+      paypalOrder.result.status === 'APPROVED'
+    ) {
+      state.value.initialTotal = Number.parseFloat(paypalOrder.result.purchase_units[0].amount.value);
+      state.value.initialCurrency = paypalOrder.result.purchase_units[0].amount.currency_code;
       state.value.changedTotal =
-        cartGetters.getTotals(customerData.value.basket).total.toString() !== state.value.initialTotal;
+        cartGetters.getTotals(customerData.value.basket).total !== state.value.initialTotal ||
+        cartGetters.getCurrency(customerData.value.basket) !== state.value.initialCurrency;
+    } else {
+      send({
+        message: $i18n.t('paypal.invalidOrder'),
+        type: 'warning',
+      });
+      await navigateTo(localePath(paths.home));
     }
   };
 
   const handleCartTotalChanges = async () => {
+    if (restrictedAddresses.value || isGuest.value || isAuthorized.value) await getCart();
+
     if (restrictedAddresses.value) {
       state.value.changedTotal =
-        cartGetters.getTotals(customerData.value.basket).total.toString() !== state.value.initialTotal;
+        cartGetters.getTotals(customerData.value.basket).total !== state.value.initialTotal ||
+        cartGetters.getCurrency(customerData.value.basket) !== state.value.initialCurrency;
     }
-
-    if (restrictedAddresses.value || isGuest.value || isAuthorized.value) await getCart();
   };
 
   return {

apps/web/lang/de.json

@@ -777,7 +777,8 @@
     "unbrandedCvv": "Kartenprüfnummer",
     "unbrandedExpirationDate": "Ablaufdatum",
     "unbrandedNameOnCard": "Karteninhaber",
-    "unbrandedPay": "Bezahlen"
+    "unbrandedPay": "Bezahlen",
+    "invalidOrder": "Die Bestellung konnte nicht abgeschlossen werden. Bitte versuchen Sie es erneut."
   },
   "perPage": "Pro Seite",
   "phone": "Telefonnummer",

apps/web/lang/en.json

@@ -777,7 +777,8 @@
     "unbrandedCvv": "CVV",
     "unbrandedExpirationDate": "Expiration date",
     "unbrandedNameOnCard": "Name on card",
-    "unbrandedPay": "Pay"
+    "unbrandedPay": "Pay",
+    "invalidOrder": "The order cannot be processed. Please try again."
   },
   "perPage": "Per page",
   "phone": "Phone",

apps/web/pages/checkout.vue

@@ -15,22 +15,14 @@
         <AddressContainer :type="AddressType.Billing" :key="1" id="billing-address" />
         <UiDivider class-name="w-screen md:w-auto -mx-4 md:mx-0" id="bottom-billing-divider" />
         <div class="relative" :class="{ 'pointer-events-none opacity-50': disableShippingPayment }">
-          <ShippingMethod
-            :shipping-methods="shippingMethods"
-            :disabled="disableShippingPayment"
-            @update:shipping-method="handleShippingMethodUpdate"
-          />
+          <ShippingMethod :disabled="disableShippingPayment" @update:shipping-method="handleShippingMethodUpdate" />
           <SfLoaderCircular
             v-if="disableShippingPayment"
             class="absolute mt-5 right-0 left-0 m-auto z-[999]"
             size="2xl"
           />
           <UiDivider class="w-screen md:w-auto -mx-4 md:mx-0" />
-          <CheckoutPayment
-            :payment-methods="paymentMethods"
-            :disabled="disableShippingPayment"
-            @update:active-payment="handlePaymentMethodUpdate"
-          />
+          <CheckoutPayment :disabled="disableShippingPayment" @update:active-payment="handlePaymentMethodUpdate" />
         </div>
         <UiDivider class="w-screen md:w-auto -mx-4 md:mx-0 mb-10" />
         <CheckoutGeneralTerms />
@@ -146,7 +138,6 @@ const {
   loadPayment,
   loadShipping,
   paymentMethods,
-  shippingMethods,
   selectedPaymentId,
   handleShippingMethodUpdate,
   handlePaymentMethodUpdate,

apps/web/pages/readonly-checkout.vue

@@ -16,9 +16,9 @@
         <AddressContainer :disabled="true" :type="AddressType.Billing" :key="1" id="billing-address" />
         <UiDivider :class="dividerClass" />
         <div class="relative">
-          <ShippingMethod :shipping-methods="shippingMethods" disabled />
+          <ShippingMethod disabled />
           <UiDivider :class="dividerClass" />
-          <CheckoutPayment :payment-methods="paymentMethods" disabled />
+          <CheckoutPayment disabled />
         </div>
         <UiDivider :class="`${dividerClass} mb-10`" />
         <div class="text-sm mx-4 md:pb-0">
@@ -77,9 +77,9 @@ const { loading: createOrderLoading, createOrder } = useMakeOrder();
 const { shippingPrivacyAgreement } = useAdditionalInformation();
 const { loading: executeOrderLoading, executeOrder } = usePayPal();
 const { processingOrder } = useProcessingOrder();
-const { setInitialCartTotal, changedTotal } = useCartTotalChange();
+const { setInitialCartTotal, changedTotal, handleCartTotalChanges } = useCartTotalChange();
 const { checkboxValue: termsAccepted, setShowErrors } = useAgreementCheckbox('checkoutGeneralTerms');
-const { loadPayment, loadShipping, paymentMethods, shippingMethods } = useCheckoutPagePaymentAndShipping();
+const { loadPayment, loadShipping } = useCheckoutPagePaymentAndShipping();
 const { data: billingAddresses, getAddresses: getBillingAddresses } = useAddress(AddressType.Billing);
 const {
   data: shippingAddresses,
@@ -124,6 +124,7 @@ const fetchShippingAndPaymentMethods = async () => {
 
 const handleAuthUserInit = async () => {
   try {
+    await getShippingAddresses();
     await useFetchAddress(AddressType.Shipping).fetchServer();
     await persistShippingAddress();
     await useFetchAddress(AddressType.Billing).fetchServer();
@@ -139,7 +140,7 @@ const setClientCheckoutAddress = async () => {
   try {
     await useCheckoutAddress(AddressType.Shipping).set(shippingAddresses.value[0], true);
     await useCheckoutAddress(AddressType.Billing).set(billingAddresses.value[0], true);
-    await setInitialCartTotal();
+    await handleCartTotalChanges();
   } catch (error) {
     useHandleError(error as ApiError);
   }

docs/changelog/changelog_en.md

@@ -96,6 +96,7 @@ NPM_AUTH_TOKEN="<TOKEN>"
 - The `HeroCarousel` no longer overlaps the navigation menu on mobile devices.
 - Improved CLS for hero skeleton.
 - Fixed, createOrder now handles errors more reliable and resets the buy button if an error occurs.
+- Fixed multiple issues in the PayPal readonly checkout process.
 - Added missing condition to block action.
 - Fixed a bug where PayPal payments were stored as "Cash in Advance".