@woovi/ui 4.0.942

package/src/openpix/paymentLink/PaymentLink.stories.tsx

@@ -0,0 +1,57 @@
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import type { PaymentLinkProps } from './PaymentLink';
+import { PaymentLink } from './PaymentLink';
+
+export default {
+  title: 'Pix/LinkUI',
+  component: PaymentLink,
+} as Meta;
+
+const Template: Story<PaymentLinkProps> = ({ ...args }) => {
+  return <PaymentLink {...args} />;
+};
+
+const brCode =
+  '00020101021226180014br.gov.bcb.pix52040000530398654041.005802BR5907FLYTOUR6009Sao Paulo62220518pay me this ticket630466B1';
+
+const merchantName = 'Flytour';
+const value = 100;
+const comment = 'pay me this ticket';
+const identifier = '48a9e61c5ff040779e33dfb5a2fe4ec4';
+
+export const Link = Template.bind({});
+Link.args = {
+  chargeData: {
+    brCode,
+    comment,
+    value,
+    merchantName,
+    identifier,
+    companyBank: {
+      name: 'openpix',
+      code: '555',
+      pixKey: '12345',
+    },
+    reference: comment,
+  },
+};
+
+export const LinkChargeDetail = Template.bind({});
+LinkChargeDetail.args = {
+  chargeData: {
+    brCode,
+    comment,
+    value,
+    merchantName,
+    companyBank: {
+      name: 'openpix',
+      code: '555',
+      pixKey: '12345',
+    },
+    reference: comment,
+  },
+  isCharging: false,
+  withBorder: true,
+};

package/src/openpix/paymentLink/PaymentLink.tsx

@@ -0,0 +1,97 @@
+import { graphql, useFragment } from 'react-relay';
+
+import { useChargeView } from '@woovi/hooks';
+import { CHARGE_STATUS_ENUM } from '@woovi/shared';
+
+import type { PaymentLink_charge$key } from './__generated__/PaymentLink_charge.graphql';
+import PaymentDeleted from './PaymentDeleted';
+import { PaymentLinkActive } from './PaymentLinkActive';
+import PaymentLinkWrapper from './PaymentLinkWrapper';
+import type { ChargeData, Shopper, Customer } from './types/ChargeDataType';
+import PaymentExpired from '../paymentLink/PaymentExpired';
+import PaymentSuccess from '../paymentSuccess/PaymentSuccess';
+
+export type PaymentLinkProps = {
+  chargeData: ChargeData;
+  isCharging: boolean;
+  customer: Customer;
+  shopper?: Shopper;
+  isTemp: boolean;
+  giftbackActive: boolean;
+  seeMyGiftbackFn: () => any;
+  charge: PaymentLink_charge$key | null;
+};
+
+const PaymentLinkContent = ({
+  chargeData,
+  customer,
+  shopper,
+  isTemp = false,
+  giftbackActive,
+  seeMyGiftbackFn,
+  ...props
+}: PaymentLinkProps) => {
+  const charge = useFragment<PaymentLink_charge$key>(
+    graphql`
+      fragment PaymentLink_charge on Charge {
+        ...PaymentLinkActive_charge
+        ...PaymentSuccess_charge
+      }
+    `,
+    props.charge,
+  );
+
+  useChargeView(chargeData.id);
+
+  if (chargeData?.isRemoved) {
+    return <PaymentDeleted chargeData={chargeData} isTemp={isTemp} />;
+  }
+
+  if (chargeData?.status === CHARGE_STATUS_ENUM.COMPLETED) {
+    // if (shouldRenderGiftbackTaxIDError(charge)) {
+    //   return <OrderErrorPaidFromAnotherTaxID isTemp={isTemp} charge={charge} />;
+    // }
+
+    return (
+      <PaymentSuccess
+        chargeData={chargeData}
+        shopper={shopper}
+        isTemp={isTemp}
+        giftbackActive={giftbackActive}
+        seeMyGiftbackFn={seeMyGiftbackFn}
+        charge={charge}
+      />
+    );
+  }
+
+  if (chargeData?.status === CHARGE_STATUS_ENUM.OVERDUE) {
+    return (
+      <PaymentLinkActive
+        charge={charge}
+        chargeData={chargeData}
+        customer={customer}
+      />
+    );
+  }
+
+  if (chargeData?.status === CHARGE_STATUS_ENUM.EXPIRED) {
+    return <PaymentExpired chargeData={chargeData} isTemp={isTemp} />;
+  }
+
+  return (
+    <PaymentLinkActive
+      charge={charge}
+      chargeData={chargeData}
+      customer={customer}
+    />
+  );
+};
+
+export const PaymentLink = ({
+  withCard,
+  ...rest
+}: PaymentLinkProps & { withCard: boolean }) => (
+  <PaymentLinkWrapper withCard={withCard} isFromTestAccount={rest?.chargeData?.isFromTestAccount} hasTemp={rest?.chargeData?.company?.hasTemp}>
+    <PaymentLinkContent {...rest} />
+  </PaymentLinkWrapper>
+);

