Fix double place order request

Author: acasazza

packages/react-components/src/components/orders/PlaceOrderButton.tsx

@@ -5,8 +5,8 @@ import {
   useRef,
   useState,
   type MouseEvent,
-  type JSX,
-} from 'react';
+  type JSX
+} from 'react'
 import Parent from '../utils/Parent'
 import { type ChildrenFunction } from '#typings/index'
 import PlaceOrderContext from '#context/PlaceOrderContext'
@@ -67,7 +67,8 @@ export function PlaceOrderButton(props: Props): JSX.Element {
     options,
     paymentType,
     setButtonRef,
-    setPlaceOrderStatus
+    setPlaceOrderStatus,
+    status
   } = useContext(PlaceOrderContext)
   const [notPermitted, setNotPermitted] = useState(true)
   const [forceDisable, setForceDisable] = useState(disabled)
@@ -251,7 +252,8 @@ export function PlaceOrderButton(props: Props): JSX.Element {
         // @ts-expect-error no type
         ref?.current?.disabled === false &&
         currentCustomerPaymentSourceId == null &&
-        autoPlaceOrder
+        autoPlaceOrder &&
+        status === 'standby'
       ) {
         // NOTE: This is a workaround for the case when the user reloads the page after selecting a customer payment source
         if (
@@ -344,11 +346,19 @@ export function PlaceOrderButton(props: Props): JSX.Element {
         paymentSource: checkPaymentSource,
         currentCustomerPaymentSourceId
       }))
-    setForceDisable(false)
-    onClick && placed && onClick(placed)
-    setIsLoading(false)
-    if (setPlaceOrderStatus != null) {
-      setPlaceOrderStatus({ status: 'standby' })
+    if (placed && setPlaceOrderStatus != null) {
+      if (placed.placed) {
+        setPlaceOrderStatus({ status: 'placing' })
+        onClick && placed && onClick(placed)
+      } else {
+        setForceDisable(false)
+        onClick && placed && onClick(placed)
+        setIsLoading(false)
+        setPlaceOrderStatus({ status: 'standby' })
+      }
+    } else {
+      setForceDisable(false)
+      setIsLoading(false)
     }
   }
   const disabledButton = disabled !== undefined ? disabled : notPermitted

packages/react-components/src/components/payment_gateways/AdyenGateway.tsx

@@ -8,13 +8,12 @@ import PaymentSourceContext from '#context/PaymentSourceContext'
 import { type PaymentResource } from '#reducers/PaymentMethodReducer'
 import { type StripeElementLocale } from '@stripe/stripe-js'
 import isEmpty from 'lodash/isEmpty'
-import { useContext, type JSX } from 'react';
+import { useContext, type JSX } from 'react'
 import AdyenPayment from '#components/payment_source/AdyenPayment'
 import PaymentCardsTemplate from '../utils/PaymentCardsTemplate'
 import { jwt } from '#utils/jwt'
 import getCardDetails from '#utils/getCardDetails'
 import { getPaymentAttributes } from '#utils/getPaymentAttributes'
-import { canPlaceOrder } from '#utils/canPlaceOrder'
 
 type Props = GatewayBaseType
 
@@ -38,8 +37,6 @@ export function AdyenGateway(props: Props): JSX.Element | null {
     useContext(PaymentMethodContext)
   const paymentResource: PaymentResource = 'adyen_payments'
   const locale = order?.language_code as StripeElementLocale
-  console.log('AdyenGateway order', order, order?.status)
-  console.log('AdyenGateway order can place? --- ', order && canPlaceOrder(order))
   if (!readonly && payment?.id !== currentPaymentMethodId) return null
   // @ts-expect-error no type
   const clientKey = paymentSource?.public_key

packages/react-components/src/components/payment_methods/PaymentMethod.tsx

@@ -1,4 +1,10 @@
-import { useState, useEffect, type MouseEvent, useContext, type JSX } from 'react';
+import {
+  useState,
+  useEffect,
+  type MouseEvent,
+  useContext,
+  type JSX
+} from 'react'
 import PaymentMethodContext from '#context/PaymentMethodContext'
 import PaymentMethodChildrenContext from '#context/PaymentMethodChildrenContext'
 import type { LoaderType } from '#typings'
@@ -19,6 +25,7 @@ import {
 import { isEmpty } from '#utils/isEmpty'
 import { getAvailableExpressPayments } from '#utils/expressPaymentHelper'
 import PlaceOrderContext from '#context/PlaceOrderContext'
+import { sortPaymentMethods } from '#utils/payment-methods/sortPaymentMethods'
 
 export interface PaymentMethodOnClickParams {
   payment?: PaymentMethodType | Record<string, any>
@@ -48,6 +55,10 @@ type Props = {
    * Enable express payment. Other payment methods will be disabled.
    */
   expressPayments?: boolean
+  /**
+   * Sort payment methods by an array of strings
+   */
+  sortBy?: Array<PaymentMethodType['payment_source_type']>
 } & Omit<JSX.IntrinsicElements['div'], 'onClick' | 'children'> &
   (
     | {
@@ -72,6 +83,7 @@ export function PaymentMethod({
   expressPayments,
   hide,
   onClick,
+  sortBy,
   ...p
 }: Props): JSX.Element {
   const [loading, setLoading] = useState(true)
@@ -200,7 +212,13 @@ export function PaymentMethod({
       setPaymentSelected('')
     }
   }, [paymentMethods, currentPaymentMethodId])
-  const components = paymentMethods
+
+  const sortedPaymentMethods =
+    paymentMethods != null && sortBy != null
+      ? sortPaymentMethods(paymentMethods, sortBy)
+      : paymentMethods
+
+  const components = sortedPaymentMethods
     ?.filter((payment) => {
       if (Array.isArray(hide)) {
         const source = payment?.payment_source_type as PaymentResource

packages/react-components/src/components/payment_methods/PaymentMethodsContainer.tsx

@@ -2,7 +2,14 @@
 import PaymentMethodContext, {
   defaultPaymentMethodContext
 } from '#context/PaymentMethodContext'
-import { type ReactNode, useContext, useEffect, useReducer, useMemo, type JSX } from 'react';
+import {
+  type ReactNode,
+  useContext,
+  useEffect,
+  useReducer,
+  useMemo,
+  type JSX
+} from 'react'
 import paymentMethodReducer, {
   paymentMethodInitialState,
   getPaymentMethods,