Rename component filename

modules/ppcp-blocks/resources/js/Components/card-fields.js

@@ -0,0 +1,73 @@
+import {useEffect, useState} from '@wordpress/element';
+
+import {
+    PayPalScriptProvider,
+    PayPalCardFieldsProvider,
+    PayPalCardFieldsForm,
+} from "@paypal/react-paypal-js";
+
+import {CheckoutHandler} from "./checkout-handler";
+import {createOrder, onApprove} from "../card-fields-config";
+
+export function CardFields({config, eventRegistration, emitResponse}) {
+    const {onPaymentSetup} = eventRegistration;
+    const {responseTypes} = emitResponse;
+
+    const [cardFieldsForm, setCardFieldsForm] = useState();
+
+    const getCardFieldsForm = (cardFieldsForm) => {
+        setCardFieldsForm(cardFieldsForm)
+    }
+
+    const wait = (milliseconds) => {
+        return new Promise((resolve) => {
+            console.log('start...')
+            setTimeout(() => {
+                console.log('resolve')
+                resolve()
+            }, milliseconds)
+        })
+    };
+
+    useEffect(
+        () =>
+            onPaymentSetup(() => {
+                async function handlePaymentProcessing() {
+                    await cardFieldsForm.submit();
+
+                    // TODO temporary workaround to wait for onApprove to resolve
+                    await wait(3000)
+
+                    return {
+                        type: responseTypes.SUCCESS,
+                    }
+                }
+
+                return handlePaymentProcessing();
+            }),
+        [onPaymentSetup, cardFieldsForm]
+    );
+
+    return (
+        <>
+            <PayPalScriptProvider
+                options={{
+                    clientId: config.scriptData.client_id,
+                    components: "card-fields",
+                    dataNamespace: 'ppcp-block-card-fields',
+                }}
+            >
+                <PayPalCardFieldsProvider
+                    createOrder={createOrder}
+                    onApprove={onApprove}
+                    onError={(err) => {
+                        console.error(err);
+                    }}
+                >
+                    <PayPalCardFieldsForm/>
+                    <CheckoutHandler getCardFieldsForm={getCardFieldsForm}/>
+                </PayPalCardFieldsProvider>
+            </PayPalScriptProvider>
+        </>
+    )
+}