@woovi/ui 4.0.942

package/src/openpix/order/PayPixValueCompany.tsx

@@ -0,0 +1,85 @@
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import { maskMoney } from '@woovi/utils';
+
+import type { ChargeData } from '../paymentLink/types/ChargeDataType';
+
+type Props = {
+  charge: ChargeData;
+  companyName: string;
+};
+
+export const PayPixValueCompany = ({ charge, companyName }: Props) => {
+  const { t } = useTranslation();
+
+  const initialStringContext = t('To pay');
+
+  const endStringContext = t('to {{companyName}}', { companyName });
+
+  const shouldDisplayDiscount = () => {
+    const isValueWithDiscountNumber =
+      typeof charge?.valueWithDiscount === 'number';
+
+    if (!isValueWithDiscountNumber) {
+      return false;
+    }
+
+    return charge?.value !== charge?.valueWithDiscount;
+  };
+
+  const getFinalValue = () => {
+    const { finalValue } = charge?.decodedBrCode || {};
+
+    if (finalValue) {
+      return maskMoney(finalValue / 100);
+    }
+
+    if (charge?.valueWithDiscount) {
+      return maskMoney(charge?.valueWithDiscount / 100);
+    }
+
+    return maskMoney(charge.value / 100);
+  };
+
+  const valueWithoutDiscount = maskMoney(charge?.value / 100);
+  const valueWithDiscount = maskMoney(charge?.valueWithDiscount / 100);
+
+  const getMessage = () => {
+    if (!charge?.value && !charge?.valueWithDiscount) {
+      return t('Define the payment value');
+    }
+
+    if (shouldDisplayDiscount()) {
+      return (
+        <>
+          {initialStringContext}
+          <Typography
+            component='span'
+            sx={{
+              color: '#b2b2b2ff',
+              textDecoration: 'line-through',
+              fontSize: '24px',
+              fontWeight: '800',
+            }}
+          >
+            {valueWithoutDiscount + ' '}
+          </Typography>
+          {valueWithDiscount} {endStringContext} {t('via Pix')}
+        </>
+      );
+    }
+
+    return `${initialStringContext} ${t('{{finalValue}}', {
+      finalValue: getFinalValue(),
+    })} ${endStringContext} ${t('via Pix')}`;
+  };
+
+  return (
+    <Typography
+      sx={{ fontSize: '24px', fontWeight: '800', textAlign: 'center' }}
+    >
+      {getMessage()}
+    </Typography>
+  );
+};

package/src/openpix/order/PixPaymentWoovi.tsx

@@ -0,0 +1,82 @@
+import { Link, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { COMPANY_PROJECT_TYPES_ENUM } from '@woovi/roles';
+
+import packageJson from '../../../package.json';
+import WooviLogo from '../../logo/WooviLogo';
+import BoxFlex from '../../mui/BoxFlex';
+
+type PixPaymentWooviProps = {
+  isTemp: boolean;
+  projectType: string;
+};
+
+const PixPaymentWoovi = ({ projectType }: PixPaymentWooviProps) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const getLabel = () => {
+    if (projectType === COMPANY_PROJECT_TYPES_ENUM.WOOVI) {
+      return (
+        <Trans t={t} i18nKey='100% secure payment via Woovi'>
+          100% secure payment via{' '}
+          <Link
+            href='https://woovi.com'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <WooviLogo color={theme.palette.grey[400]} height={'14px'} />
+          </Link>
+        </Trans>
+      );
+    }
+
+    return (
+      <Trans t={t} i18nKey='100% secure payment via OpenPix'>
+        100% secure payment via{' '}
+        <Link
+          href='https://openpix.com.br'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          OpenPix
+        </Link>
+      </Trans>
+    );
+  };
+
+  const label = getLabel();
+
+  return (
+    <BoxFlex
+      sx={{
+        flexDirection: 'column',
+        pb: '20px',
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: 16,
+          textAlign: 'center',
+          color: theme.palette.grey[400],
+        }}
+      >
+        {label}
+      </Typography>
+      <Typography
+        variant='body2'
+        sx={{
+          fontSize: 10,
+          textAlign: 'center',
+          color: theme.palette.grey[400],
+        }}
+      >
+        (v{packageJson.version})
+      </Typography>
+    </BoxFlex>
+  );
+};
+
+export default PixPaymentWoovi;

package/src/openpix/order/RedeemCashbackExclusiveScheduled.tsx

