TQLG-244: fix issue with payment method (#87)

* TQLG-244: fix issue with payment method

* TQLG-244: fix issue with payment method

components/Account/Order/AccountOrderItem.vue

@@ -5,12 +5,11 @@ const props = defineProps<{
     orderId: string;
 }>();
 
-const { order, loadOrderDetails, shippingMethod, paymentMethod, status, shippingAddress, billingAddress } =
+const { order, loadOrderDetails, shippingMethod, paymentMethod, paymentState, status, shippingAddress, billingAddress } =
     useOrderDetails(props.orderId, {
         stateMachineState: {},
     });
 
-const { state: paymentState } = useOrderPayment(order);
 
 const shippingStatus = computed(() => {
     const stateName = order.value?.deliveries?.[0]?.stateMachineState?.translated?.name;

composables/useOrderDetails.ts

@@ -0,0 +1,32 @@
+import { useOrderDetails as useBaseOrderDetails } from '@shopware-pwa/composables-next';
+import type { UseOrderDetailsReturn } from '@shopware-pwa/composables-next';
+import type { Schemas } from '@shopware/api-client/api-types';
+import type { ComputedRef } from 'vue';
+
+export type UseCustomOrderDetailsReturn = UseOrderDetailsReturn & {
+    paymentState: ComputedRef<Schemas["StateMachineState"] | undefined>;
+}
+
+export function useOrderDetails(
+    orderId: string,
+    associations?: Schemas["Criteria"]["associations"],
+): UseCustomOrderDetailsReturn {
+    const baseUserDetails = useBaseOrderDetails(orderId, associations);
+    const paymentMethod = computed(() => {
+        const transactions = baseUserDetails.order.value?.transactions;
+
+        return transactions?.[transactions.length - 1]?.paymentMethod;
+    });
+
+    const paymentState = computed(() => {
+        const transactions = baseUserDetails.order.value?.transactions;
+
+        return transactions?.[transactions.length - 1]?.stateMachineState;
+    });
+
+    return {
+        ...baseUserDetails,
+        paymentMethod,
+        paymentState,
+    };
+}