@woovi/ui 4.0.942

package/src/openpix/paymentLink/CopyQRCode.tsx

@@ -0,0 +1,75 @@
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import FileCopyIcon from '@mui/icons-material/FileCopy';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'rebass';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { copyToClipboard } from '@woovi/hooks';
+
+import ActionButton from '../../buttons/ActionButton';
+import BoxFlex from '../../mui/BoxFlex';
+
+export type CopyQRCodeProps = {
+  value: string;
+  debounceDelay?: number;
+};
+const CopyQRCode = ({ value, debounceDelay = 1000 }: CopyQRCodeProps) => {
+  const { t } = useTranslation();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const clearCopied = useDebouncedCallback(() => {
+    setIsCopied(false);
+  }, debounceDelay);
+
+  const handleCopy = async () => {
+    setIsCopied(true);
+    await copyToClipboard(value);
+    clearCopied();
+  };
+
+  const renderLabel = () => {
+    if (isCopied) {
+      return (
+        <Text as='span' sx={{ textTransform: 'uppercase' }}>
+          {t('Copied')}
+        </Text>
+      );
+    }
+
+    return (
+      <Text as='span' sx={{ textTransform: 'uppercase' }}>
+        {t('Copy QR Code')}
+      </Text>
+    );
+  };
+
+  return (
+    <BoxFlex
+      sx={{
+        flex: 1,
+        '@media print': {
+          display: 'none',
+        },
+      }}
+    >
+      <ActionButton
+        color={'tertiary'}
+        onClick={handleCopy}
+        startIcon={isCopied ? <CheckCircleOutlineIcon /> : <FileCopyIcon />}
+        disabled={false}
+        sx={{
+          width: '100%',
+        }}
+        size={'large'}
+        data-testid='btn-copy-qrcode-payment-link'
+      >
+        <Text as='span' sx={{ textTransform: 'uppercase' }}>
+          {renderLabel()}
+        </Text>
+      </ActionButton>
+    </BoxFlex>
+  );
+};
+
+export default CopyQRCode;

package/src/openpix/paymentLink/ErrorIcon.tsx

@@ -0,0 +1,18 @@
+const ErrorIcon = () => {
+  return (
+    <svg
+      width={90}
+      height={90}
+      viewBox='0 0 135 135'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M67.5 0C30.172 0 0 30.172 0 67.5S30.172 135 67.5 135 135 104.828 135 67.5 104.828 0 67.5 0zm33.75 91.733l-9.517 9.517L67.5 77.017 43.267 101.25l-9.517-9.517L57.983 67.5 33.75 43.267l9.517-9.517L67.5 57.983 91.733 33.75l9.517 9.517L77.017 67.5l24.233 24.233z'
+        fill='#EF5350'
+      />
+    </svg>
+  );
+};
+
+export default ErrorIcon;

package/src/openpix/paymentLink/InfoSide.tsx