package/src/openpix/paymentLink/PaymentLinkActive.tsx

@@ -0,0 +1,36 @@
+import { graphql, useFragment } from 'react-relay';
+
+import type { PaymentLinkActive_charge$key } from './__generated__/PaymentLinkActive_charge.graphql';
+import ChargeInfo from './ChargeInfo';
+import PaymentFooter from './PaymentFooter';
+import QrCodeSide from './QrCodeSide';
+import type { ChargeData, Customer } from './types/ChargeDataType';
+
+export type PaymentLinkActiveProps = {
+  chargeData: ChargeData;
+  customer: Customer;
+  charge: PaymentLinkActive_charge$key;
+};
+
+export const PaymentLinkActive = ({
+  chargeData,
+  customer,
+  ...props
+}: PaymentLinkActiveProps) => {
+  const charge = useFragment<PaymentLinkActive_charge$key>(
+    graphql`
+      fragment PaymentLinkActive_charge on Charge {
+        ...QrCodeSide_charge
+      }
+    `,
+    props.charge,
+  );
+
+  return (
+    <>
+      <ChargeInfo chargeData={chargeData} customer={customer} />
+      <QrCodeSide charge={charge} chargeData={chargeData} />
+      <PaymentFooter projectType={chargeData?.projectType} />
+    </>
+  );
+};

package/src/openpix/paymentLink/PaymentLinkTestAccountBanner.tsx

@@ -0,0 +1,47 @@
+import WarningIcon from '@mui/icons-material/Warning';
+import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+
+type PaymentLinkTestAccountBannerProps = {
+  isFromTestAccount: boolean;
+  hasTemp: boolean;
+}
+
+const PaymentLinkTestAccountBanner = ({ isFromTestAccount }: PaymentLinkTestAccountBannerProps) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!isFromTestAccount) {
+    return null;
+  }
+
+  return (
+    <Stack
+      sx={{
+        backgroundColor: theme.palette.error.main,
+        borderRadius: 1,
+        justifyContent: 'center',
+        p: 1,
+      }}
+    >
+      <Stack
+        direction='row'
+        sx={{
+          gap: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.palette.common.white,
+        }}
+      >
+        <WarningIcon />
+        <Typography sx={{ fontWeight: 'bold', fontSize: '18px' }}>
+          {t('Test charge')}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PaymentLinkTestAccountBanner;

package/src/openpix/paymentLink/PaymentLinkWrapper.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+
+import PaymentLinkTestAccountBanner from './PaymentLinkTestAccountBanner';
+import Card from '../../card/Card';
+import BoxFlex from '../../mui/BoxFlex';
+
+type PaymentLinkWrapperProps = {
+  withCard: boolean;
+  children: ReactNode;
+  isTestAccount?: boolean;
+};
+
+const PaymentLinkWrapper = ({
+  withCard = true,
+  isFromTestAccount = false,
+  hasTemp = false,
+  children,
+}: PaymentLinkWrapperProps) => {
+  if (withCard) {
+    return (
+      <Card
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          maxWidth: '600px',
+          width: '100%',
+          '@media (min-width: 600px)': {
+            px: 3,
+            py: 1,
+          },
+        }}
+        aria-label={'Payment Link Card'}
+      >
+        <PaymentLinkTestAccountBanner
+          hasTemp={hasTemp}
+          isFromTestAccount={isFromTestAccount}
+        />
+        {children}
+      </Card>
+    );
+  }
+
+  return (
+    <BoxFlex
+      sx={{
+        flexDirection: 'column',
+        justifyContent: 'center',
+      }}
+      aria-label={'Payment Link Transparent'}
+    >
+      <PaymentLinkTestAccountBanner
+        hasTemp={hasTemp}
+        isFromTestAccount={isFromTestAccount}
+      />
+      {children}
+    </BoxFlex>
+  );
+};
+
+export default PaymentLinkWrapper;

