Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes bugs with Planetcash selector #460

Merged
merged 5 commits into from
Jan 18, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: shows a loader while refreshing native pay btns
- prevents jerky layout
  • Loading branch information
mohitb35 committed Jan 16, 2024
commit 2ab3093635e408b3f3a31a725f23f5ccd4458505
25 changes: 23 additions & 2 deletions src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@
} 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;
@@ -31,26 +32,28 @@
paymentSetup: PaymentOptions;
}

export const PaymentRequestCustomButton = ({
country,
currency,
amount,
onPaymentFunction,
continueNext,
isPaymentPage,
paymentLabel,
frequency,
paymentSetup,
}: PaymentButtonProps): ReactElement | null => {
const isApplePayEnabled = process.env.ENABLE_APPLE_PAY === "true" || false;
const isGooglePayEnabled = process.env.ENABLE_GOOGLE_PAY === "true" || false;
const { t, ready } = useTranslation(["common"]);
const { paymentRequest, setPaymentRequest } = useContext(QueryParamContext);

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);

Check notice on line 56 in src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx

codefactor.io / CodeFactor

src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx#L35-L56

Complex Method
useEffect(() => {
setPaymentRequest(null);
}, []);
@@ -75,6 +78,7 @@
pr.canMakePayment().then((result) => {
if (result) {
setPaymentRequest(pr);
setWasNativePayInit(true);
}
});
}
@@ -194,8 +198,25 @@
<div className="separator-text mb-10">{t("or")}</div>
)}
</div>
) : null
) : null}
) : (
<></>
)
) : wasNativePayInit ? (
//Loader shown if native pay was initiated at least once to avoid a jerky effect when payment details change
<div className="w-100">
<Skeleton
className="mb-10"
variant="rectangular"
width={"100%"}
height={40}
/>
{!isPaymentPage && (
<div className="separator-text mb-10">{t("or")}</div>
)}
</div>
) : (
<></>
)}

{!isPaymentPage && (
<button
Loading