products ReservedInvoiceView.tsx

28.57% Statements 2/7
0% Branches 0/4
0% Functions 0/3
40% Lines 2/5
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12x
 
 
 
 
 
 
 
12x
 
 
 
 
 
 
 
 
  import { Box, Stack } from "@mui/material";
import { BrowsersIcon } from "@phosphor-icons/react";
import { isUrl } from "@sections/PayBuilder/helpers";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import ProductPageLogoComponent from "./ProductPageContainer/ProductPageLogoComponent";
 
/* Invoices should be paid by one person only. So if user tries to enter
the page while customer has already the items in the cart, we show this page to avoid requests
on create cart.
*/
function ReservedInvoiceView() {
  const { data, parsedValues } = usePayBuilderForm();
  const savedLogo = isUrl(data.paymentLogoStyles?.URL)
    ? data.paymentLogoStyles
    : data.paymentLogoURL;
  return (
    <StyledContainer>
      {parsedValues?.logo && (
        <ProductPageLogoComponent
          logoUrl={savedLogo}
          showBackToPortalButton={false}
          isPreview={false}
        />
      )}
      <Stack gap="20px" justifyContent="center" alignItems="center">
        <StyledIconContainer>
          <BrowsersIcon size={24} />
        </StyledIconContainer>
        <GiveText variant="bodyM" color="primary">
          Invoice opened in another session
        </GiveText>
        <GiveText variant="bodyS" color="secondary" textAlign="center">
          This invoice{" "}
          <GiveText component="span" variant="bodyS" color="primary">
            ({data.reference})
          </GiveText>{" "}
          is opened already in another session. Make sure you don&apos;t have it
          opened more than one time on your browser.
        </GiveText>
      </Stack>
    </StyledContainer>
  );
}
 
export default ReservedInvoiceView;
 
const StyledContainer = styled(Stack)(() => ({
  maxWidth: "608px",
  margin: "0 auto",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "48px",
}));
 
const StyledIconContainer = styled(Box)(({ theme }) => ({
  width: "56px",
  height: "56px",
  borderRadius: "50%",
  backgroundColor: theme.palette.primitive?.transparent["darken-5"],
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
}));