From cd00b927f90ef8a63efcff40423b9d3478d29c45 Mon Sep 17 00:00:00 2001 From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com> Date: Thu, 9 Nov 2023 17:13:47 +0530 Subject: [PATCH 01/16] refactor: remove conditions --- src/Donations/Components/DonationsForm.tsx | 14 ++++----- .../PaymentMethods/PaymentMethodTabs.tsx | 4 +-- .../PaymentRequestCustomButton.tsx | 30 +++++++++---------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx index 6652bff0..0e3e7371 100644 --- a/src/Donations/Components/DonationsForm.tsx +++ b/src/Donations/Components/DonationsForm.tsx @@ -108,7 +108,7 @@ function DonationsForm(): ReactElement { //Only used for native pay. Is this still applicable, or should this be removed? const onPaymentFunction = async ( paymentMethod: PaymentMethod, - paymentRequest: PaymentRequest, + paymentRequest: PaymentRequest ) => { // eslint-disable-next-line no-underscore-dangle setPaymentType(paymentRequest._activeBackingLibraryName); //TODOO - is _activeBackingLibraryName a private variable? @@ -223,7 +223,7 @@ function DonationsForm(): ReactElement { amount: getFormatedCurrency( i18n.language, currency, - paymentSetup.unitCost * quantity, + paymentSetup.unitCost * quantity ), }); break; @@ -233,7 +233,7 @@ function DonationsForm(): ReactElement { amount: getFormatedCurrency( i18n.language, currency, - paymentSetup.unitCost * quantity, + paymentSetup.unitCost * quantity ), }); break; @@ -389,13 +389,13 @@ function DonationsForm(): ReactElement { paymentSetup?.gateways?.stripe?.account && currency ? ( { +}: // isApplePayEnabled, +// isGooglePayEnabled, +PaymentButtonProps): ReactElement | null => { const { t, ready } = useTranslation(["common"]); const { paymentRequest, setPaymentRequest } = useContext(QueryParamContext); @@ -74,6 +74,7 @@ export const PaymentRequestCustomButton = ({ if (result) { setPaymentRequest(pr); } + console.log(result); }); } }, [stripe, paymentRequest, country, currency, amount]); @@ -130,6 +131,7 @@ export const PaymentRequestCustomButton = ({ } }; }, [paymentRequest, onPaymentFunction]); + console.log(paymentRequest); return ready ? (
- ) : paymentRequest._canMakePaymentAvailability.GOOGLE_PAY && - isGooglePayEnabled ? ( //TODOO - is _canMakePaymentAvailability a private variable? + ) : paymentRequest._canMakePaymentAvailability.GOOGLE_PAY ? ( //TODOO - is _canMakePaymentAvailability a private variable?
- ) : paymentRequest._canMakePaymentAvailability.GOOGLE_PAY ? ( //TODOO - is _canMakePaymentAvailability a private variable? + ) : paymentRequest._canMakePaymentAvailability.GOOGLE_PAY && + isGooglePayEnabled ? ( //TODOO - is _canMakePaymentAvailability a private variable?
- setIsPlanetCashActive((isPlanetCashActive) => !isPlanetCashActive) - } + onChange={() => { + setIsPlanetCashActive( + (isPlanetCashActive) => !isPlanetCashActive + ); + }} />
diff --git a/src/Layout/QueryParamContext.tsx b/src/Layout/QueryParamContext.tsx index a738e250..0e068f50 100644 --- a/src/Layout/QueryParamContext.tsx +++ b/src/Layout/QueryParamContext.tsx @@ -138,7 +138,9 @@ const QueryParamProvider: FC = ({ children }) => { const [transferDetails, setTransferDetails] = useState(null); - const [isPlanetCashActive, setIsPlanetCashActive] = useState(false); + const [isPlanetCashActive, setIsPlanetCashActive] = useState( + null + ); // Only used when planetCash is active const [onBehalf, setOnBehalf] = useState(false); @@ -151,7 +153,7 @@ const QueryParamProvider: FC = ({ children }) => { const [donation, setDonation] = useState(null); const [paymentRequest, setPaymentRequest] = useState( - null, + null ); const [errors, setErrors] = React.useState(null); @@ -163,8 +165,9 @@ const QueryParamProvider: FC = ({ children }) => { setshowErrorCard, shouldQueryParamAdd: false, }; - const response: { data: Record } = - await apiRequest(requestParams); + const response: { data: Record } = await apiRequest( + requestParams + ); setEnabledCurrencies(response.data); } catch (err) { console.log(err); @@ -198,7 +201,7 @@ const QueryParamProvider: FC = ({ children }) => { function testURL(url: string) { const pattern = new RegExp( - /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g, + /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g ); // regex source https://tutorial.eyehunts.com/js/url-regex-validation-javascript-example-code/ return !!pattern.test(url); @@ -242,7 +245,7 @@ const QueryParamProvider: FC = ({ children }) => { const projects = response.data as Project[]; if (projects) { const allowedDonationsProjects = projects.filter( - (project) => project.properties.allowDonations === true, + (project) => project.properties.allowDonations === true ); setAllProjects(allowedDonationsProjects); if (allowedDonationsProjects?.length < 6) { @@ -373,7 +376,7 @@ const QueryParamProvider: FC = ({ children }) => { const found = countriesData.some( (arrayCountry) => arrayCountry.countryCode?.toUpperCase() === - config.data.country?.toUpperCase(), + config.data.country?.toUpperCase() ); if (found) { // This is to make sure donations which are already created with some country do not get affected by country from user config @@ -492,8 +495,9 @@ const QueryParamProvider: FC = ({ children }) => { tenant, locale: i18n.language, }; - const paymentSetupData: { data: PaymentOptions } = - await apiRequest(requestParams); + const paymentSetupData: { data: PaymentOptions } = await apiRequest( + requestParams + ); if (paymentSetupData.data) { const paymentSetup = paymentSetupData.data; if (shouldSetPaymentDetails) { From 2ab3093635e408b3f3a31a725f23f5ccd4458505 Mon Sep 17 00:00:00 2001 From: mohitb35 <44917347+mohitb35@users.noreply.github.com> Date: Tue, 16 Jan 2024 17:14:30 +0530 Subject: [PATCH 13/16] fix: shows a loader while refreshing native pay btns - prevents jerky layout --- .../PaymentRequestCustomButton.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx b/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx index 376175f0..b75aaf27 100644 --- a/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx +++ b/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx @@ -15,6 +15,7 @@ import { } from "@stripe/stripe-js/types/stripe-js/payment-request"; import { PaymentMethod } from "@stripe/stripe-js/types/api/payment-methods"; import { Stripe } from "@stripe/stripe-js/types/stripe-js/stripe"; +import Skeleton from "@mui/material/Skeleton"; interface PaymentButtonProps { country: string; @@ -50,6 +51,8 @@ export const PaymentRequestCustomButton = ({ const stripe = useStripe(); const [canMakePayment, setCanMakePayment] = useState(false); const [paymentLoading, setPaymentLoading] = useState(false); + // Tracks if native pay buttons were shown at least once to prevent layout jerks + const [wasNativePayInit, setWasNativePayInit] = useState(false); useEffect(() => { setPaymentRequest(null); @@ -75,6 +78,7 @@ export const PaymentRequestCustomButton = ({ pr.canMakePayment().then((result) => { if (result) { setPaymentRequest(pr); + setWasNativePayInit(true); } }); } @@ -194,8 +198,25 @@ export const PaymentRequestCustomButton = ({
{t("or")}
)} - ) : null - ) : null} + ) : ( + <> + ) + ) : wasNativePayInit ? ( + //Loader shown if native pay was initiated at least once to avoid a jerky effect when payment details change +
+ + {!isPaymentPage && ( +
{t("or")}
+ )} +
+ ) : ( + <> + )} {!isPaymentPage && (