@@ -0,0 +1,52 @@
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation, Trans } from 'react-i18next';
+import { graphql, useFragment } from 'react-relay';
+
+import { centsToFloat, withMask } from '@woovi/utils';
+
+import type { RedeemCashbackExclusiveScheduled_charge$key } from './__generated__/RedeemCashbackExclusiveScheduled_charge.graphql';
+import Ribbon from '../../ribbon/Ribbon';
+
+type RedeemCashbackExclusiveScheduledProps = {
+  charge: RedeemCashbackExclusiveScheduled_charge$key;
+};
+
+const RedeemCashbackExclusiveScheduled = (
+  props: RedeemCashbackExclusiveScheduledProps,
+) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const charge = useFragment<RedeemCashbackExclusiveScheduled_charge$key>(
+    graphql`
+      fragment RedeemCashbackExclusiveScheduled_charge on Charge {
+        customer {
+          cashbackFidelityBalance
+        }
+      }
+    `,
+    props.charge,
+  );
+
+  if (!charge?.customer?.cashbackFidelityBalance) {
+    return null;
+  }
+
+  const balance = withMask(
+    centsToFloat(charge.customer.cashbackFidelityBalance),
+  );
+
+  return (
+    <Ribbon>
+      <Typography>🤑</Typography>
+      <Typography color={theme.palette.tertiary.main} sx={{ fontSize: '16px' }}>
+        <Trans t={t} i18nKey={'You have {{balance}} of cashback!'}>
+          You have <b>{{ balance }}</b> of cashback!
+        </Trans>
+      </Typography>
+    </Ribbon>
+  );
+};
+
+export default RedeemCashbackExclusiveScheduled;

package/src/openpix/order/ShopperSeeMyGiftback.tsx

@@ -0,0 +1,51 @@
+import { KeyboardArrowRight } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'rebass';
+
+import type { ChargeData } from '@woovi/ui';
+import { BoxFlex } from '@woovi/ui';
+
+import ActionButton from '../../buttons/ActionButton';
+
+type ShopperSeeMyGiftbackProps = {
+  giftbackActive: boolean;
+  chargeData: ChargeData;
+  seeMyGiftbackFn: () => void;
+};
+
+const ShopperSeeMyGiftback = ({
+  giftbackActive,
+  chargeData,
+  seeMyGiftbackFn,
+}: ShopperSeeMyGiftbackProps) => {
+  const { t } = useTranslation();
+
+  if (!giftbackActive) {
+    return null;
+  }
+
+  if (!chargeData.giftbackEarned) {
+    return null;
+  }
+
+  return (
+    <BoxFlex
+      sx={{
+        ml: '-8px',
+        mt: 20,
+      }}
+    >
+      <ActionButton
+        fullWidth
+        endIcon={<KeyboardArrowRight htmlColor={'#fff'} fontSize={'large'} />}
+        onClick={seeMyGiftbackFn}
+      >
+        <Text color={'#fff'} fontSize={18} fontWeight={600}>
+          {t('See my giftback')}
+        </Text>
+      </ActionButton>
+    </BoxFlex>
+  );
+};
+
+export default ShopperSeeMyGiftback;

package/src/openpix/order/__generated__/RedeemCashbackExclusiveScheduled_charge.graphql.ts