package/src/openpix/paymentLink/PaymentLogo.tsx

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+import { COMPANY_PROJECT_TYPES_ENUM } from '@woovi/roles';
+
+import type { ChargeData } from './types/ChargeDataType';
+import OpenPixLogoColor from '../../logo/OpenPixLogoColor';
+import WooviLogo from '../../logo/WooviLogo';
+import BoxFlex from '../../mui/BoxFlex';
+
+const InfoHeaderImage = styled.img`
+  object-fit: contain;
+  max-width: 350px;
+  max-height: 90px;
+`;
+
+type LogoProps = {
+  logo: string;
+  isCharging: boolean;
+  hasTemp: boolean;
+};
+const PaymentLinkLogo = ({ logo }: LogoProps) => (
+  <BoxFlex
+    sx={{
+      justifyContent: 'center',
+    }}
+  >
+    <InfoHeaderImage src={logo} />
+  </BoxFlex>
+);
+
+type InfoProps = {
+  chargeData: ChargeData;
+  isTemp: boolean;
+};
+
+const PaymentLogo = ({ chargeData }: InfoProps) => {
+  if (chargeData?.logo) {
+    return <PaymentLinkLogo logo={chargeData?.logo} />;
+  }
+
+  if (chargeData.projectType === COMPANY_PROJECT_TYPES_ENUM.WOOVI) {
+    return (
+      <a href={'https://woovi.com'} target={'_blank'} rel={'noopener noreferrer'}>
+        <WooviLogo />
+      </a>
+    );
+  }
+
+  return (
+    <a href={'https://openpix.com.br'} target={'_blank'} rel={'noopener noreferrer'}>
+      <OpenPixLogoColor />
+    </a>
+  );
+};
+
+export default PaymentLogo;

package/src/openpix/paymentLink/QrCodeResponsive.tsx