@@ -0,0 +1,174 @@
+import { useTranslation } from 'react-i18next';
+import { Flex, Text } from 'rebass';
+import styled from 'styled-components';
+
+import { useTheme } from '@woovi/hooks';
+import { convertToMoney } from '@woovi/utils';
+
+import type { ChargeData } from './PaymentLink';
+
+const InfoSection = styled(Flex)`
+  flex-direction: column;
+  flex: 1;
+  p {
+    display: none;
+  }
+
+  @media (min-width: 600px) {
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 10px;
+
+    p {
+      display: block;
+    }
+  }
+`;
+
+const InfoHeaderWrapper = styled.div`
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  @media (min-width: 600px) {
+    justify-content: center;
+  }
+`;
+
+const InfoHeaderImage = styled.img`
+  object-fit: contain;
+  max-width: 200px;
+  max-height: 150px;
+`;
+
+const InfoHeaderWithImageWrapper = styled.span`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+
+  @media (min-width: 600px) {
+    justify-content: flex-start;
+  }
+`;
+
+const InfoHeaderWithoutImageWrapper = styled.span`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: #000000;
+`;
+
+const InfoContent = styled(Flex)`
+  justify-content: center;
+  padding: 20px 20px;
+  flex-direction: column;
+  align-items: center;
+  font-size: 30px;
+  font-weight: bold;
+
+  @media (min-width: 600px) {
+    padding: 40px 0px 20px;
+    align-items: flex-start;
+    font-size: 40px;
+  }
+`;
+
+const CommentWrapper = styled(Flex)`
+  justify-content: center;
+  padding: 10px 33px;
+  background-color: #f4f4f4;
+  border-radius: 20px;
+  min-width: 300px !important;
+`;
+
+const InfoHeaderWithImage = ({ chargeData }) => (
+  <InfoHeaderWithImageWrapper>
+    <InfoHeaderImage src={chargeData?.logo} title={chargeData?.merchantName} />
+  </InfoHeaderWithImageWrapper>
+);
+
+const InfoHeaderWithoutImage = ({ chargeData }) => (
+  <InfoHeaderWithoutImageWrapper>
+    <Text as={'h1'} m={0} fontSize={'23px'}>
+      {chargeData?.merchantName}
+    </Text>
+  </InfoHeaderWithoutImageWrapper>
+);
+
+type InfoProps = {
+  chargeData: ChargeData;
+  isCharging: boolean;
+};
+
+const InfoSide = ({ chargeData, isCharging }: InfoProps) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const renderHeader = () => {
+    if (!isCharging) {
+      return null;
+    }
+
+    return (
+      <InfoHeaderWrapper>
+        {chargeData?.logo ? (
+          <InfoHeaderWithImage chargeData={chargeData} />
+        ) : (
+          <InfoHeaderWithoutImage chargeData={chargeData} />
+        )}
+      </InfoHeaderWrapper>
+    );
+  };
+
+  const renderContentMessage = () => {
+    if (isCharging) {
+      return (
+        <>
+          <Text color={theme.primaryLighterColor} mr={'5px'}>
+            {t('Transfer {{value}}', {
+              value: convertToMoney(chargeData?.value),
+            })}
+          </Text>
+          <Text color={theme.primaryLighterColor}>
+            {t(` to {{merchantName}}`, {
+              merchantName: chargeData?.merchantName,
+            })}
+          </Text>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Text color={theme.primaryLighterColor} mr={'5px'}>
+          {t('Amount to be paid')}
+        </Text>
+        <Text color={theme.primaryLighterColor}>
+          {convertToMoney(chargeData?.value)}
+        </Text>
+      </>
+    );
+  };
+
+  return (
+    <InfoSection>
+      {renderHeader()}
+      <InfoContent>{renderContentMessage()}</InfoContent>
+      <CommentWrapper>
+        <Text as='span' mt='10px' mb='10px' fontSize={'16px'}>
+          {chargeData?.comment || '-'}
+        </Text>
+      </CommentWrapper>
+    </InfoSection>
+  );
+};
+
+export default InfoSide;

package/src/openpix/paymentLink/InterestsInfo.tsx

@@ -0,0 +1,60 @@
+import { Typography } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { convertToMoney } from '@woovi/utils';
+
+import BoxFlex from '../../mui/BoxFlex';
+import type { ChargeData } from './types/ChargeDataType';
+
+export const InterestsInfoRow = ({
+  title,
+  value,
+}: {
+  title: string;
+  value: number | ReactNode;
+}) => {
+  return (
+    <BoxFlex sx={{ width: '100%', justifyContent: 'space-between' }}>
+      <Typography variant='h6'>{`${title}:`}</Typography>
+      <Typography variant='h6' fontWeight={'bold'}>
+        {typeof value === 'number' ? convertToMoney(value) : value}
+      </Typography>
+    </BoxFlex>
+  );
+};
+
+type InterestsInfoProps = {
+  chargeData: ChargeData;
+};
+
+const InterestsInfo = ({ chargeData }: InterestsInfoProps) => {
+  const { t } = useTranslation();
+
+  const { interests, fines, finalValue } = chargeData?.decodedBrCode || {};
+
+  if (!interests && !fines && !finalValue) {
+    return null;
+  }
+
+  return (
+    <BoxFlex
+      sx={{ flexDirection: 'column', gap: '10px', mt: '40px', width: '80%' }}
+    >
+      <InterestsInfoRow title={t('Original value')} value={chargeData?.value} />
+
+      {!!interests && (
+        <InterestsInfoRow title={t('Interests')} value={interests} />
+      )}
+
+      {!!fines && <InterestsInfoRow title={t('Fines')} value={fines} />}
+
+      <Divider />
+
+      <InterestsInfoRow title={t('Total')} value={finalValue} />
+    </BoxFlex>
+  );
+};
+
+export default InterestsInfo;

package/src/openpix/paymentLink/NotFound.tsx

@@ -0,0 +1,16 @@
+import { Flex, Text } from 'rebass';
+
+const NotFound = () => {
+  return (
+    <Flex
+      height='100vh'
+      alignItems='center'
+      justifyContent='center'
+      flexDirection='column'
+    >
+      <Text>Link de Pagamento não encontrado</Text>
+    </Flex>
+  );
+};
+
+export default NotFound;

package/src/openpix/paymentLink/PaymentDeleted.tsx

