Notes

import React from "react";
import { FormCard, Button } from "@qbe/ui-core";
import { Link as Link2 } from "react-router-dom";
import { useMsal } from "@azure/msal-react";
import { useLocation } from "react-router-dom";
import { formatCurrency } from "../../Utils/formatCurrency.js";
import { formatDate } from "../../Utils/formatDate.js";
import "./CheckoutOrder.css";

const CheckoutOrder = () => {
const {state: {confirmationNumber,date, amount}} = useLocation();
const { accounts } = useMsal();
return (
<>
<div className="page-body">
<div className="heading-card">
<FormCard
className="content-container"
description="Payment successfully received. Your insurance has now been issued. If you have any questions, feel free to contact us."
title="Payment successful"
variant="pageTitle"
/>
</div>
<div className="payment-success-container">
<div className="payment-header"></div>
<div className="order-summary">
<p className="heading-summary">
Thank you for choosing us for your insurance needs.
</p>
<p className="content-summary">
Your order summary and policy documentation will be sent to {accounts[0].username}
</p>
<div className="order-details">
<div className="order-detail-row">
<span className="right-align">Order number</span>
<span className="left-align">{confirmationNumber}</span>
</div>
<div className="order-detail-row">
<span className="right-align">Order date</span>
<span className="left-align">{formatDate(date)}</span>
</div>
<div className="order-detail-row">
<span className="right-align">Order total (1 item)</span>
<hr />
<span className="left-align">{formatCurrency(amount)}</span>
</div>
</div>
</div>
<div className="return-button">
<Link2 to={"/policydashboard"}>
{" "}
<Button
variant="secondary-on-light"
className="policy-btn-header"
label="Return to dashboard"
size="medium"
/>{" "}
</Link2>
</div>
</div>
</div>
</>
);
};

export default CheckoutOrder;
------------------------------------------------------------
.payment-success-container {
max-width: 600px;
margin: 0 auto;
border-radius: 1px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}

.page-body {
background-color: #F7F8F9;
height: 92vh;
}

.payment-header {
text-align: center;
padding: 10px;
background-color: white;
}

.payment-header h1 {
margin-top: 50px;
background-color: white;
margin: 0;
font-size: 24px;
}

.payment-header p {
margin: 8px 0 0;
font-size: 16px;
background-color: white;
}

.order-summary {
padding: 20px;
text-align: center;
background-color: white;
padding-left: 40px;
padding-right: 40px;
}

.order-details {
margin-top: 20px;
text-align: left;
border-top: 1px solid black;
padding-top: 10px;
}

.order-detail-row {
display: flex;
justify-content: space-between;
margin: 8px 0;
border-bottom: 1px solid #cccccc;
}

.return-button {
text-align: center;
padding: 20px 0;
background-color: white;
}

.return-button {
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
justify-content: center;
display: flex;
padding-bottom: 40px;
}

.content-container {
height: 204px !important;
opacity: 1;
color: rgba(25, 25, 25, 1);
font-family: "Inter-Regular";
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: center;
line-height: 24px;
}

.heading-card {
max-width: 600px;
margin: 0 auto;
justify-content: center;
display: flex;
margin-bottom: 15px;
padding-top: 30px;
background-color: #f7f8f9;
}

/* used capital naming convention for component */
/* .MuiTypography-root {
opacity: 1;
font-family: "Stag-Medium";
font-size: 32px;
font-weight: 500;
font-style: Medium;
letter-spacing: 1px;
text-align: center;
line-height: 40px;
}

.css-2czkkq-MuiTypography-root {
opacity: 1;
color: rgba(25, 25, 25, 1);
font-family: "Inter-Regular";
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: center;
line-height: 24px;
} */

.heading-summary {
opacity: 1;
color: rgba(25, 25, 25, 1);
font-family: "Inter-Bold";
font-size: 18px;
font-weight: bold;
letter-spacing: 0px;
text-align: center;
line-height: 25px;
}

.content-summary {
opacity: 1;
color: rgba(25, 25, 25, 1);
font-family: "Inter-Regular";
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: center;
line-height: 24px;
}

.right-align {
opacity: 1;
color: rgba(25, 25, 25, 1);
font-family: "Inter-Regular";
font-size: 14px;
font-weight: 400;
font-style: Regular;
letter-spacing: 0px;
text-align: left;
line-height: 18px;
}

.left-align {
opacity: 1;
color: rgba(25, 25, 25, 1);
font-family: "Inter-SemiBold";
font-size: 14px;
font-weight: 600;
letter-spacing: 0px;
text-align: right;
line-height: 18px;
}
------------------------------------------------------
Mobile <390px
Tablet >391 - 1000px
Desktop >1001px