fix paypal donation

public/index.html

@@ -140,8 +140,10 @@
     <div id="root" class="container">
       <div class="proca-progress"></div>
       <div class="proca-widget" id="widget-demo">
-        <div class="alert alert-info proca-Petition" role="alert">
-          <p class="proca-description">
+        <p class="proca-description alert alert-info">
+This text (and all the rest of the page) is written in your CMS, the widget is the action form.
+        </p>
+        <div class="alert alert-warning proca-Petition" role="alert">
             if you want to, you can put a
             <b
               >div with the class="proca-Petition" that will only be shown on
@@ -150,25 +152,15 @@
             of the user journey, for instance to display the text of the
             campaign. <br />This is optional, this text is not part of the
             widget per se, you should put it on your website<br />
-            This is the text of the campaign, consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-            enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
-            ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </p>
         </div>
         <div class="alert alert-warning proca-Share" role="alert">
           <p>
             if you want to, you can put a
             <b
               >div with the class="proca-Share" that will only be shown on the
-              petition step</b
+              share step</b
             >
-            of the user journey, for instance to display the text of the
-            campaign. <br />This is optional, this text is not part of the
-            widget per se, you should put it on your website<br />
+            of the user journey.
           </p>
         </div>
       </div>

src/components/donate/Paypal.js

@@ -1,21 +1,20 @@
 import React from "react";
 import useData from "../../hooks/useData";
 import { PayPalScriptProvider } from "@paypal/react-paypal-js";
-import PayPalButton from "./PayPalButton";
+import PayPalButton from "./buttons/PayPal";
 import { useCampaignConfig } from "../../hooks/useConfig";
 
 const Paypal = ({ onError, onComplete, disabled }) => {
   const config = useCampaignConfig();
   const donateConfig = config.component.donation;
 
   const [formData] = useData();
-  const frequency = formData.frequency;
+  const frequency = formData.frequency || "oneoff";
 
   const providerOptions = {
     "client-id": donateConfig.paypal.clientId,
     currency: donateConfig.currency.code,
   };
-
   if (frequency !== "oneoff") {
     providerOptions["intent"] = "subscription";
     providerOptions["vault"] = "true";

src/components/donate/Stepper.js

@@ -104,7 +104,7 @@ const Steps = () => {
           key="amount"
           onClick={() => {
             setDonateStep(0);
-            goStep("donate_Amount");
+            goStep("Donation");
           }}
         >
           <StyledStepLabel>

src/components/donate/PayPalButton.js → src/components/donate/buttons/PayPal.js

@@ -1,18 +1,18 @@
 import React, { useCallback } from "react";
 
-import Url from "../../lib/urlparser.js";
-import uuid from "../../lib/uuid";
+import Url from "@lib/urlparser.js";
+import uuid from "@lib/uuid";
 
-import useData from "../../hooks/useData";
-import { useCampaignConfig } from "../../hooks/useConfig";
-import dispatch from "../../lib/event";
+import useData from "@hooks/useData";
+import { useCampaignConfig } from "@hooks/useConfig";
+import dispatch from "@lib/event";
 import {
   PayPalButtons,
   FUNDING,
   usePayPalScriptReducer,
   DISPATCH_ACTION,
 } from "@paypal/react-paypal-js";
-import { addDonateContact } from "../../lib/server.js";
+import { addDonateContact } from "@lib/server.js";
 import { Box, Button, CircularProgress, makeStyles } from "@material-ui/core";
 
 const _addContactFromPayPal = (setFormData, contact, payer) => {
@@ -162,6 +162,7 @@ const onApproveOrder = async ({
 };
 
 const onCreateOrder = ({ amount, description, actions }) => {
+console.debug(amount,description,actions);
   return actions.order.create({
     purchase_units: [{ amount: { value: Number.parseFloat(amount) } }],
     description: description,
@@ -332,6 +333,8 @@ const ProcaPayPalButton = props => {
   const buttonOptions =
     frequency === "oneoff" ? orderOptions : subscriptionOptions;
 
+console.log(buttonOptions);
+
   return (
     <Box classes={{ root: classes.root }} className="proca-MuiButton-contained">
       {" "}