@@ -0,0 +1,172 @@
+import { useTheme } from '@mui/material/styles';
+import { formatToCNPJ } from 'brazilian-values';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'rebass';
+
+import { convertToMoney } from '@woovi/utils';
+
+import { AccountInfoLabel, AdditionalInfo } from './AdditionalInfo';
+import PaymentFooter from './PaymentFooter';
+import PaymentLogo from './PaymentLogo';
+import type { CompanyBankData, ChargeData } from './types/ChargeDataType';
+import BoxFlex from '../../mui/BoxFlex';
+import ErrorIcon from '../paymentLink/ErrorIcon';
+
+type Charge = {
+  hasTemp: boolean;
+  brCode: string;
+  status: string;
+  error: string;
+  merchantName: string;
+  comment: string;
+  identifier: string;
+  companyBank: CompanyBankData;
+  logo: string | null;
+  reference: string | null;
+  value: number;
+  giftback: {
+    active: boolean;
+    percentage: number;
+  };
+  giftbackPercentage: number;
+  giftbackAppliedValue: number;
+  discount: number;
+  valueWithDiscount: number;
+};
+
+type PaymentDeletedProps = {
+  isTemp: boolean;
+  charge: Charge;
+  chargeData: ChargeData;
+  showValue: boolean;
+};
+
+const PaymentDeleted = ({
+  chargeData,
+  showValue = true,
+}: PaymentDeletedProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  const Header = () => {
+    if (chargeData?.isPixQrCode) {
+      return (
+        <Text
+          textAlign='center'
+          fontSize={22}
+          fontWeight={800}
+          mt={3}
+          mb={3}
+          fontFamily={'sans-serif'}
+          color={theme.palette.secondary.main}
+        >
+          {t('QR Code deleted')}
+        </Text>
+      );
+    }
+
+    return (
+      <Text
+        textAlign='center'
+        fontSize={22}
+        fontWeight={800}
+        mt={3}
+        mb={3}
+        fontFamily={'sans-serif'}
+        color={theme.palette.secondary.main}
+      >
+        {t('Charge deleted')}
+      </Text>
+    );
+  };
+
+  const QrCodeValue = () => {
+    if (!showValue) {
+      return null;
+    }
+
+    if (!chargeData?.valueWithDiscount) {
+      return (
+        <Text fontSize={22} fontWeight={800} fontFamily={'sans-serif'}>
+          {convertToMoney(chargeData?.value)}
+        </Text>
+      );
+    }
+
+    return (
+      <>
+        <AccountInfoLabel label={t('Value')} text={''} />
+        <Text fontSize={22} fontWeight={800} fontFamily={'sans-serif'}>
+          {convertToMoney(chargeData.value)}
+        </Text>
+      </>
+    );
+  };
+
+  const infoLabel = () => {
+    if (chargeData?.isPixQrCode) {
+      return (
+        <Text
+          textAlign={'center'}
+          justifyContent={'center'}
+          mb={3}
+          fontFamily={'sans-serif'}
+        >
+          {t('This QR Code was deleted')}
+        </Text>
+      );
+    }
+
+    return (
+      <Text
+        textAlign={'center'}
+        justifyContent={'center'}
+        mb={3}
+        fontFamily={'sans-serif'}
+      >
+        {t('This charge was deleted')}
+      </Text>
+    );
+  };
+
+  return (
+    <BoxFlex
+      sx={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        py: 2,
+      }}
+    >
+      <PaymentLogo chargeData={chargeData} />
+      <BoxFlex
+        sx={{
+          mt: '20px',
+        }}
+      >
+        <ErrorIcon />
+      </BoxFlex>
+      <Header />
+      {infoLabel()}
+      <QrCodeValue />
+      <BoxFlex sx={{ flexDirection: 'column', padding: '10px' }}>
+        <AccountInfoLabel
+          label={t('Addressee')}
+          text={chargeData?.merchantName}
+        />
+        {chargeData?.merchantTaxId ? (
+          <AccountInfoLabel text={formatToCNPJ(chargeData?.merchantTaxId)} />
+        ) : null}
+        {chargeData?.identifier && (
+          <AccountInfoLabel
+            label={t('Identifier')}
+            text={chargeData?.identifier}
+          />
+        )}
+        <AdditionalInfo charge={chargeData} />
+      </BoxFlex>
+      <PaymentFooter projectType={chargeData?.projectType} />
+    </BoxFlex>
+  );
+};
+
+export default PaymentDeleted;

package/src/openpix/paymentLink/PaymentExpired.tsx

