add package-lock and remove custom components in favor or static ui (#157)

Author: EvanReinstein

client/prebuiltPages/react/package-lock.json

@@ -7,12 +7,11 @@ import {
   type OnErrorData,
   type OnCompleteData,
   type OnCancelDataOneTimePayments,
+  PayPalOneTimePaymentButton,
+  VenmoOneTimePaymentButton,
+  PayLaterOneTimePaymentButton,
+  PayPalGuestPaymentButton,
 } from "@paypal/react-paypal-js/sdk-v6";
-import PayPalButton from "../components/PayPalButton";
-import VenmoButton from "../components/VenmoButton";
-import PayLaterButton from "../components/PayLaterButton";
-import PayPalBasicCardButton from "../components/PayPalBasicCardButton";
-import PayPalCreditOneTimeButton from "../components/PayPalCreditOneTimeButton";
 import BaseCheckout from "../../../pages/BaseCheckout";
 import type { ModalType, ModalContent, ProductItem } from "../../../types";
 import { captureOrder, createOrder } from "../../../utils";
@@ -102,34 +101,28 @@ const Checkout = () => {
     </div>
   ) : (
     <>
-      <PayPalButton
+      <PayPalOneTimePaymentButton
         createOrder={handleCreateOrder}
         presentationMode="auto"
         {...handlePaymentCallbacks}
       />
 
-      <VenmoButton
+      <VenmoOneTimePaymentButton
         createOrder={handleCreateOrder}
         presentationMode="auto"
         {...handlePaymentCallbacks}
       />
 
-      <PayLaterButton
+      <PayLaterOneTimePaymentButton
         createOrder={handleCreateOrder}
         presentationMode="auto"
         {...handlePaymentCallbacks}
       />
 
-      <PayPalBasicCardButton
+      <PayPalGuestPaymentButton
         createOrder={handleCreateOrder}
         {...handlePaymentCallbacks}
       />
-
-      <PayPalCreditOneTimeButton
-        createOrder={handleCreateOrder}
-        presentationMode="auto"
-        {...handlePaymentCallbacks}
-      />
     </>
   );
 

client/prebuiltPages/react/src/payments/oneTimePayment/components/PayLaterButton.tsx

@@ -6,12 +6,11 @@ import {
   type OnCompleteData,
   type OnErrorData,
   type OnCancelDataOneTimePayments,
+  PayPalOneTimePaymentButton,
+  VenmoOneTimePaymentButton,
+  PayLaterOneTimePaymentButton,
+  PayPalGuestPaymentButton,
 } from "@paypal/react-paypal-js/sdk-v6";
-import PayPalButton from "../components/PayPalButton";
-import VenmoButton from "../components/VenmoButton";
-import PayLaterButton from "../components/PayLaterButton";
-import PayPalBasicCardButton from "../components/PayPalBasicCardButton";
-import PayPalCreditOneTimeButton from "../components/PayPalCreditOneTimeButton";
 import BaseStaticButtons from "../../../pages/BaseStaticButtons";
 import type { ModalType, ModalContent, ProductItem } from "../../../types";
 import { captureOrder, createOrder } from "../../../utils";
@@ -33,8 +32,8 @@ const StaticButtons = () => {
       setModalState("cancel");
     },
 
-    onError: (error: OnErrorData) => {
-      console.error("Payment error:", error);
+    onError: (data: OnErrorData) => {
+      console.error("Payment error:", data);
       setModalState("error");
     },
 
@@ -95,34 +94,28 @@ const StaticButtons = () => {
 
     return (
       <>
-        <PayPalButton
+        <PayPalOneTimePaymentButton
           createOrder={() => handleCreateOrder(products)}
           presentationMode="auto"
           {...handlePaymentCallbacks}
         />
 
-        <VenmoButton
+        <VenmoOneTimePaymentButton
           createOrder={() => handleCreateOrder(products)}
           presentationMode="auto"
           {...handlePaymentCallbacks}
         />
 
-        <PayLaterButton
+        <PayLaterOneTimePaymentButton
           createOrder={() => handleCreateOrder(products)}
           presentationMode="auto"
           {...handlePaymentCallbacks}
         />
 
-        <PayPalBasicCardButton
+        <PayPalGuestPaymentButton
           createOrder={() => handleCreateOrder(products)}
           {...handlePaymentCallbacks}
         />
-
-        <PayPalCreditOneTimeButton
-          createOrder={() => handleCreateOrder(products)}
-          presentationMode="auto"
-          {...handlePaymentCallbacks}
-        />
       </>
     );
   };

client/prebuiltPages/react/src/payments/oneTimePayment/components/PayPalBasicCardButton.tsx

@@ -5,8 +5,8 @@ import {
   type OnCompleteData,
   type OnErrorData,
   type OnCancelDataSavePayments,
+  PayPalSavePaymentButton,
 } from "@paypal/react-paypal-js/sdk-v6";
-import PayPalSaveButton from "../components/PayPalSaveButton";
 import PayPalCreditSaveButton from "../components/PayPalCreditSaveButton";
 import BaseCheckout from "../../../pages/BaseCheckout";
 import type { ModalType, ModalContent } from "../../../types";
@@ -76,7 +76,7 @@ const Checkout = () => {
   const paymentButtons = (
     <>
       <div>
-        <PayPalSaveButton
+        <PayPalSavePaymentButton
           createVaultToken={createVaultToken}
           presentationMode="auto"
           {...handleSaveCallbacks}

client/prebuiltPages/react/src/payments/oneTimePayment/components/PayPalButton.tsx

@@ -4,8 +4,8 @@ import {
   type OnCompleteData,
   type OnCancelDataSavePayments,
   type OnErrorData,
+  PayPalSavePaymentButton,
 } from "@paypal/react-paypal-js/sdk-v6";
-import PayPalSaveButton from "../components/PayPalSaveButton";
 import PayPalCreditSaveButton from "../components/PayPalCreditSaveButton";
 import BaseStaticButtons from "../../../pages/BaseStaticButtons";
 import type { ModalType, ModalContent } from "../../../types";
@@ -68,7 +68,7 @@ const StaticButtons = () => {
     return (
       <>
         <div>
-          <PayPalSaveButton
+          <PayPalSavePaymentButton
             createVaultToken={createVaultToken}
             presentationMode="auto"
             {...handleSaveCallbacks}