Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { Box } from "@mui/material";
import { customInstance } from "@services/api";
import GiveAvatar from "@shared/Avatar/GiveAvatar";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import { AxiosError } from "axios";
import { useQuery } from "react-query";
import { useLocation, useNavigate } from "react-router-dom";
import placeholder from "assets/images/Placeholder.png";
import { useEffect } from "react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
const useGetInfos = (id?: string) => {
return useQuery<any, AxiosError>(
"find-product-by-id",
async () => {
const product = await customInstance({
url: `products/${id}`,
method: "GET",
});
return product;
},
{
refetchOnWindowFocus: false,
enabled: !!id && !isNaN(Number(id)),
},
);
};
const RefundPolicy = () => {
const { isMobileView } = useCustomThemeV2();
const location = useLocation();
const params = new URLSearchParams(location.search);
const id = params.get("id");
const navigate = useNavigate();
const { data, isLoading, error } = useGetInfos(id!);
useEffect(() => {
if (!id || isNaN(Number(id)) || error?.response?.status === 404) {
navigate("/");
return;
}
}, [error, id]);
if (isLoading) {
return <LoadingSpinner />;
}
return data ? (
<MainContainer isMobileView={isMobileView}>
<RefundPrivacyContainer>
<GiveAvatar
imageUrl={data.merchantImageURL ? data.merchantImageURL : placeholder}
shape="square"
size="56px"
/>
<Box sx={{ mt: "64px" }}>
<GiveText variant="bodyS" color="secondary">
{data.merchantName}
</GiveText>
<GiveText variant="h2" sx={{ mt: "14px" }}>
Refund Policy
</GiveText>
<GiveText
variant="bodyS"
color="secondary"
sx={{ mt: "32px", whiteSpace: "pre-line" }}
>
{data.msaRefundPolicy}
</GiveText>
</Box>
</RefundPrivacyContainer>
</MainContainer>
) : null;
};
export default RefundPolicy;
const RefundPrivacyContainer = styled(Box)(() => ({
display: "flex",
flexDirection: "column",
flexWrap: "nowrap",
alignItems: "start",
alignContent: "center",
maxWidth: "650px",
padding: "20px",
}));
const MainContainer = styled(Box)<{ isMobileView?: boolean }>(
({ isMobileView }) => ({
width: "100%",
display: "flex",
justifyContent: isMobileView ? "start" : "center",
}),
);
|