Optimize load (#39)

* layout before load * update name in example * reset envs
getopenpay · Sep 14, 2024 · 4c25bab · 4c25bab
1 parent 33183db
commit 4c25bab
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/example/src/app/page.tsx b/example/src/app/page.tsx
@@ -26,7 +26,7 @@ interface FormProps {
 }
 
 const Form: FC<FormProps> = (props) => {
-  const { token, separateFrames, onCheckoutSuccess, onSetupPaymentMethodSuccess: onSetupCheckoutSuccess } = props;
+  const { token, separateFrames, onCheckoutSuccess, onSetupPaymentMethodSuccess } = props;
   const [loading, setLoading] = useState<boolean>(true);
   const [amount, setAmount] = useState<string | null>(null);
   const [overlayMessage, setOverlayMessage] = useState<{
@@ -100,12 +100,10 @@ const Form: FC<FormProps> = (props) => {
       onValidationError={onValidationError}
       onCheckoutStarted={onCheckoutStarted}
       onCheckoutSuccess={onCheckoutSuccess}
-      onSetupPaymentMethodSuccess={(paymentMethodID) => {
-        onSetupCheckoutSuccess(paymentMethodID);
-      }}
+      onSetupPaymentMethodSuccess={onSetupPaymentMethodSuccess}
       onCheckoutError={onCheckoutError}
     >
-      {({ submit, applePay, googlePay }) => (
+      {({ submit, applePay, googlePay, loaded }) => (
         <FormWrapper error={validationErrors}>
           {loading && (
             <div data-testid="loading" className="flex items-center">
@@ -147,8 +145,12 @@ const Form: FC<FormProps> = (props) => {
 
           <button
             data-testid="submit-button"
+            disabled={!loaded}
             onClick={submit}
-            className="px-4 py-2 mt-2 w-full font-bold rounded-lg bg-emerald-500 dark:bg-emerald-600 text-white hover:bg-emerald-400 dark:hover:bg-emerald-500 active:bg-emerald-600 dark:active:bg-emerald-700"
+            className={`px-4 py-2 mt-2 w-full font-bold rounded-lg bg-emerald-500 
+                       dark:bg-emerald-600 text-white hover:bg-emerald-400 dark:hover:bg-emerald-500 
+                       active:bg-emerald-600 dark:active:bg-emerald-700
+                       disabled:bg-gray-100 disabled:text-gray-300 disabled:hover:bg-gray-100 disabled:cursor-not-allowed`}
           >
             Pay {amount}
           </button>

diff --git a/lib/components/form.tsx b/lib/components/form.tsx
@@ -88,7 +88,11 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
 
       console.log(`[form] Received ${eventType} event from ${elementId}:`, eventData.payload);
 
-      if (eventType === EventType.enum.FOCUS && !!onFocus) {
+      if (eventType === EventType.enum.LAYOUT) {
+        const height = eventPayload.height ? `${eventPayload.height}px` : '100%';
+        setFormHeight(height);
+        console.log(`[form] Element height set to: ${height}`);
+      } else if (eventType === EventType.enum.FOCUS && !!onFocus) {
         onFocus(eventData.elementId);
       } else if (eventType === EventType.enum.BLUR && !!onBlur) {
         onBlur(eventData.elementId);
@@ -104,15 +108,13 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
         }
         setEventTargets((prevTargets) => ({ ...prevTargets, [elementId]: eventSource }));
 
-        const height = eventPayload.height ? `${eventPayload.height}px` : '100%';
-        setFormHeight(height);
         setTotalAmountAtoms(eventPayload.totalAmountAtoms);
         setCurrency(eventPayload.currency);
         setCheckoutPaymentMethods(eventPayload.checkoutPaymentMethods);
 
         if (!sessionId) setSessionId(eventPayload.sessionId);
 
-        console.log(`[form] Element ${elementId} loaded with height ${height}`);
+        console.log(`[form] Element loaded with prefill data:`, eventPayload);
       } else if (eventType === EventType.enum.TOKENIZE_STARTED) {
         console.log('[form] Tokenization started');
         setPreventClose(true);
@@ -414,6 +416,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
     submit: submitCard,
     applePay: paymentRequests.apple_pay,
     googlePay: paymentRequests.google_pay,
+    loaded,
   };
 
   return (

diff --git a/lib/utils/models.ts b/lib/utils/models.ts
@@ -9,6 +9,7 @@ export type ElementsFormChildrenProps = {
   submit: () => void;
   applePay: PaymentRequestStatus;
   googlePay: PaymentRequestStatus;
+  loaded: boolean;
 };
 
 export type ElementsFormProps = {

diff --git a/lib/utils/shared-models.ts b/lib/utils/shared-models.ts
@@ -96,6 +96,7 @@ export type ElementsStyle<T extends z.ZodTypeAny> = z.infer<ReturnType<typeof El
 
 export const EventType = z.enum([
   // Element -> Form
+  'LAYOUT',
   'LOADED',
   'BLUR',
   'FOCUS',
@@ -154,10 +155,16 @@ export const ValidationErrorEventPayload = z.object({
 });
 export type ValidationErrorEventPayload = z.infer<typeof ValidationErrorEventPayload>;
 
+export const LayoutEventPayload = z.object({
+  type: z.literal(EventType.enum.LAYOUT),
+  height: RequiredString,
+});
+
+export type LayoutEventPayload = z.infer<typeof LayoutEventPayload>;
+
 export const LoadedEventPayload = z.object({
   type: z.literal(EventType.enum.LOADED),
   sessionId: RequiredString,
-  height: RequiredString,
   totalAmountAtoms: z.number(),
   currency: OptionalString,
   checkoutPaymentMethods: z.array(CheckoutPaymentMethod),
@@ -223,6 +230,7 @@ export const EventPayload = z.discriminatedUnion('type', [
   InputEventPayload,
   ErrorEventPayload,
   ValidationErrorEventPayload,
+  LayoutEventPayload,
   LoadedEventPayload,
   SubmitEventPayload,
   TokenizeSuccessEventPayload,