From 088f19e56958da1134ed53ba7466d931e25b8761 Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Sat, 29 May 2021 21:19:38 +0530 Subject: [PATCH 1/8] Paypal added --- package-lock.json | 45 ++++++++ package.json | 1 + src/Donations/Components/PaymentsForm.tsx | 11 +- src/Donations/PaymentMethods/NewPaypal.tsx | 113 +++++++++++++++++++++ src/Layout/QueryParamContext.tsx | 1 - src/Utils/projects/filterProjects.ts | 2 - 6 files changed, 168 insertions(+), 5 deletions(-) create mode 100644 src/Donations/PaymentMethods/NewPaypal.tsx diff --git a/package-lock.json b/package-lock.json index 2bb47398..e0ffb988 100644 --- a/package-lock.json +++ b/package-lock.json @@ -509,6 +509,33 @@ "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz", "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==" }, + "@paypal/paypal-js": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/@paypal/paypal-js/-/paypal-js-3.1.10.tgz", + "integrity": "sha512-NGKXjCOU7993pqtVie0E9YmaGs29Q7vWEQe77DhHeBb5qJT8PmEfhi/dDIyjYTCmqXlLsy+f8aPipYllRC4uNw==", + "requires": { + "promise-polyfill": "^8.2.0" + } + }, + "@paypal/react-paypal-js": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@paypal/react-paypal-js/-/react-paypal-js-6.0.1.tgz", + "integrity": "sha512-lj2RbOMEhcCDyS34+KMQW/2m3o3I1hYS41jtRk8iSKOtYOza0aUJCrRfCe9LiDhSL01NrRSJxC+Z2Fc8DX063Q==", + "requires": { + "@paypal/paypal-js": "^3.1.10", + "@paypal/sdk-constants": "^1.0.103" + } + }, + "@paypal/sdk-constants": { + "version": "1.0.104", + "resolved": "https://registry.npmjs.org/@paypal/sdk-constants/-/sdk-constants-1.0.104.tgz", + "integrity": "sha512-DEB8fhpjWZadJa+EMJUdp5w62l9s75oUG9UjBkEy578E6tw5oJ6qGeKIugcdnT23aht0qz1tQC96O+FuUIrHOQ==", + "requires": { + "cross-domain-utils": "^2.0.10", + "hi-base32": "^0.5.0", + "zalgo-promise": "^1.0.28" + } + }, "@polka/url": { "version": "1.0.0-next.12", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz", @@ -1717,6 +1744,14 @@ "sha.js": "^2.4.8" } }, + "cross-domain-utils": { + "version": "2.0.34", + "resolved": "https://registry.npmjs.org/cross-domain-utils/-/cross-domain-utils-2.0.34.tgz", + "integrity": "sha512-ke4PirGRXwEElEmE/7k5aCvCW+EqbgseT7AOObzFfaVnOLuEVN9SjVWoOfS/qAT0rDPn3ggmNDW6mguMBy4HgA==", + "requires": { + "zalgo-promise": "^1.0.11" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3437,6 +3472,11 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hi-base32": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/hi-base32/-/hi-base32-0.5.1.tgz", + "integrity": "sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA==" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6982,6 +7022,11 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "zalgo-promise": { + "version": "1.0.46", + "resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.46.tgz", + "integrity": "sha512-tzPpQRqaQQavxl17TY98nznvmr+judUg3My7ugsUcRDbdqisYOE2z79HNNDgXnyX3eA0mf2bMOJrqHptt00npg==" } } } diff --git a/package.json b/package.json index f6f66f49..d896df33 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@material-ui/core": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.57", "@next/bundle-analyzer": "^10.1.3", + "@paypal/react-paypal-js": "^6.0.1", "@sentry/browser": "^6.2.5", "@sentry/integrations": "^6.2.5", "@sentry/node": "^6.2.5", diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx index 6e0d3bdb..27df50c6 100644 --- a/src/Donations/Components/PaymentsForm.tsx +++ b/src/Donations/Components/PaymentsForm.tsx @@ -15,12 +15,12 @@ import { import ToggleSwitch from "../../Common/InputTypes/ToggleSwitch"; import CardPayments from "../PaymentMethods/CardPayments"; import SepaPayments from "../PaymentMethods/SepaPayments"; -import PaypalPayments from "../PaymentMethods/PaypalPayments"; import GiroPayPayments from "../PaymentMethods/GiroPayPayments"; import SofortPayments from "../PaymentMethods/SofortPayment"; import TaxDeductionOption from "../Micros/TaxDeductionOption"; import ButtonLoader from "../../Common/ContentLoaders/ButtonLoader"; import { useAuth0 } from "@auth0/auth0-react"; +import NewPaypal from "../PaymentMethods/NewPaypal"; interface Props {} @@ -33,6 +33,7 @@ function PaymentsForm({}: Props): ReactElement { const { isLoading, isAuthenticated, getAccessTokenSilently } = useAuth0(); + const [isDonationLoading, setisDonationLoading] = React.useState(false) const { paymentSetup, country, @@ -90,6 +91,7 @@ function PaymentsForm({}: Props): ReactElement { if (!isLoading && isAuthenticated) { token = await getAccessTokenSilently(); } + setisDonationLoading(true) const donation = await createDonationFunction({ isTaxDeductible, country, @@ -112,6 +114,7 @@ function PaymentsForm({}: Props): ReactElement { setdonationID(donation.id); setshouldCreateDonation(false); } + setisDonationLoading(false) } // This feature allows the user to show or hide their names in the leaderboard @@ -132,6 +135,10 @@ function PaymentsForm({}: Props): ReactElement { } }, [shouldCreateDonation]); + React.useEffect(()=>{ + setPaymentType("CARD") + },[currency]) + return ready ? ( isPaymentProcessing ? ( @@ -263,7 +270,7 @@ function PaymentsForm({}: Props): ReactElement { aria-labelledby={`scrollable-force-tab-${"Paypal"}`} > {paymentType === "Paypal" && ( - { + console.log("new data", data); + }); + } + + function onApprove(data, actions) { + // This function captures the funds from the transaction. + return actions.order.capture().then(function (details) { + console.log("details", details); + console.log("data", data); + + // This function shows a transaction success message to your buyer. + payDonationFunction("paypal", data); + }); + } + + const onError = (data) => { + payDonationFunction("paypal", data); + }; + + const onCancel = (data) => { + let error = { + ...data, + type: "error", + error: { message: "Transaction cancelled" }, + }; + payDonationFunction("paypal", error); + }; + + return ( + <> + + + + + + ); +} + +function ReloadButton({ currency }: any) { + const [{ isPending, options }, dispatch] = usePayPalScriptReducer(); + + React.useEffect(() => { + dispatch({ + type: "resetOptions", + value: { + ...options, + currency: currency, + }, + }); + }, [currency]); + + return isPending ?
: null; +} + +export default NewPaypal; + +// https://www.sandbox.paypal.com/smart/buttons?style.layout=vertical&style.color=gold&style.shape=rect&style.tagline=false&components.0=buttons&locale.country=GB&locale.lang=en&sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWwuY29tL3Nkay9qcz9jbGllbnQtaWQ9QVZNOE91TFZIUEpKRkFCSFFkWGRybVYwUVpVNWpTMHdfQVl0TXppalZxbTFldGZsS1lwS1hkUW9xTVVYNWI1bVFxSHJSaEtCR19vS1BiNWkmZW5hYmxlLWZ1bmRpbmc9dmVubW8sZ2lyb3BheSxzb2ZvcnQmZGlzYWJsZS1mdW5kaW5nPWNhcmQmY3VycmVuY3k9RVVSIiwiYXR0cnMiOnsiZGF0YS11aWQiOiJ1aWRfeGNlcXlkeGhqYnhuYmtxc2FxY2xia21wcmpmdGprIn19&clientID=AVM8OuLVHPJJFABHQdXdrmV0QZU5jS0w_AYtMzijVqm1etflKYpKXdQoqMUX5b5mQqHrRhKBG_oKPb5i&sdkCorrelationID=9a284836557ea&storageID=uid_6b4b80bba1_mdg6ndk6ndk&sessionID=uid_fc949cdd8f_mta6mzi6ntm&buttonSessionID=uid_63f93d8b86_mta6ndm6nte&env=sandbox&fundingEligibility=eyJwYXlwYWwiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6ZmFsc2V9LCJwYXlsYXRlciI6eyJlbGlnaWJsZSI6ZmFsc2UsInByb2R1Y3RzIjp7InBheUluNCI6eyJlbGlnaWJsZSI6ZmFsc2V9fX0sImNhcmQiOnsiZWxpZ2libGUiOmZhbHNlLCJicmFuZGVkIjp0cnVlLCJpbnN0YWxsbWVudHMiOmZhbHNlLCJ2ZW5kb3JzIjp7InZpc2EiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6dHJ1ZX0sIm1hc3RlcmNhcmQiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6dHJ1ZX0sImFtZXgiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6dHJ1ZX0sImRpc2NvdmVyIjp7ImVsaWdpYmxlIjpmYWxzZSwidmF1bHRhYmxlIjp0cnVlfSwiaGlwZXIiOnsiZWxpZ2libGUiOmZhbHNlLCJ2YXVsdGFibGUiOmZhbHNlfSwiZWxvIjp7ImVsaWdpYmxlIjpmYWxzZSwidmF1bHRhYmxlIjp0cnVlfSwiamNiIjp7ImVsaWdpYmxlIjpmYWxzZSwidmF1bHRhYmxlIjp0cnVlfX19LCJ2ZW5tbyI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJpdGF1Ijp7ImVsaWdpYmxlIjpmYWxzZX0sImNyZWRpdCI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJzZXBhIjp7ImVsaWdpYmxlIjpmYWxzZX0sImlkZWFsIjp7ImVsaWdpYmxlIjpmYWxzZX0sImJhbmNvbnRhY3QiOnsiZWxpZ2libGUiOmZhbHNlfSwiZ2lyb3BheSI6eyJlbGlnaWJsZSI6dHJ1ZX0sImVwcyI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJzb2ZvcnQiOnsiZWxpZ2libGUiOnRydWV9LCJteWJhbmsiOnsiZWxpZ2libGUiOmZhbHNlfSwicDI0Ijp7ImVsaWdpYmxlIjpmYWxzZX0sInppbXBsZXIiOnsiZWxpZ2libGUiOmZhbHNlfSwid2VjaGF0cGF5Ijp7ImVsaWdpYmxlIjpmYWxzZX0sInBheXUiOnsiZWxpZ2libGUiOmZhbHNlfSwiYmxpayI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJ0cnVzdGx5Ijp7ImVsaWdpYmxlIjpmYWxzZX0sIm94eG8iOnsiZWxpZ2libGUiOmZhbHNlfSwibWF4aW1hIjp7ImVsaWdpYmxlIjpmYWxzZX0sImJvbGV0byI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJtZXJjYWRvcGFnbyI6eyJlbGlnaWJsZSI6ZmFsc2V9fQ&platform=desktop&experiment.enableVenmo=true&flow=purchase¤cy=EUR&intent=capture&commit=true&vault=false&enableFunding.0=venmo&enableFunding.1=giropay&enableFunding.2=sofort&disableFunding.0=card&debug=false&applePaySupport=false&supportsPopups=true&supportedNativeBrowser=false diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx index 14468655..d5441178 100644 --- a/src/Layout/QueryParamContext.tsx +++ b/src/Layout/QueryParamContext.tsx @@ -177,7 +177,6 @@ export default function QueryParamProvider({ children }: any) { `/app/projects?_scope=map` ); if (projects.data) { - console.log('projects.data',projects.data); setAllProjects(projects.data); // const allowedDonationsProjects = getFilteredProjects(projects.data,'allow'); diff --git a/src/Utils/projects/filterProjects.ts b/src/Utils/projects/filterProjects.ts index c0cece7a..21f9096b 100644 --- a/src/Utils/projects/filterProjects.ts +++ b/src/Utils/projects/filterProjects.ts @@ -61,8 +61,6 @@ export function getSearchProjects(projects: Array, keyword: string) { } export function getRandomProjects(arr:Array, n:number) { - console.log('arr',arr); - var result = new Array(n), len = arr.length, taken = new Array(len); From 15735b576b9cd7219bc2c308898bbe2f2eee9275 Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Sat, 29 May 2021 22:17:26 +0530 Subject: [PATCH 2/8] Removed capture --- src/Donations/PaymentMethods/NewPaypal.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/Donations/PaymentMethods/NewPaypal.tsx b/src/Donations/PaymentMethods/NewPaypal.tsx index 2a9aad2e..4cb2017e 100644 --- a/src/Donations/PaymentMethods/NewPaypal.tsx +++ b/src/Donations/PaymentMethods/NewPaypal.tsx @@ -48,20 +48,10 @@ function NewPaypal({ brand_name: "Plant-for-the-Planet", }, }) - .then((data) => { - console.log("new data", data); - }); } function onApprove(data, actions) { - // This function captures the funds from the transaction. - return actions.order.capture().then(function (details) { - console.log("details", details); - console.log("data", data); - - // This function shows a transaction success message to your buyer. - payDonationFunction("paypal", data); - }); + payDonationFunction("paypal", data); } const onError = (data) => { From 9b755510c1b3b817e363257b5d041bb4f394a905 Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Mon, 31 May 2021 14:47:54 +0530 Subject: [PATCH 3/8] Added capture and customId --- src/Donations/PaymentMethods/NewPaypal.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/Donations/PaymentMethods/NewPaypal.tsx b/src/Donations/PaymentMethods/NewPaypal.tsx index 4cb2017e..d45c69be 100644 --- a/src/Donations/PaymentMethods/NewPaypal.tsx +++ b/src/Donations/PaymentMethods/NewPaypal.tsx @@ -28,9 +28,6 @@ function NewPaypal({ "disable-funding": "card", currency: currency, }; - // const [state, setstate] = useState(initialState) - - console.log("paymentSetup?.gateways", paymentSetup?.gateways); function createOrder(data, actions) { return actions.order @@ -42,6 +39,7 @@ function NewPaypal({ currency: currency, }, invoice_id: `planet-${donationID}`, + custom_id:donationID }, ], application_context: { @@ -51,7 +49,10 @@ function NewPaypal({ } function onApprove(data, actions) { - payDonationFunction("paypal", data); + return actions.order.capture().then(function (details) { + // This function shows a transaction success message to your buyer. + payDonationFunction("paypal", data); + }); } const onError = (data) => { @@ -98,6 +99,4 @@ function ReloadButton({ currency }: any) { return isPending ?
: null; } -export default NewPaypal; - -// https://www.sandbox.paypal.com/smart/buttons?style.layout=vertical&style.color=gold&style.shape=rect&style.tagline=false&components.0=buttons&locale.country=GB&locale.lang=en&sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWwuY29tL3Nkay9qcz9jbGllbnQtaWQ9QVZNOE91TFZIUEpKRkFCSFFkWGRybVYwUVpVNWpTMHdfQVl0TXppalZxbTFldGZsS1lwS1hkUW9xTVVYNWI1bVFxSHJSaEtCR19vS1BiNWkmZW5hYmxlLWZ1bmRpbmc9dmVubW8sZ2lyb3BheSxzb2ZvcnQmZGlzYWJsZS1mdW5kaW5nPWNhcmQmY3VycmVuY3k9RVVSIiwiYXR0cnMiOnsiZGF0YS11aWQiOiJ1aWRfeGNlcXlkeGhqYnhuYmtxc2FxY2xia21wcmpmdGprIn19&clientID=AVM8OuLVHPJJFABHQdXdrmV0QZU5jS0w_AYtMzijVqm1etflKYpKXdQoqMUX5b5mQqHrRhKBG_oKPb5i&sdkCorrelationID=9a284836557ea&storageID=uid_6b4b80bba1_mdg6ndk6ndk&sessionID=uid_fc949cdd8f_mta6mzi6ntm&buttonSessionID=uid_63f93d8b86_mta6ndm6nte&env=sandbox&fundingEligibility=eyJwYXlwYWwiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6ZmFsc2V9LCJwYXlsYXRlciI6eyJlbGlnaWJsZSI6ZmFsc2UsInByb2R1Y3RzIjp7InBheUluNCI6eyJlbGlnaWJsZSI6ZmFsc2V9fX0sImNhcmQiOnsiZWxpZ2libGUiOmZhbHNlLCJicmFuZGVkIjp0cnVlLCJpbnN0YWxsbWVudHMiOmZhbHNlLCJ2ZW5kb3JzIjp7InZpc2EiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6dHJ1ZX0sIm1hc3RlcmNhcmQiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6dHJ1ZX0sImFtZXgiOnsiZWxpZ2libGUiOnRydWUsInZhdWx0YWJsZSI6dHJ1ZX0sImRpc2NvdmVyIjp7ImVsaWdpYmxlIjpmYWxzZSwidmF1bHRhYmxlIjp0cnVlfSwiaGlwZXIiOnsiZWxpZ2libGUiOmZhbHNlLCJ2YXVsdGFibGUiOmZhbHNlfSwiZWxvIjp7ImVsaWdpYmxlIjpmYWxzZSwidmF1bHRhYmxlIjp0cnVlfSwiamNiIjp7ImVsaWdpYmxlIjpmYWxzZSwidmF1bHRhYmxlIjp0cnVlfX19LCJ2ZW5tbyI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJpdGF1Ijp7ImVsaWdpYmxlIjpmYWxzZX0sImNyZWRpdCI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJzZXBhIjp7ImVsaWdpYmxlIjpmYWxzZX0sImlkZWFsIjp7ImVsaWdpYmxlIjpmYWxzZX0sImJhbmNvbnRhY3QiOnsiZWxpZ2libGUiOmZhbHNlfSwiZ2lyb3BheSI6eyJlbGlnaWJsZSI6dHJ1ZX0sImVwcyI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJzb2ZvcnQiOnsiZWxpZ2libGUiOnRydWV9LCJteWJhbmsiOnsiZWxpZ2libGUiOmZhbHNlfSwicDI0Ijp7ImVsaWdpYmxlIjpmYWxzZX0sInppbXBsZXIiOnsiZWxpZ2libGUiOmZhbHNlfSwid2VjaGF0cGF5Ijp7ImVsaWdpYmxlIjpmYWxzZX0sInBheXUiOnsiZWxpZ2libGUiOmZhbHNlfSwiYmxpayI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJ0cnVzdGx5Ijp7ImVsaWdpYmxlIjpmYWxzZX0sIm94eG8iOnsiZWxpZ2libGUiOmZhbHNlfSwibWF4aW1hIjp7ImVsaWdpYmxlIjpmYWxzZX0sImJvbGV0byI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJtZXJjYWRvcGFnbyI6eyJlbGlnaWJsZSI6ZmFsc2V9fQ&platform=desktop&experiment.enableVenmo=true&flow=purchase¤cy=EUR&intent=capture&commit=true&vault=false&enableFunding.0=venmo&enableFunding.1=giropay&enableFunding.2=sofort&disableFunding.0=card&debug=false&applePaySupport=false&supportsPopups=true&supportedNativeBrowser=false +export default NewPaypal; \ No newline at end of file From 6d7f5a9b3c76542416eb4260db160ece63c4206e Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Tue, 1 Jun 2021 21:00:52 +0530 Subject: [PATCH 4/8] Added type and temp env --- .env.local | 2 +- src/Donations/PaymentMethods/NewPaypal.tsx | 4 ++++ src/Donations/PaymentMethods/PaymentFunctions.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.env.local b/.env.local index 481f6b1c..bf528b54 100644 --- a/.env.local +++ b/.env.local @@ -2,7 +2,7 @@ NEXTAUTH_URL=http://localhost:3000 AUTH0_CLIENT_ID=vvUXomlonN8aRLyUQeXyw7nUwnfPRrCy AUTH0_CUSTOM_DOMAIN=pftp.eu.auth0.com -API_ENDPOINT=app-development.plant-for-the-planet.org +API_ENDPOINT=treecounter-review-pr-402.herokuapp.com CDN_URL=cdn.planetapp.workers.dev/development diff --git a/src/Donations/PaymentMethods/NewPaypal.tsx b/src/Donations/PaymentMethods/NewPaypal.tsx index d45c69be..34603ea9 100644 --- a/src/Donations/PaymentMethods/NewPaypal.tsx +++ b/src/Donations/PaymentMethods/NewPaypal.tsx @@ -51,6 +51,10 @@ function NewPaypal({ function onApprove(data, actions) { return actions.order.capture().then(function (details) { // This function shows a transaction success message to your buyer. + data = { + ...data, + type:"sdk" + } payDonationFunction("paypal", data); }); } diff --git a/src/Donations/PaymentMethods/PaymentFunctions.ts b/src/Donations/PaymentMethods/PaymentFunctions.ts index f1e16b3e..55585fbf 100644 --- a/src/Donations/PaymentMethods/PaymentFunctions.ts +++ b/src/Donations/PaymentMethods/PaymentFunctions.ts @@ -239,6 +239,7 @@ export async function payDonationFunction({ setIsPaymentProcessing(false); setPaymentError(paidDonation.data.message); } else if ( + paidDonation.data.status === "success" || paidDonation.data.paymentStatus === "success" || paidDonation.data.paymentStatus === "pending" ) { From aae647bd90c29edf501b98d7c5ee9b0bbbde8bf9 Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Tue, 1 Jun 2021 21:01:11 +0530 Subject: [PATCH 5/8] production env for testing --- .env.production | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.production b/.env.production index d1edf9df..edaf91d8 100644 --- a/.env.production +++ b/.env.production @@ -2,7 +2,7 @@ NEXTAUTH_URL= AUTH0_CLIENT_ID= AUTH0_CUSTOM_DOMAIN=accounts.plant-for-the-planet.org -API_ENDPOINT=app.plant-for-the-planet.org +API_ENDPOINT=treecounter-review-pr-402.herokuapp.com CDN_URL=cdn.plant-for-the-planet.org From fb775a241a40c32c0b363040ec3d844ca8939945 Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Fri, 4 Jun 2021 15:53:43 +0530 Subject: [PATCH 6/8] Changed env variables --- .env.local | 2 +- .env.production | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.env.local b/.env.local index bf528b54..481f6b1c 100644 --- a/.env.local +++ b/.env.local @@ -2,7 +2,7 @@ NEXTAUTH_URL=http://localhost:3000 AUTH0_CLIENT_ID=vvUXomlonN8aRLyUQeXyw7nUwnfPRrCy AUTH0_CUSTOM_DOMAIN=pftp.eu.auth0.com -API_ENDPOINT=treecounter-review-pr-402.herokuapp.com +API_ENDPOINT=app-development.plant-for-the-planet.org CDN_URL=cdn.planetapp.workers.dev/development diff --git a/.env.production b/.env.production index edaf91d8..d1edf9df 100644 --- a/.env.production +++ b/.env.production @@ -2,7 +2,7 @@ NEXTAUTH_URL= AUTH0_CLIENT_ID= AUTH0_CUSTOM_DOMAIN=accounts.plant-for-the-planet.org -API_ENDPOINT=treecounter-review-pr-402.herokuapp.com +API_ENDPOINT=app.plant-for-the-planet.org CDN_URL=cdn.plant-for-the-planet.org From e0cdffe9ff23aa13771e824ead99d42efaf9a7ce Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Sat, 5 Jun 2021 18:51:32 +0530 Subject: [PATCH 7/8] Paypal error handling and uid --- src/Donations/Components/PaymentsForm.tsx | 3 ++ src/Donations/PaymentMethods/NewPaypal.tsx | 45 +++++++++++----------- src/Layout/QueryParamContext.tsx | 6 +++ 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/Donations/Components/PaymentsForm.tsx b/src/Donations/Components/PaymentsForm.tsx index 52d7c575..24868a9a 100644 --- a/src/Donations/Components/PaymentsForm.tsx +++ b/src/Donations/Components/PaymentsForm.tsx @@ -53,6 +53,7 @@ function PaymentsForm({}: Props): ReactElement { giftDetails, isTaxDeductible, isDirectDonation, + setDonationUid } = React.useContext(QueryParamContext); React.useEffect(() => { @@ -115,6 +116,7 @@ function PaymentsForm({}: Props): ReactElement { setdonationID(donation.id); setshouldCreateDonation(false); setisCreatingDonation(false); + setDonationUid(donation.uid) } setisDonationLoading(false) } @@ -287,6 +289,7 @@ function PaymentsForm({}: Props): ReactElement { currency={currency} donationID={donationID} payDonationFunction={onSubmitPayment} + setPaymentError={setPaymentError} /> )}
diff --git a/src/Donations/PaymentMethods/NewPaypal.tsx b/src/Donations/PaymentMethods/NewPaypal.tsx index 34603ea9..fb076e54 100644 --- a/src/Donations/PaymentMethods/NewPaypal.tsx +++ b/src/Donations/PaymentMethods/NewPaypal.tsx @@ -4,6 +4,7 @@ import { PayPalButtons, usePayPalScriptReducer, } from "@paypal/react-paypal-js"; +import { QueryParamContext } from "../../Layout/QueryParamContext"; interface Props { paymentSetup: any; @@ -12,6 +13,7 @@ interface Props { currency: string; donationID: any; payDonationFunction: Function; + setPaymentError: Function; } function NewPaypal({ @@ -21,6 +23,7 @@ function NewPaypal({ currency, donationID, payDonationFunction, + setPaymentError }: Props): ReactElement { const initialOptions = { "client-id": paymentSetup?.gateways.paypal.authorization.client_id, @@ -29,23 +32,24 @@ function NewPaypal({ currency: currency, }; + const { donationUid } = React.useContext(QueryParamContext); + function createOrder(data, actions) { - return actions.order - .create({ - purchase_units: [ - { - amount: { - value: treeCount * treeCost, - currency: currency, - }, - invoice_id: `planet-${donationID}`, - custom_id:donationID + return actions.order.create({ + purchase_units: [ + { + amount: { + value: (treeCount * treeCost).toFixed(2), + currency: currency, }, - ], - application_context: { - brand_name: "Plant-for-the-Planet", + invoice_id: `planet-${donationID}`, + custom_id: donationUid, }, - }) + ], + application_context: { + brand_name: "Plant-for-the-Planet", + }, + }); } function onApprove(data, actions) { @@ -53,23 +57,18 @@ function NewPaypal({ // This function shows a transaction success message to your buyer. data = { ...data, - type:"sdk" - } + type: "sdk", + }; payDonationFunction("paypal", data); }); } const onError = (data) => { - payDonationFunction("paypal", data); + setPaymentError(`Your order ${data.orderID} failed due to some error.`) }; const onCancel = (data) => { - let error = { - ...data, - type: "error", - error: { message: "Transaction cancelled" }, - }; - payDonationFunction("paypal", error); + setPaymentError('Order was cancelled, please try again') }; return ( diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx index 2e40c923..69bf5709 100644 --- a/src/Layout/QueryParamContext.tsx +++ b/src/Layout/QueryParamContext.tsx @@ -55,6 +55,8 @@ export const QueryParamContext = React.createContext({ setSelectedProjects: (value: Array) => {}, allProjects: [], allowTaxDeductionChange: true, + donationUid:null, + setDonationUid: (value: string) => "" }); export default function QueryParamProvider({ children }: any) { @@ -78,6 +80,8 @@ export default function QueryParamProvider({ children }: any) { const [isDirectDonation, setisDirectDonation] = React.useState(false); + const [donationUid, setDonationUid] = useState(null) + const [isPaymentOptionsLoading, setIsPaymentOptionsLoading] = React.useState(false); @@ -519,6 +523,8 @@ export default function QueryParamProvider({ children }: any) { setSelectedProjects, allProjects, allowTaxDeductionChange, + donationUid, + setDonationUid }} > {children} From 5e0d9749139ba651bc3146d54bb1c71266f6c437 Mon Sep 17 00:00:00 2001 From: Harsh Vitra Date: Sat, 5 Jun 2021 18:56:12 +0530 Subject: [PATCH 8/8] Removed old paypal setup --- package-lock.json | 15 -- package.json | 1 - src/Donations/PaymentMethods/Paypal.jsx | 130 ------------------ .../PaymentMethods/PaypalPayments.tsx | 34 ----- 4 files changed, 180 deletions(-) delete mode 100644 src/Donations/PaymentMethods/Paypal.jsx delete mode 100644 src/Donations/PaymentMethods/PaypalPayments.tsx diff --git a/package-lock.json b/package-lock.json index e0ffb988..38a5ef9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5641,21 +5641,6 @@ "object-assign": "^4.1.1" } }, - "react-async-script-loader": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/react-async-script-loader/-/react-async-script-loader-0.3.0.tgz", - "integrity": "sha1-x0KzyiXgi6Yat+tkNx+BQCdpK4Y=", - "requires": { - "hoist-non-react-statics": "^1.0.3" - }, - "dependencies": { - "hoist-non-react-statics": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz", - "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=" - } - } - }, "react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", diff --git a/package.json b/package.json index d896df33..6b883705 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "next-i18next": "^8.1.3", "node-sass": "^5.0.0", "react": "17.0.2", - "react-async-script-loader": "^0.3.0", "react-dom": "17.0.2", "react-hook-form": "6.14.2", "styled-jsx": "^3.4.4", diff --git a/src/Donations/PaymentMethods/Paypal.jsx b/src/Donations/PaymentMethods/Paypal.jsx deleted file mode 100644 index c2f3d454..00000000 --- a/src/Donations/PaymentMethods/Paypal.jsx +++ /dev/null @@ -1,130 +0,0 @@ -// eslint-disable-next-line no-unused-vars -import React from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import scriptLoader from 'react-async-script-loader'; - -class Paypal extends React.Component { - constructor(props) { - super(props); - if (typeof window !== 'undefined') { - window.React = React; - window.ReactDOM = ReactDOM; - } - - this.state = { - showButton: false - }; - } - - componentDidMount() { - const { isScriptLoaded, isScriptLoadSucceed } = this.props; - - if (isScriptLoaded && isScriptLoadSucceed) { - this.setState({ showButton: true }); - } - } - - UNSAFE_componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) { - const isLoadedButWasntLoadedBefore = - !this.state.showButton && !this.props.isScriptLoaded && isScriptLoaded; - - if (isLoadedButWasntLoadedBefore) { - if (isScriptLoadSucceed) { - this.setState({ showButton: true }); - } - } - } - - render() { - let paypal; - if (typeof window !== 'undefined') { - paypal = window.paypal; - } - const { - amount, - mode, - currency, - onSuccess, - donationId, - clientID - } = this.props; - - const { showButton } = this.state; - - const CLIENT = { - // users client id here - [mode]: clientID - }; - const invoice_number = `planet-${donationId}`; - //debug('invoice we are sending to paypal as donationId:', invoice_number); - const payment = () => { - return paypal.rest.payment.create(mode, CLIENT, { - transactions: [ - { - amount: { - total: Math.round(amount * 100) / 100, - currency - }, - invoice_number: invoice_number - } - ] - }); - }; - - // see https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/ - const buttonStyle = { - color: 'silver', // gold | blue | silver | black - shape: 'pill', // pill | rect - label: 'pay', // checkout | credit | pay | buynow | paypal | installment - size: 'large' // small | medium | large | responsive - }; - - const onAuthorize = data => { - onSuccess(data); - }; - - const onError = data => { - onSuccess(data); - }; - - const onCancel = data => { - let error = { - ...data, - type: 'error', - error: { message: 'Transaction cancelled' } - }; - onSuccess(error); - }; - - return ( -
- {showButton && ( - - )} -
- ); - } -} - -Paypal.propTypes = { - amount: PropTypes.number.isRequired, - currency: PropTypes.string.isRequired, - isScriptLoaded: PropTypes.bool, - isScriptLoadSucceed: PropTypes.bool, - mode: PropTypes.string, - onSuccess: PropTypes.func -}; - -export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')( - Paypal -); diff --git a/src/Donations/PaymentMethods/PaypalPayments.tsx b/src/Donations/PaymentMethods/PaypalPayments.tsx deleted file mode 100644 index 818363d5..00000000 --- a/src/Donations/PaymentMethods/PaypalPayments.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { ReactElement } from "react"; -import Paypal from "./Paypal"; -import { paypalCurrencies } from "./../../Utils/paypalCurrencies"; -function PaypalPayments({ - paymentSetup, - treeCount, - treeCost, - currency, - donationID, - payDonationFunction, -}: any): ReactElement { - return ( -
- {paypalCurrencies.includes(currency) && paymentSetup?.gateways.paypal && ( -
- { - payDonationFunction("paypal", data); - }} - amount={treeCost * treeCount} - currency={currency} - donationId={donationID} - mode={ - paymentSetup?.gateways.paypal.isLive ? "production" : "sandbox" - } - clientID={paymentSetup?.gateways.paypal.authorization.client_id} - /> -
- )} -
- ); -} - -export default PaypalPayments;