@@ -0,0 +1,170 @@
+import { formatToCNPJ } from 'brazilian-values';
+import { useTranslation } from 'react-i18next';
+import { Flex, Text } from 'rebass';
+import styled from 'styled-components';
+
+import type { ChargeData } from '@woovi/ui';
+import { convertToMoney } from '@woovi/utils';
+
+import { AccountInfoLabel, AdditionalInfo } from './AdditionalInfo';
+import PaymentFooter from './PaymentFooter';
+import PaymentLogo from './PaymentLogo';
+import BoxFlex from '../../mui/BoxFlex';
+import ErrorIcon from '../paymentLink/ErrorIcon';
+
+const InfoAccount = styled(Flex)`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+`;
+
+type CompanyBankData = {
+  name: string;
+  code: number;
+  pixKey: string;
+};
+
+type Charge = {
+  hasTemp: boolean;
+  brCode: string;
+  status: string;
+  error: string;
+  merchantName: string;
+  comment: string;
+  identifier: string;
+  companyBank: CompanyBankData;
+  logo: string | null;
+  reference: string | null;
+
+  value: number;
+  giftback: {
+    active: boolean;
+    percentage: number;
+  };
+  giftbackPercentage: number;
+  giftbackAppliedValue: number;
+  discount: number;
+  valueWithDiscount: number;
+};
+
+type ExpiredPaymentProps = {
+  isTemp: boolean;
+  charge: Charge;
+  chargeData: ChargeData;
+  showValue: boolean;
+};
+
+const PaymentExpired = ({
+  chargeData,
+  showValue = true,
+}: ExpiredPaymentProps) => {
+  const { t } = useTranslation();
+
+  const Header = () => {
+    return (
+      <Text
+        textAlign='center'
+        fontSize={22}
+        fontWeight={800}
+        mt={3}
+        mb={3}
+        fontFamily={'sans-serif'}
+        color={'#4D4D4D'}
+      >
+        {t('Charge expired')}
+      </Text>
+    );
+  };
+
+  const QrCodeValue = () => {
+    if (!showValue) {
+      return null;
+    }
+
+    const value = convertToMoney(chargeData.value);
+
+    const hasDiscount =
+      chargeData?.discount > 0 || chargeData?.giftbackAppliedValue > 0;
+
+    if (hasDiscount) {
+      const finalValue = convertToMoney(chargeData?.valueWithDiscount);
+
+      return (
+        <>
+          <AccountInfoLabel label={t('Value')} text={''} />
+          <Text textAlign='center' mt={'-10px'} mb={'10px'}>
+            <Text
+              color='#b2b2b2ff'
+              as='span'
+              style={{ textDecoration: 'line-through' }}
+            >
+              {value}
+            </Text>{' '}
+            {finalValue}
+          </Text>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <AccountInfoLabel label={t('Value')} text={''} />
+        {value}
+      </>
+    );
+  };
+
+  const infoLabel = () => {
+    return (
+      <Text
+        textAlign={'center'}
+        justifyContent={'center'}
+        mb={3}
+        fontFamily={'sans-serif'}
+      >
+        {t('The payment period for this charge has expired.')}
+      </Text>
+    );
+  };
+
+  return (
+    <BoxFlex
+      sx={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        py: 2,
+      }}
+    >
+      <PaymentLogo chargeData={chargeData} />
+      <BoxFlex
+        sx={{
+          mt: '20px',
+        }}
+      >
+        <ErrorIcon />
+      </BoxFlex>
+      <Header />
+      {infoLabel()}
+      <QrCodeValue />
+      <InfoAccount>
+        <AccountInfoLabel
+          label={t('Addressee')}
+          text={chargeData?.merchantName}
+        />
+        {chargeData?.merchantTaxId ? (
+          <AccountInfoLabel text={formatToCNPJ(chargeData?.merchantTaxId)} />
+        ) : null}
+        {chargeData?.identifier && (
+          <AccountInfoLabel
+            label={t('Identifier')}
+            text={chargeData?.identifier}
+          />
+        )}
+        <AdditionalInfo charge={chargeData} />
+      </InfoAccount>
+      <PaymentFooter projectType={chargeData?.projectType} />
+    </BoxFlex>
+  );
+};
+
+export default PaymentExpired;

package/src/openpix/paymentLink/PaymentFooter.tsx

@@ -0,0 +1,13 @@
+import PixPaymentWoovi from '../order/PixPaymentWoovi';
+
+type PaymentFooterProps = {
+  projectType: string;
+};
+
+const PaymentFooter = ({ projectType }: PaymentFooterProps) => {
+  return (
+    <PixPaymentWoovi projectType={projectType} />
+  );
+};
+
+export default PaymentFooter;