Skip to content

Commit aa96314

Browse files
mmoehabbmmoehabb
committed
modif: minor design modification in the checkout page.
1 parent e1308be commit aa96314

File tree

7 files changed

+165
-280
lines changed

7 files changed

+165
-280
lines changed

‎apps/web/src/components/Checkout/Forms/Card.tsx‎

Lines changed: 22 additions & 274 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,15 @@ import {
1111
usePayWithCard,
1212
useCancelUnpaidOrder,
1313
} from "@litespace/headless/fawry";
14-
import { IframeDialog } from "@litespace/ui/IframeDilaog";
1514
import { first } from "lodash";
1615
import { useHotkeys } from "react-hotkeys-hook";
1716
import { env } from "@/lib/env";
1817
import { useOnError } from "@/hooks/error";
19-
import { ITransaction, Void } from "@litespace/types";
18+
import { ITransaction } from "@litespace/types";
2019
import { useToast } from "@litespace/ui/Toast";
2120
import { IframeMessage } from "@/constants/iframe";
2221
import { useLogger } from "@litespace/headless/logger";
23-
import { ConfirmationDialog } from "@litespace/ui/ConfirmationDialog";
24-
import RemoveCard from "@litespace/assets/RemoveCard";
22+
import PayWithVisa from "@litespace/assets/PayWithVisa";
2523
import { useBlock } from "@litespace/ui/hooks/common";
2624
import { useRender } from "@litespace/headless/common";
2725
import { TxTypeData } from "@/components/Checkout/types";
@@ -32,6 +30,8 @@ import {
3230
import { track } from "@/lib/analytics";
3331
import { PLAN_PERIOD_LITERAL_TO_PLAN_PERIOD } from "@litespace/utils";
3432
import { usePlanCheckoutUrl } from "@litespace/headless/plans";
33+
import { Button } from "@litespace/ui/Button";
34+
import { Typography } from "@litespace/ui/Typography";
3535

3636
type Form = {
3737
card: string;
@@ -314,278 +314,26 @@ const Payment: React.FC<{
314314
);
315315

316316
return (
317-
<div>
318-
{/* <iframe */}
319-
{/* name="iframe" */}
320-
{/* className="h-[400px] w-full sm:rounded-md" */}
321-
{/* src={fawryExpressUrl || ""} */}
322-
{/* /> */}
323-
<a href={fawryExpressUrl || ""}>Fawry Express</a>
324-
{/* <form */}
325-
{/* name="pay-with-card" */}
326-
{/* onSubmit={(e) => { */}
327-
{/* e.preventDefault(); */}
328-
{/* form.submit(); */}
329-
{/* }} */}
330-
{/* className="flex flex-col gap-6 md:gap-4 lg:gap-6" */}
331-
{/* > */}
332-
{/* <div className="flex flex-col gap-4"> */}
333-
{/* <Typography tag="p" className="text-caption md:text-body font-medium"> */}
334-
{/* {intl("checkout.payment.description")} */}
335-
{/* </Typography> */}
336-
{/**/}
337-
{/* <Select */}
338-
{/* id="card" */}
339-
{/* label={intl("checkout.payment.card.card-number")} */}
340-
{/* className="flex-1" */}
341-
{/* value={form.state.card} */}
342-
{/* options={cardOptions} */}
343-
{/* placeholder={intl("checkout.payment.card.card-number-placeholder")} */}
344-
{/* valueDir="ltr" */}
345-
{/* onChange={(value) => { */}
346-
{/* form.set("card", value); */}
347-
{/* track("select_card", "checkout"); */}
348-
{/* }} */}
349-
{/* state={form.errors.card ? "error" : undefined} */}
350-
{/* helper={form.errors.card} */}
351-
{/* asButton={isEmpty(cardOptions)} */}
352-
{/* onTriggerClick={() => { */}
353-
{/* if (!isEmpty(cardOptions)) return; */}
354-
{/* addCardDialog.show(); */}
355-
{/* track("add_card", "checkout"); */}
356-
{/* }} */}
357-
{/* onOpenChange={(open) => { */}
358-
{/* if (!open || !isEmpty(cardOptions)) return; */}
359-
{/* addCardDialog.show(); */}
360-
{/* track("add_card", "checkout"); */}
361-
{/* }} */}
362-
{/* post={ */}
363-
{/* <Button */}
364-
{/* type="natural" */}
365-
{/* variant="primary" */}
366-
{/* size="large" */}
367-
{/* htmlType="button" */}
368-
{/* startIcon={<AddCard className="icon" />} */}
369-
{/* disabled={false} */}
370-
{/* loading={false} */}
371-
{/* onClick={() => { */}
372-
{/* addCardDialog.show(); */}
373-
{/* track("add_card", "checkout"); */}
374-
{/* }} */}
375-
{/* className="ms-2 lg:ms-4 flex-shrink-0" */}
376-
{/* > */}
377-
{/* <Typography */}
378-
{/* tag="span" */}
379-
{/* className="text-body font-medium text-natural-700" */}
380-
{/* > */}
381-
{/* {intl("checkout.payment.card.add-card")} */}
382-
{/* </Typography> */}
383-
{/* </Button> */}
384-
{/* } */}
385-
{/* /> */}
386-
{/**/}
387-
{/* <div className="flex flex-col lg:flex-row gap-4"> */}
388-
{/* <PatternInput */}
389-
{/* id="cvv" */}
390-
{/* size={3} */}
391-
{/* mask=" " */}
392-
{/* format="###" */}
393-
{/* idleDir="rtl" */}
394-
{/* inputSize="large" */}
395-
{/* label={intl("checkout.payment.card.cvv")} */}
396-
{/* placeholder={intl("checkout.payment.card.cvv-placeholder")} */}
397-
{/* state={form.errors.cvv ? "error" : undefined} */}
398-
{/* helper={form.errors.cvv} */}
399-
{/* onValueChange={({ value }) => form.set("cvv", value)} */}
400-
{/* autoComplete="off" */}
401-
{/* onBlur={() => { */}
402-
{/* track("enter_cvv", "checkout", form.state.cvv); */}
403-
{/* }} */}
404-
{/* /> */}
405-
{/* <PatternInput */}
406-
{/* id="phone" */}
407-
{/* mask=" " */}
408-
{/* idleDir="ltr" */}
409-
{/* inputSize="large" */}
410-
{/* name="phone" */}
411-
{/* format="### #### ####" */}
412-
{/* label={intl("checkout.payment.card.phone")} */}
413-
{/* placeholder={intl("checkout.payment.card.phone-placeholder")} */}
414-
{/* state={form.errors.phone ? "error" : undefined} */}
415-
{/* helper={form.errors.phone} */}
416-
{/* value={form.state.phone} */}
417-
{/* autoComplete="off" */}
418-
{/* disabled={!!phone} */}
419-
{/* onValueChange={({ value }) => form.set("phone", value)} */}
420-
{/* onBlur={() => { */}
421-
{/* track("enter_phone", "checkout", form.state.phone); */}
422-
{/* }} */}
423-
{/* /> */}
424-
{/* </div> */}
425-
{/* </div> */}
426-
{/**/}
427-
{/* <div> */}
428-
{/* <Typography */}
429-
{/* tag="p" */}
430-
{/* className="hidden md:block text-caption text-brand-700 mb-1" */}
431-
{/* > */}
432-
{/* {intl("checkout.payment.conditions-acceptance")} */}
433-
{/* </Typography> */}
434-
{/* <Button */}
435-
{/* type="main" */}
436-
{/* size="large" */}
437-
{/* htmlType="submit" */}
438-
{/* className="w-full" */}
439-
{/* disabled={pay.isPending || createLesson.isPending} */}
440-
{/* loading={pay.isPending || createLesson.isPending} */}
441-
{/* > */}
442-
{/* <Typography tag="span" className="text text-body font-medium"> */}
443-
{/* {intl("checkout.payment.confirm")} */}
444-
{/* </Typography> */}
445-
{/* </Button> */}
446-
{/* </div> */}
447-
{/**/}
448-
{/* <Typography tag="p" className="text-tiny font-normal text-natural-800"> */}
449-
{/* {intl("checkout.payment.card.confirmation-code-note")} */}
450-
{/* </Typography> */}
451-
{/**/}
452-
{/* <div className="hidden md:flex flex-col gap-2"> */}
453-
{/* <div className="flex gap-2"> */}
454-
{/* <Lock className="w-6 h-6" /> */}
455-
{/* <Typography tag="p" className="text-body font-semibold"> */}
456-
{/* {intl("checkout.payment.safe-and-crypted")} */}
457-
{/* </Typography> */}
458-
{/* </div> */}
459-
{/* <Typography tag="p" className="text-caption text-natural-600"> */}
460-
{/* {intl("checkout.payment.ensure-your-financial-privacy")} */}
461-
{/* </Typography> */}
462-
{/* </div> */}
463-
{/* </form> */}
464-
465-
<IframeDialog
466-
open={addCardDialog.open}
467-
url={addCardTokenUrlQuery.data?.url}
468-
loading={addCardTokenUrlQuery.isPending}
469-
onOpenChange={(open) => {
470-
if (!open) confirmCloseAddCardDialog.show();
471-
}}
472-
/>
473-
474-
<ConfirmCloseAddCardDialog
475-
open={confirmCloseAddCardDialog.open}
476-
back={() => {
477-
confirmCloseAddCardDialog.hide();
478-
}}
479-
cancel={() => {
480-
confirmCloseAddCardDialog.hide();
481-
addCardDialog.hide();
482-
}}
483-
/>
484-
485-
{pay.data || createLesson.data ? (
486-
<IframeDialog
487-
open
488-
onOpenChange={(open) => {
489-
if (!open && isTransactionPending)
490-
return confirmClosePayDialog.show();
491-
createLesson.reset();
492-
pay.reset();
493-
}}
494-
url={pay.data?.redirectUrl || createLesson.data?.redirectUrl}
495-
/>
496-
) : null}
497-
498-
<ConfirmClosePayDialog
499-
open={confirmClosePayDialog.open}
500-
back={() => {
501-
confirmClosePayDialog.hide();
502-
}}
503-
canceling={cancelUnpaidOrder.isPending}
504-
cancel={() => {
505-
if (!pay.data && !createLesson.data) return;
506-
507-
const pendingTx =
508-
transactionStatus !== ITransaction.Status.New &&
509-
transactionStatus === ITransaction.Status.Processed;
510-
const sameTx =
511-
pay.data?.transactionId === transactionId ||
512-
createLesson.data?.transactionId === transactionId;
513-
// only cancel the transaction in case it is still in the `new` status
514-
if (sameTx && !pendingTx) return;
515-
516-
const cancelTxId =
517-
pay.data?.transactionId || createLesson?.data?.transactionId;
518-
519-
if (cancelTxId) {
520-
track("cancel_payment", "checkout");
521-
cancelUnpaidOrder.mutate({ transactionId: cancelTxId });
522-
}
523-
}}
524-
/>
317+
<div className="flex flex-col items-center gap-4 max-w-[320px] md:max-w-full">
318+
<PayWithVisa />
319+
320+
<div className="flex flex-col gap-4">
321+
<Typography tag="h1" className="text-caption font-bold text-center">
322+
{intl("checkout.payment.card.ready-to-pay.title")}
323+
</Typography>
324+
325+
<Typography tag="p" className="text-caption font-medium text-center">
326+
{intl("checkout.payment.card.ready-to-pay.desc")}
327+
</Typography>
328+
</div>
329+
330+
<Button size="large" type="main" className="w-full mt-2">
331+
<a href={fawryExpressUrl || ""}>
332+
{intl("checkout.payment.go-to-pay-page")}
333+
</a>
334+
</Button>
525335
</div>
526336
);
527337
};
528338

529-
const ConfirmCloseAddCardDialog: React.FC<{
530-
open: boolean;
531-
back: Void;
532-
cancel: Void;
533-
}> = ({ open, back, cancel }) => {
534-
const intl = useFormatMessage();
535-
return (
536-
<ConfirmationDialog
537-
open={open}
538-
type="warning"
539-
title={intl("checkout.payment.card.confirm-close-add-card-dialog.title")}
540-
description={intl(
541-
"checkout.payment.card.confirm-close-add-card-dialog.desc"
542-
)}
543-
closable={false}
544-
icon={<RemoveCard />}
545-
actions={{
546-
primary: {
547-
label: intl("labels.go-back"),
548-
onClick: back,
549-
},
550-
secondary: {
551-
label: intl("labels.confirm"),
552-
onClick: cancel,
553-
},
554-
}}
555-
/>
556-
);
557-
};
558-
559-
const ConfirmClosePayDialog: React.FC<{
560-
open: boolean;
561-
back: Void;
562-
cancel: Void;
563-
canceling: boolean;
564-
}> = ({ open, back, cancel, canceling }) => {
565-
const intl = useFormatMessage();
566-
return (
567-
<ConfirmationDialog
568-
open={open}
569-
type="warning"
570-
title={intl("checkout.payment.card.confirm-close-pay-dialog.title")}
571-
description={intl("checkout.payment.card.confirm-close-pay-dialog.desc")}
572-
closable={false}
573-
icon={<RemoveCard />}
574-
actions={{
575-
primary: {
576-
label: intl("labels.go-back"),
577-
disabled: canceling,
578-
onClick: back,
579-
},
580-
secondary: {
581-
label: intl("labels.confirm"),
582-
loading: canceling,
583-
disabled: canceling,
584-
onClick: cancel,
585-
},
586-
}}
587-
/>
588-
);
589-
};
590-
591339
export default Payment;

‎apps/web/src/components/Checkout/Tabs.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,16 @@ const Header: React.FC<{ tab: Tab; setTab(tab: Tab): void }> = ({
5858
setTab={setTab}
5959
tabs={[
6060
{
61-
id: "card",
62-
label: intl("checkout.tabs.paywithcard"),
61+
id: "fawry",
62+
label: intl("checkout.tabs.fawry"),
6363
},
6464
{
6565
id: "ewallet",
6666
label: intl("checkout.tabs.ewallet"),
6767
},
6868
{
69-
id: "fawry",
70-
label: intl("checkout.tabs.fawry"),
69+
id: "card",
70+
label: intl("checkout.tabs.paywithcard"),
7171
},
7272
]}
7373
/>
@@ -95,7 +95,7 @@ const Body: React.FC<{
9595
transactionStatus,
9696
}) => {
9797
return (
98-
<div className="flex flex-col justify-center items-center w-full">
98+
<div className="flex flex-col justify-center items-center sm:w-full">
9999
<div className="flex flex-col md:flex-row items-center md:items-start justify-center gap-6 md:gap-4 lg:gap-10 lg:min-w-[950px] ">
100100
<PaymentPannel
101101
userId={userId}

‎apps/web/src/components/Checkout/TxTypeDetails.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ const Lesson: React.FC<{
178178
>
179179
{intl("checkout.lesson.details")}
180180
</Typography>
181+
181182
<TutorDetails tutor={txTypeDataQuery.data.tutor} />
182183

183184
<Divider />

‎apps/web/src/pages/Checkout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function useCheckoutUrlQueryParams() {
4141

4242
const tab = useMemo((): Tab => {
4343
const tab = params.get("tab");
44-
if (!tab || !isValidTab(tab)) return "card";
44+
if (!tab || !isValidTab(tab)) return "fawry";
4545
return tab;
4646
}, [params]);
4747

0 commit comments

Comments
 (0)