@woovi/ui 4.0.942

package/src/RadioCard/__stories__/RadioCard.stories.tsx

@@ -0,0 +1,235 @@
+import RadioGroup from '@mui/material/RadioGroup';
+import { useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import type { Story, Meta } from '@storybook/react';
+
+import { COMPANY_PROJECT_TYPES_ENUM } from '@woovi/roles';
+import { CASHBACK_STATUS } from '@woovi/shared';
+
+import PayWithPixButton from '../../buttons/PayWithPixButton';
+import BoxFlex from '../../mui/BoxFlex';
+import EarnCashback from '../../openpix/order/EarnCashback';
+import PaymentFooter from '../../openpix/paymentLink/PaymentFooter';
+import RadioCard from '../RadioCard';
+import type { RadioCardProps } from '../RadioCard';
+
+export default {
+  title: 'Buttons/RadioCard',
+  component: RadioCard,
+} as Meta<RadioCardProps>;
+
+export const Default: Story<RadioCardProps> = (args) => <RadioCard {...args} />;
+Default.args = {
+  children: <Typography>Just a test</Typography>,
+};
+
+export const Contained: Story<RadioCardProps> = () => (
+  <RadioGroup
+    sx={{
+      width: '600px',
+      margin: '0 auto',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px',
+    }}
+  >
+    <RadioCard value={'value-1'}>
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean risus
+        elit, viverra a feugiat vitae, tempus eget mi. Morbi ut lorem commodo,
+        facilisis nulla non, pulvinar dolor. Pellentesque habitant morbi
+        tristique senectus et netus et malesuada fames ac turpis egestas.
+        Vestibulum sodales tortor a augue laoreet, lobortis elementum erat
+        interdum. Etiam non sodales magna. Maecenas lorem nulla, eleifend eu
+        vestibulum eget, efficitur vitae massa. Suspendisse ultrices, elit sit
+        amet suscipit pulvinar, purus ex efficitur quam, ac tempor diam urna a
+        erat. Fusce posuere eros turpis, nec dictum tortor ullamcorper sed. In
+        hac habitasse platea dictumst. Cras semper sodales faucibus. Donec
+        scelerisque aliquam pulvinar. Ut tempor leo vulputate, vehicula est a,
+        pulvinar justo. Nunc hendrerit, quam non auctor lacinia, magna ligula
+        cursus est, nec blandit dui arcu sed augue. Maecenas pharetra nulla
+        eros, eu imperdiet ante vestibulum quis. Donec rutrum ac augue a
+        condimentum. Vestibulum id malesuada sem, id tempor ligula. Aenean nec
+        euismod lorem. Aliquam lacinia volutpat eleifend. Pellentesque in elit a
+        ex vestibulum elementum quis id lectus. Aliquam erat volutpat. Aenean
+        sit amet purus et justo rutrum tristique. Aliquam porta placerat nibh,
+        eu blandit velit lacinia ut. In vitae gravida odio. Proin facilisis
+        nulla eget ipsum fringilla pellentesque. Nunc pellentesque tincidunt
+        massa, ut interdum mauris volutpat quis. Cras non interdum sem, id
+        tempus ex. Sed pellentesque eros dui, sit amet suscipit tellus rutrum
+        sit amet. Ut vitae sapien tortor. Phasellus maximus orci quis ornare
+        maximus. Cras vel sollicitudin enim, interdum dapibus neque. Proin
+        lectus libero, pellentesque sed commodo ac, fermentum eget nunc. Nam
+        auctor ornare ipsum at tristique. Sed ut ex accumsan, euismod nunc nec,
+        posuere mi. Vivamus molestie, elit non pellentesque pellentesque, lectus
+        quam pellentesque velit, ut cursus turpis lorem in neque. Etiam nec
+        interdum elit, nec pretium orci. Interdum et malesuada fames ac ante
+        ipsum primis in faucibus. Integer suscipit enim eu ex sodales
+        consectetur. Aliquam ullamcorper quam eu risus posuere viverra. Quisque
+        ullamcorper nibh molestie neque ullamcorper rutrum. Donec mollis aliquam
+        vehicula. Vivamus eget luctus velit, at porttitor elit. Morbi vestibulum
+        nulla turpis, et lacinia lorem luctus pretium. Cras consequat risus eu
+        libero placerat, in vehicula leo pharetra. Praesent velit libero,
+        condimentum et eros a, bibendum pretium ipsum.
+      </Typography>
+    </RadioCard>
+    <RadioCard value={'value-2'}>
+      <Typography>Lorem ipsum</Typography>
+    </RadioCard>
+  </RadioGroup>
+);
+
+export const RadioCardPixCob: Story<RadioCardProps> = () => {
+  const theme = useTheme();
+
+  return (
+    <RadioGroup
+      sx={{
+        width: '600px',
+        margin: '0 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+      }}
+    >
+      <RadioCard value={'value-2'}>
+        <Typography sx={{ fontSize: 20 }}>
+          <span style={{ fontSize: 16, fontWeight: 'bold' }}>1x</span> R$
+          30.500,00
+        </Typography>
+        <BoxFlex sx={{ flexDirection: 'column', mt: 2 }}>
+          <Typography
+            sx={{
+              fontSize: 16,
+              color: theme.palette.primary.main,
+              fontWeight: 'bold',
+            }}
+          >
+            Ganhe 3% de cashback
+          </Typography>
+          <EarnCashback
+            chargeData={{
+              cashback: {
+                status: CASHBACK_STATUS.PENDING,
+                value: 200,
+                percentage: 5,
+                transactionCashback: { value: 500 },
+              },
+            }}
+            isMobile={false}
+          />
+        </BoxFlex>
+      </RadioCard>
+    </RadioGroup>
+  );
+};
+
+export const RadioCardInstallments: Story<RadioCardProps> = () => {
+  const theme = useTheme();
+
+  const installments = [1, 2, 3];
+
+  return (
+    <RadioGroup
+      sx={{
+        position: 'relative',
+        width: '400px',
+        margin: '0 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '30px',
+      }}
+    >
+      <BoxFlex
+        sx={{ position: 'relative', flexDirection: 'column', gap: '10px' }}
+      >
+        <BoxFlex
+          sx={{
+            position: 'absolute',
+            backgroundColor: theme.palette.grey[300],
+            px: 2,
+            py: 0.5,
+            zIndex: 999999,
+            borderRadius: 4,
+            fontWeight: 'bold',
+            top: -10,
+            left: 20,
+          }}
+        >
+          Pix
+        </BoxFlex>
+        <RadioCard value={'value-pix'}>
+          <Typography sx={{ fontSize: 20 }}>
+            <span style={{ fontSize: 16, fontWeight: 'bold' }}>1x</span> R$
+            30.500,00
+          </Typography>
+          <BoxFlex sx={{ flexDirection: 'column', mt: 2 }}>
+            <Typography
+              sx={{
+                fontSize: 16,
+                color: theme.palette.primary.main,
+                fontWeight: 'bold',
+              }}
+            >
+              Ganhe 3% de cashback
+            </Typography>
+            <EarnCashback
+              chargeData={{
+                cashback: {
+                  status: CASHBACK_STATUS.PENDING,
+                  value: 200,
+                  percentage: 5,
+                  transactionCashback: { value: 500 },
+                },
+              }}
+              isMobile={false}
+            />
+          </BoxFlex>
+        </RadioCard>
+      </BoxFlex>
+      <BoxFlex sx={{ position: 'relative', flexDirection: 'column' }}>
+        <BoxFlex
+          sx={{
+            position: 'absolute',
+            backgroundColor: theme.palette.grey[300],
+            px: 2,
+            py: 0.5,
+            zIndex: 999999,
+            borderRadius: 4,
+            fontWeight: 'bold',
+            top: -10,
+            left: 20,
+          }}
+        >
+          Pix Parcelado
+        </BoxFlex>
+        {installments.map((_, key, arr) => (
+          <RadioCard
+            key={key}
+            value={`value-${key}`}
+            cardProps={{
+              sx: {
+                borderTopLeftRadius: key === 0 ? 8 : 0,
+                borderTopRightRadius: key === 0 ? 8 : 0,
+                borderBottomLeftRadius: key === arr.length - 1 ? 8 : 0,
+                borderBottomRightRadius: key === arr.length - 1 ? 8 : 0,
+              },
+            }}
+          >
+            <Typography sx={{ fontSize: 20 }}>
+              <span style={{ fontWeight: 'bold' }}>{key + 2}x</span> R$
+              30.500,00
+            </Typography>
+            <Typography
+              sx={{ fontSize: '16px', color: theme.palette.grey[400] }}
+            >
+              Total: R$ 50.000,00
+            </Typography>
+          </RadioCard>
+        ))}
+      </BoxFlex>
+      <PayWithPixButton color='primary' />
+      <PaymentFooter projectType={COMPANY_PROJECT_TYPES_ENUM.WOOVI} />
+    </RadioGroup>
+  );
+};

package/src/Row.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { flexbox } from 'styled-system';
+
+export default styled.div`
+  display: flex;
+  flex-direction: row;
+  ${flexbox}
+`;

package/src/SafeTextTooltip.tsx

@@ -0,0 +1,35 @@
+import Tooltip from '@mui/material/Tooltip';
+import type { TextProps } from 'rebass';
+import { Text } from 'rebass';
+
+export const toSafeTruncate = (value: string | null, length = 50) => {
+  if (!value) {
+    return [value, false];
+  }
+
+  if (value.length < length) {
+    return [value, false];
+  }
+
+  return [`${value.slice(0, length)}...`, true];
+};
+
+type Props = {
+  children: string | null;
+  length?: number;
+} & TextProps;
+const SafeTextTootltip = ({ children, length = 50, ...rest }: Props) => {
+  const [title, tooltip] = toSafeTruncate(children, length);
+
+  if (!tooltip) {
+    return <Text {...rest}>{title}</Text>;
+  }
+
+  return (
+    <Tooltip title={children} placement='right-start'>
+      <Text {...rest}>{title}</Text>
+    </Tooltip>
+  );
+};
+
+export default SafeTextTootltip;

package/src/SearchField.tsx

@@ -0,0 +1,71 @@
+import IconSearch from '@mui/icons-material/Search';
+import _Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import type { SyntheticEvent } from 'react';
+import { useState, useRef } from 'react';
+import styled from 'styled-components';
+
+import { getQuery } from '@woovi/router';
+
+export type InputProps = {
+  fontSize?: string;
+};
+
+const Input = styled(_Input)<InputProps>`
+  && {
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+    color: ${(props) => props.theme.primaryDarkerColor};
+  }
+`;
+
+type Props = {
+  defaultValue?: string;
+  onSearchTermChange: (search: string) => any;
+  placeholder?: string;
+  className?: string;
+  autoFocus?: boolean;
+  fontSize?: string;
+};
+
+const SearchField = (props: Props) => {
+  const [value, setValue] = useState(getQuery().search || '');
+
+  const {
+    onSearchTermChange,
+    defaultValue,
+    placeholder,
+    handleLoading,
+    staticContext,
+    ...rest
+  } = props;
+
+  const timeoutId = useRef<number | null>(null);
+
+  const onChange = (e: SyntheticEvent<HTMLInputElement>) => {
+    timeoutId.current && clearTimeout(timeoutId.current);
+
+    const value = e.target.value;
+
+    setValue(value);
+
+    timeoutId.current = setTimeout(() => onSearchTermChange(value), 500);
+  };
+
+  return (
+    <Input
+      type='search'
+      name='search'
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      startAdornment={
+        <InputAdornment position='start'>
+          <IconSearch />
+        </InputAdornment>
+      }
+      {...rest}
+    />
+  );
+};
+
+export default SearchField;

package/src/Step.tsx

@@ -0,0 +1,32 @@
+import { Flex, Text } from 'rebass';
+import styled from 'styled-components';
+
+import { WrapperIcon as _WrapperIcon } from './collapsible/CollapsibleStep';
+import Icon from './icons/Icon';
+
+const WrapperIcon = styled(_WrapperIcon)`
+  margin-top: 3px;
+`;
+
+type Props = {
+  children: React.ReactNode;
+  number: number;
+  status?: boolean;
+  header?: string;
+};
+
+const Step = ({ children, header, number, status }: Props) => (
+  <Flex pl='28px'>
+    <WrapperIcon>{status ? <Icon>check</Icon> : number}</WrapperIcon>
+    <Flex flexDirection='column' pl='25px' pr='25px' flex={1} pt='10px'>
+      {header && (
+        <Text fontSize='14px' mb='15px' fontWeight='600'>
+          {header}
+        </Text>
+      )}
+      {children}
+    </Flex>
+  </Flex>
+);
+
+export default Step;

package/src/TagWebhookStatus.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+import { WEBHOOK_STATUS } from '@woovi/shared';
+import { Tag as _Tag } from '@woovi/ui';
+
+export const TAG_WEBHOOK_STATUS_COLORS = {
+  [WEBHOOK_STATUS.SUCCESS]: '#4CAF50',
+  [WEBHOOK_STATUS.PENDING]: '#FF9800',
+  [WEBHOOK_STATUS.FAILED]: '#EF5350',
+  [WEBHOOK_STATUS.NOT_APPLY]: '#EF5350',
+};
+
+type Props = {
+  webhookStatus?: WEBHOOK_STATUS;
+};
+export const TagWebhookStatus = styled(_Tag)<Props>`
+  background-color: ${(props) =>
+    TAG_WEBHOOK_STATUS_COLORS[props.webhookStatus]} !important;
+  color: white !important;
+`;

package/src/ToggleButtonGroup.stories.tsx

@@ -0,0 +1,65 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+
+import ToggleButtonGroup from './ToggleButtonGroup';
+import type { ToggleButtonGroupProps } from './ToggleButtonGroup';
+import ToggleButtonGroupMobile from './ToggleButtonGroupMobile';
+import type { ToggleButtonGroupMobileProps } from './ToggleButtonGroupMobile';
+
+export default {
+  title: 'Ui/ToggleButtonGroup',
+  component: ToggleButtonGroup,
+  argTypes: {
+    group: {
+      description: 'The array of objects containing every button item.',
+    },
+    canValueBeNull: {
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description:
+        'If is `false`, you can deselect all values from this toggle group.',
+    },
+    exclusive: {
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description:
+        'If is `false`, you can select more than one button per time.',
+    },
+    initialValue: {
+      type: { name: 'string', required: false },
+      description:
+        "If non-`undefined`, it's the first selected value of this buttons.\n\n**ATTENTION:** It's need to be the same value of `text` from each group item.",
+    },
+    onValueChange: {
+      type: { name: 'function', required: false },
+      action: 'clicked',
+      description:
+        'After click in some of these buttons, get the current value of this button group.z',
+    },
+  },
+} as ComponentMeta<typeof ToggleButtonGroup>;
+
+const Template: Story<ToggleButtonGroupProps> = (props) => (
+  <ToggleButtonGroup {...props} />
+);
+
+export const Component: Story<ToggleButtonGroupProps> = Template.bind({});
+Component.storyName = 'Simple example';
+Component.args = {
+  group: [
+    { text: 'Option 1', value: 'OPTION_1' },
+    { text: 'Option 2', value: 'OPTION_2' },
+    { text: 'Option 3', value: 'OPTION_3' },
+  ],
+};
+
+export const Mobile: Story<ToggleButtonGroupMobileProps> = (props) => (
+  <ToggleButtonGroupMobile {...props} />
+);
+Mobile.storyName = 'Mobile example';
+Mobile.args = {
+  group: [
+    { text: 'Option 1', value: 'OPTION_1' },
+    { text: 'Option 2', value: 'OPTION_2' },
+    { text: 'Option 3', value: 'OPTION_3' },
+  ],
+};

package/src/ToggleButtonGroup.tsx

@@ -0,0 +1,114 @@
+import { styled, lighten } from '@mui/material/styles';
+import ToggleButton from '@mui/material/ToggleButton';
+import type { ToggleButtonProps } from '@mui/material/ToggleButton';
+import MUIToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import React, { useState } from 'react';
+
+import ToggleButtonGroupMobile from './ToggleButtonGroupMobile';
+
+/** If `exclusive` is `false`, `GroupValue` will be an array of strings. */
+export type GroupValue = string | (string | null)[] | null;
+
+type GroupItem = {
+  text: React.ReactNode;
+  value: GroupValue;
+};
+
+export type ToggleButtonGroupProps = {
+  group: GroupItem[];
+  /**
+   * Toggle more than one button per time. If `exclusive` is `false`,
+   * the value that you
+   */
+  exclusive?: boolean;
+  initialValue?: string;
+  canValueBeNull?: boolean;
+  onValueChange?: (value: GroupValue) => void;
+};
+
+const StyledToggleButton = styled(ToggleButton)<ToggleButtonProps>(
+  ({ theme }) => ({
+    minWidth: 145,
+    borderWidth: theme.shape.borderWidth,
+    borderColor: lighten(theme.palette.secondary.main, 0.8),
+    borderRadius: theme.shape.borderRadius,
+    textTransform: 'none',
+    fontSize: '14px',
+    fontWeight: '600',
+    padding: '0px 8px',
+    color: lighten(theme.palette.secondary.main, 0.8),
+    '&.Mui-selected': {
+      color: theme.palette.secondary.main,
+      backgroundColor: 'transparent',
+    },
+  }),
+);
+
+/**
+ * @see [our Storybook component](https://entria.github.io/woovi-admin/?path=/story/ui-togglebuttongroup--component)
+ */
+const ToggleButtonGroup = ({
+  group,
+  exclusive = true,
+  canValueBeNull = true,
+  initialValue,
+  onValueChange,
+}: ToggleButtonGroupProps) => {
+  const [value, setValue] = useState<GroupValue>(() => {
+    if (exclusive) {
+      return initialValue ?? null;
+    }
+
+    return initialValue ? [initialValue] : [];
+  });
+
+  const matchMobile = useMediaQuery('(max-width: 600px)');
+
+  if (matchMobile) {
+    const handleChange = (value: GroupValue) => {
+      setValue(value);
+      onValueChange && onValueChange(value);
+    };
+
+    return (
+      <ToggleButtonGroupMobile
+        group={group}
+        value={value}
+        onValueChange={handleChange}
+      />
+    );
+  }
+
+  const handleValue = (
+    _: React.MouseEvent<HTMLElement>,
+    newValue: GroupValue,
+  ) => {
+    if (
+      canValueBeNull ||
+      (exclusive && newValue !== null) ||
+      (Array.isArray(newValue) && newValue.length > 0)
+    ) {
+      setValue(newValue);
+      onValueChange && onValueChange(newValue);
+
+      return;
+    }
+  };
+
+  return (
+    <MUIToggleButtonGroup
+      exclusive={exclusive}
+      value={value}
+      onChange={handleValue}
+    >
+      {group.map((item, i) => (
+        <StyledToggleButton key={`${item.text}-${i}`} value={item.value}>
+          {item.text}
+        </StyledToggleButton>
+      ))}
+    </MUIToggleButtonGroup>
+  );
+};
+
+export default ToggleButtonGroup;

package/src/ToggleButtonGroupMobile.tsx

@@ -0,0 +1,56 @@
+import FormControl from '@mui/material/FormControl';
+import InputBase from '@mui/material/InputBase';
+import type { InputBaseProps } from '@mui/material/InputBase';
+import NativeSelect from '@mui/material/NativeSelect';
+import { styled, alpha, lighten } from '@mui/material/styles';
+
+import type { ToggleButtonGroupProps, GroupValue } from './ToggleButtonGroup';
+
+const BootstrapInput = styled(InputBase)<InputBaseProps>(({ theme }) => ({
+  '& .MuiInputBase-input': {
+    width: '100%',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: 10,
+    border: `2px solid ${lighten(theme.palette.secondary.main, 0.8)}`,
+    color: theme.palette.secondary.main,
+    fontSize: 18,
+    fontWeight: 600,
+    paddingLeft: 16,
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    '&:focus': {
+      borderRadius: 4,
+      borderColor: lighten(theme.palette.primary.main, 0.5),
+      boxShadow: `0 0 0 0.2rem ${alpha(theme.palette.primary.main, 0.3)}`,
+    },
+  },
+}));
+
+export type ToggleButtonGroupMobileProps = ToggleButtonGroupProps & {
+  value: GroupValue;
+  onValueChange: (newValue: string) => void;
+};
+
+// @todo: Implement nullabe option via `canValueBeNull`.
+// @todo: Implement select multi options with `exclusive` false.
+const ToggleButtonGroupMobile = ({
+  group,
+  value,
+  onValueChange,
+}: ToggleButtonGroupMobileProps) => (
+  <FormControl sx={{ width: '100%' }}>
+    <NativeSelect
+      value={value}
+      onChange={(e) => onValueChange(e.target.value)}
+      input={<BootstrapInput />}
+    >
+      {group.map((item, i) => (
+        <option key={`mobile-item-${i}`} value={item.value}>
+          {item.text}
+        </option>
+      ))}
+    </NativeSelect>
+  </FormControl>
+);
+
+export default ToggleButtonGroupMobile;

package/src/TransactionTagEntryTypes.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { PIX_TRANSACTION_ENTRY_TYPES } from '@woovi/shared';
+import { Tag as _Tag } from '@woovi/ui';
+
+export const TRANSACTION_TAG_ENTRYTYPE_COLOR = {
+  [PIX_TRANSACTION_ENTRY_TYPES.CREDIT]: '#4CAF50',
+  [PIX_TRANSACTION_ENTRY_TYPES.DEBIT]: '#FF9800',
+};
+
+type Props = {
+  status?: string;
+};
+export const TransactionTagEntryType = styled(_Tag)<Props>`
+  background-color: ${(props) =>
+    TRANSACTION_TAG_ENTRYTYPE_COLOR[props.status]} !important;
+  color: white !important;
+`;

package/src/TransactionTagStatus.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+import { PIX_TRANSACTION_STATUS } from '@woovi/shared';
+
+import _Tag from './tag/Tag';
+
+export const TRANSACTION_TAG_STATUS_COLOR = {
+  [PIX_TRANSACTION_STATUS.RECEIVED]: '#4CAF50',
+  [PIX_TRANSACTION_STATUS.REFUNDED]: '#EF5350',
+  [PIX_TRANSACTION_STATUS.PARTIAL_REFUND]: '#FF9800',
+  [PIX_TRANSACTION_STATUS.IN_PROCESSING]: '#FF9800',
+  [PIX_TRANSACTION_STATUS.NOT_ACCOMPLISHED]: '#EF5350',
+  [PIX_TRANSACTION_STATUS.PENDING]: '#FF9800',
+  [PIX_TRANSACTION_STATUS.CONFIRMED]: '#4CAF50',
+  [PIX_TRANSACTION_STATUS.APPROVED]: '#FF9800',
+  [PIX_TRANSACTION_STATUS.EXPIRED]: '#EF5350',
+  [PIX_TRANSACTION_STATUS.APPLIED]: '#4CAF50',
+};
+
+type Props = {
+  status?: string;
+};
+export const TransactionTagStatus = styled(_Tag)<Props>`
+  background-color: ${(props) =>
+    TRANSACTION_TAG_STATUS_COLOR[props.status]} !important;
+  color: white !important;
+`;