@@ -0,0 +1,55 @@
+/**
+ * @generated SignedSource<<5b9e0dc0b24f66f8dd27f17c7aa962d0>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { Fragment, ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type RedeemCashbackExclusiveScheduled_charge$data = {
+  readonly customer: {
+    readonly cashbackFidelityBalance: number;
+  } | null;
+  readonly " $fragmentType": "RedeemCashbackExclusiveScheduled_charge";
+};
+export type RedeemCashbackExclusiveScheduled_charge$key = {
+  readonly " $data"?: RedeemCashbackExclusiveScheduled_charge$data;
+  readonly " $fragmentSpreads": FragmentRefs<"RedeemCashbackExclusiveScheduled_charge">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "RedeemCashbackExclusiveScheduled_charge",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "Customer",
+      "kind": "LinkedField",
+      "name": "customer",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "cashbackFidelityBalance",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "Charge",
+  "abstractKey": null
+};
+
+(node as any).hash = "325804354f94744a879b2fa516c020ac";
+
+export default node;

package/src/openpix/order/discount/EarnDiscount.tsx

@@ -0,0 +1,34 @@
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+import { convertToCurrency } from '@woovi/utils';
+
+import Ribbon from '../../../ribbon/Ribbon';
+import type { ChargeData } from '../../paymentLink/types/ChargeDataType';
+
+type EarnDiscount = {
+  chargeData: ChargeData;
+};
+
+const EarnDiscount = ({ chargeData }: EarnDiscount) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!chargeData?.discount || chargeData?.giftbackAppliedValue) {
+    return null;
+  }
+
+  const earnDiscountValue = convertToCurrency(chargeData.discount / 100);
+
+  return (
+    <Ribbon>
+      <Typography>🤑</Typography>
+      <Typography color={theme.palette.tertiary.main} sx={{ fontSize: '16px' }}>
+        {t('You earned')} <b>{earnDiscountValue}</b> {t('of discount')}
+      </Typography>
+    </Ribbon>
+  );
+};
+
+export default EarnDiscount;

package/src/openpix/order/giftback/EarnGiftback.tsx

@@ -0,0 +1,53 @@
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+import type { ChargeData } from '@woovi/ui';
+import { maskMoney } from '@woovi/utils';
+
+import Ribbon from '../../../ribbon/Ribbon';
+
+type EarnedGiftbackProps = {
+  chargeData: ChargeData;
+};
+
+const EarnGiftback = ({ chargeData }: EarnedGiftbackProps) => {
+  const theme = useTheme();
+  const giftbackPercentage = chargeData?.giftbackPercentage;
+  const valueWithDiscount = chargeData.valueWithDiscount;
+
+  const { t } = useTranslation();
+
+  if (!giftbackPercentage) {
+    return null;
+  }
+
+  const giftbackConvertedPercentage = giftbackPercentage / 10000; // basis point to decimal value
+
+  const earnGiftbackValue =
+    (valueWithDiscount * giftbackConvertedPercentage) / 100;
+
+  const earnGiftbackValueMasked = maskMoney(earnGiftbackValue);
+
+  if (earnGiftbackValue < 0.01) {
+    return null;
+  }
+
+  if (!chargeData.customer) {
+    return null;
+  }
+
+  return (
+    <Ribbon>
+      <Typography>🎁</Typography>
+      <Typography
+        color={theme.palette?.tertiary?.main}
+        sx={{ fontSize: '16px' }}
+      >
+        <b>{earnGiftbackValueMasked}</b> {t('giftback on your next purchase')}
+      </Typography>
+    </Ribbon>
+  );
+};
+
+export default EarnGiftback;

package/src/openpix/order/giftback/GiftbackRule.tsx

@@ -0,0 +1,32 @@
+import Divider from '@mui/material/Divider';
+import { useTranslation } from 'react-i18next';
+import { Text } from 'rebass';
+
+import type { ChargeData } from '../../paymentLink/types/ChargeDataType';
+
+type GiftbackRuleProps = {
+  chargeData: ChargeData;
+};
+const GiftbackRule = ({ chargeData }: GiftbackRuleProps) => {
+  const { t } = useTranslation();
+
+  if (!chargeData?.giftbackAppliedValue) {
+    return null;
+  }
+
+  return (
+    <>
+      <Divider style={{ alignSelf: 'stretch' }} />
+
+      <Text textAlign='center' as='p' m={'10px 0'}>
+        {t(
+          'The Giftback only can be used if the taxID of the register is equal of the taxID of the payer',
+        )}
+      </Text>
+
+      <Divider style={{ alignSelf: 'stretch' }} />
+    </>
+  );
+};
+
+export default GiftbackRule;

package/src/openpix/paymentLink/AdditionalInfo.tsx

@@ -0,0 +1,60 @@
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import BoxFlex from '../../mui/BoxFlex';
+import type { ChargeData } from './types/ChargeDataType';
+
+type AccountInfoLabelProps = {
+  label: string;
+  text: string | JSX.Element;
+};
+
+export const AccountInfoLabel = ({ label, text }: AccountInfoLabelProps) => {
+  return (
+    <BoxFlex sx={{ mb: '10px', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+      <Typography sx={{ fontWeight: 600, fontSize: '16px' }}>
+        {label}
+      </Typography>
+      {typeof text === 'string' ? (
+        <Typography sx={{ fontSize: '16px', overflowWrap: 'anywhere' }}>{text}</Typography>
+      ) : (
+        text
+      )}
+    </BoxFlex>
+  );
+};
+
+type AdditionalInfoProps = {
+  charge: ChargeData;
+};
+
+export const AdditionalInfo = ({ charge }: AdditionalInfoProps) => {
+  const { t } = useTranslation();
+
+  if (!charge.additionalInfo || charge.additionalInfo.length <= 0) {
+    return null;
+  }
+
+  if (charge?.additionalInfo?.length > 0) {
+    return (
+      <>
+        <BoxFlex sx={{ justifyContent: 'center', mb: '18px' }}>
+          <Typography sx={{ fontWeight: 600, fontSize: '18px', textAlign: 'center' }}>
+            {t('Additional information')}
+          </Typography>
+        </BoxFlex>
+        {charge.additionalInfo?.map((item) => {
+          return (
+            <AccountInfoLabel
+              key={item?.key}
+              label={item?.key}
+              text={item?.value}
+            />
+          );
+        })}
+      </>
+    );
+  }
+
+  return null;
+};

package/src/openpix/paymentLink/BrCodeInput.tsx

@@ -0,0 +1,48 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { TextField, IconButton } from '@mui/material';
+import * as Sentry from '@sentry/browser';
+
+import { copyToClipboard } from '@woovi/hooks';
+
+import BoxFlex from '../../mui/BoxFlex';
+
+type BrCodeInputProps = {
+  value: string;
+};
+
+const BrCodeInput = ({ value }: BrCodeInputProps) => {
+  const handleCopy = async () => {
+    await copyToClipboard(value);
+    // eslint-disable-next-line
+    console.log('BRCodeInput copied: ', value);
+  };
+
+  return (
+    <BoxFlex
+      sx={{
+        flex: 1,
+      }}
+    >
+      <TextField
+        sx={{
+          width: '100%',
+        }}
+        value={value}
+        InputProps={{
+          endAdornment: (
+            <IconButton
+              onClick={handleCopy}
+              onMouseDown={(event) => event.preventDefault()}
+              edge='end'
+            >
+              <ContentCopyIcon />
+            </IconButton>
+          ),
+        }}
+        disabled
+      />
+    </BoxFlex>
+  );
+};
+
+export default BrCodeInput;

package/src/openpix/paymentLink/ChargeInfo.tsx

@@ -0,0 +1,76 @@
+import { Flex, Text } from 'rebass';
+import styled from 'styled-components';
+
+import { useTheme } from '@woovi/hooks';
+
+import PaymentLogo from './PaymentLogo';
+import type { ChargeData } from './types/ChargeDataType';
+import BoxFlex from '../../mui/BoxFlex';
+import { GiftbackRedeem } from '../order/GiftbackRedeem';
+import { PayPixValueCompany } from '../order/PayPixValueCompany';
+
+const InfoContent = styled(Flex)`
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+  font-size: 20px;
+  font-weight: bold;
+`;
+
+const CommentWrapper = styled(Flex)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  padding: 10px;
+  background-color: #f4f4f4;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 420px;
+`;
+
+type InfoProps = {
+  chargeData: ChargeData;
+  isTemp: boolean;
+};
+
+const ChargeInfo = ({ chargeData }: InfoProps) => {
+  const theme = useTheme();
+
+  return (
+    <BoxFlex
+      sx={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '20px',
+        mt: '20px',
+      }}
+    >
+      <PaymentLogo chargeData={chargeData} />
+      <InfoContent>
+        <PayPixValueCompany
+          charge={chargeData}
+          companyName={chargeData.merchantName}
+        />
+        <GiftbackRedeem
+          giftbackAppliedValue={chargeData?.giftbackAppliedValue}
+        />
+      </InfoContent>
+      {chargeData.comment && (
+        <CommentWrapper>
+          <Text
+            as={'p'}
+            m='5px'
+            fontSize={'16px'}
+            color={theme?.palette?.text?.secondary}
+          >
+            {chargeData?.comment}
+          </Text>
+        </CommentWrapper>
+      )}
+    </BoxFlex>
+  );
+};
+
+export default ChargeInfo;

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

@@ -0,0 +1,21 @@
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import type { CopyQRCodeProps } from './CopyQRCode';
+import CopyQRCode from './CopyQRCode';
+
+export default {
+  title: 'Pix/CopyQRCode',
+  component: CopyQRCode,
+} as Meta;
+
+const Template: Story<CopyQRCodeProps> = ({ ...args }) => {
+  return <CopyQRCode {...args} />;
+};
+
+const value = 100;
+
+export const Simple = Template.bind({});
+Simple.args = {
+  value,
+};