@@ -0,0 +1,77 @@
+import QRCode from 'qrcode.react';
+import type { FunctionComponent } from 'react';
+import type { FlexProps } from 'rebass';
+import { Flex } from 'rebass';
+import styled from 'styled-components';
+
+import { CopyInput } from '../../CopyInput';
+import BoxFlex from '../../mui/BoxFlex';
+import type { ChargeData } from '../paymentLink/types/ChargeDataType';
+
+export const QRCodeWrapper = styled<
+  FunctionComponent<{ qrCodeShow: boolean } & FlexProps>
+>(Flex)`
+  display: ${(props) => (props.qrCodeShow ? 'flex' : 'none')};
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  padding: 2px;
+  border: ${(props) => (props.qrCodeShow ? '5px solid' : 'none')};
+  border-color: ${(props) => props.theme.primaryLighterColor};
+  border-radius: 10px;
+
+  & > svg {
+    display: ${(props) => (props.qrCodeShow ? 'block' : 'none')};
+    height: auto; /* reset height */
+    width: 100%; /* reset width */
+  }
+
+  @media (min-width: 600px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px;
+    margin-bottom: 10px;
+    padding: 2px;
+    border: 5px solid;
+    border-color: ${(props) => props.theme.primaryLighterColor};
+    border-radius: 10px;
+
+    & > svg {
+      display: block; /* svg is "inline" by default */
+      height: auto; /* reset height */
+      width: 100%; /* reset width */
+    }
+  }
+`;
+
+type QrCodeResponsiveProps = {
+  qrCodeShow: boolean;
+  chargeData: ChargeData;
+};
+
+const QrCodeResponsive = ({
+  qrCodeShow,
+  chargeData,
+}: QrCodeResponsiveProps) => {
+  return (
+    <>
+      <QRCodeWrapper qrCodeShow={qrCodeShow} data-testid='qrcode'>
+        <QRCode renderAs='svg' value={chargeData?.brCode} includeMargin />
+      </QRCodeWrapper>
+
+      <BoxFlex
+        sx={{
+          '@media (min-width: 600px)': {
+            display: 'none',
+          },
+        }}
+      >
+        <CopyInput value={chargeData?.brCode} />
+      </BoxFlex>
+    </>
+  );
+};
+
+export default QrCodeResponsive;

package/src/openpix/paymentLink/QrCodeSectionHeaderInfo.tsx

@@ -0,0 +1,45 @@
+import { Typography as _Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+import BoxFlex from '../../mui/BoxFlex';
+
+const Typography = styled(_Typography)({
+  fontSize: '18px',
+  textAlign: 'center',
+  // @TODO: remove these margins when improve gap
+  mt: '10px',
+  mb: '10px',
+});
+
+const QrCodeSectionHeaderInfo = () => {
+  const { t } = useTranslation();
+
+  return (
+    <BoxFlex>
+      <Typography
+        sx={{
+          '@media (min-width: 600px)': {
+            display: 'none',
+          },
+        }}
+      >
+        {t(
+          'Copy the QR Code, open your bank app and pay via Pix Copy and Paste',
+        )}
+      </Typography>
+      <Typography
+        sx={{
+          display: 'none',
+          '@media (min-width: 600px)': {
+            display: 'block',
+          },
+        }}
+      >
+        {t("Open your bank's app, scan the image or paste the QR Code")}
+      </Typography>
+    </BoxFlex>
+  );
+};
+
+export default QrCodeSectionHeaderInfo;

package/src/openpix/paymentLink/QrCodeShowButton.tsx

@@ -0,0 +1,44 @@
+import QrCodeIcon from '@mui/icons-material/QrCode';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import ActionButton from '../../buttons/ActionButton';
+import BoxFlex from '../../mui/BoxFlex';
+
+type QrCodeShowButtonProps = {
+  qrCodeShow: boolean;
+  setQrCodeShow: (value: boolean) => unknown;
+};
+
+const QrCodeShowButton = ({
+  qrCodeShow,
+  setQrCodeShow,
+}: QrCodeShowButtonProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <BoxFlex
+      sx={{
+        flex: 1,
+        '@media (min-width: 600px)': {
+          display: 'none',
+        },
+      }}
+    >
+      <ActionButton
+        variant='outlined'
+        color='tertiary'
+        onClick={() => setQrCodeShow(!qrCodeShow)}
+        startIcon={<QrCodeIcon color='tertiary' />}
+        size={'large'}
+        fullWidth
+      >
+        <Typography component='span' sx={{ textTransform: 'uppercase' }}>
+          {qrCodeShow ? t('Hide QR Code') : t('Show QR Code')}
+        </Typography>
+      </ActionButton>
+    </BoxFlex>
+  );
+};
+
+export default QrCodeShowButton;