chore: payment logic changed

atls · Aug 17, 2023 · cb022d3 · cb022d3
1 parent c4b500d
commit cb022d3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 24 deletions.
diff --git a/packages/payment-widget/src/ui/payment-form.component.tsx b/packages/payment-widget/src/ui/payment-form.component.tsx
@@ -1,6 +1,6 @@
 import React                    from 'react'
+import { FormEvent }      from 'react'
 import { FC }                   from 'react'
-import { MouseEvent }           from 'react'
 import { FormattedMessage }     from 'react-intl'
 
 import { PaymentWidgetProps }   from '../interfaces'
@@ -19,15 +19,12 @@ export const PaymentForm: FC<PaymentWidgetProps> = ({
   additionalFields,
 }) => {
   const isLoaded = useInit()
-
-  const buttonType = receipt ? 'button' : 'submit'
-  const payHandler = receipt ? undefined : makePayment
-  const payWithCheck = receipt
-    ? (e: MouseEvent<HTMLButtonElement>) => makePaymentWithCheck(e, receipt)
-    : undefined
+  const pay = receipt
+    ? (e: FormEvent<HTMLFormElement>) => makePaymentWithCheck(e, receipt)
+    : makePayment
 
   return (
-    <form name='payform-tinkoff' onSubmit={payHandler}>
+    <form name='payform-tinkoff' onSubmit={pay}>
       <PaymentSettings {...settings} isGenerateReceipt={!!receipt} />
       <PaymentFields
         amount={amount}
@@ -36,12 +33,7 @@ export const PaymentForm: FC<PaymentWidgetProps> = ({
         direction={styles?.direction}
         inputGaps={styles?.inputGaps}
       />
-      <PaymentButton
-        type={buttonType}
-        disabled={!isLoaded}
-        onClick={payWithCheck}
-        {...styles?.button}
-      >
+      <PaymentButton type='submit' disabled={!isLoaded} {...styles?.button}>
         <FormattedMessage id='payment_widget.pay' defaultMessage='Оплатить' />
       </PaymentButton>
     </form>

diff --git a/packages/payment-widget/src/utils/pay.util.ts b/packages/payment-widget/src/utils/pay.util.ts
@@ -1,9 +1,10 @@
+import { FormEvent }                   from 'react'
+
 import { FormEventHandler } from 'react'
-import { MouseEvent }       from 'react'
 
-import { Receipt }          from '../interfaces'
-import { ReceiptSettings }  from '../interfaces'
-import { convertToPenny }   from './convert-to-penny.util'
+import { Receipt }                    from '../interfaces'
+import { ReceiptSettings }            from '../interfaces'
+import { convertToPenny }             from './convert-to-penny.util'
 
 export const makePayment: FormEventHandler<HTMLFormElement> = (event) => {
   event.preventDefault()
@@ -12,16 +13,15 @@ export const makePayment: FormEventHandler<HTMLFormElement> = (event) => {
 }
 
 export const makePaymentWithCheck = (
-  event: MouseEvent<HTMLButtonElement>,
+  event: FormEvent<HTMLFormElement>,
   receiptSettings: ReceiptSettings
 ) => {
   event.preventDefault()
-  const form = event.currentTarget?.parentElement
 
-  if (!form) return
-  const receiptElement = form.querySelector('input[name="receipt"]') as HTMLInputElement
-  const email = form.querySelector('input[name="email"]') as HTMLInputElement
-  const phone = form.querySelector('input[name="phone"]') as HTMLInputElement
+  const form = event.target as HTMLFormElement
+  const receiptElement = form.elements.namedItem('receipt') as HTMLInputElement
+  const email = form.elements.namedItem('email') as HTMLInputElement
+  const phone = form.elements.namedItem('phone') as HTMLInputElement
 
   const receipt: Receipt = {
     Taxation: receiptSettings.Taxation,