@woovi/ui 4.0.942

package/src/mui/__stories__/TypographyExample.tsx

@@ -0,0 +1,29 @@
+import Typography from '@mui/material/Typography';
+
+import BoxFlex from '../BoxFlex';
+
+const TypographyExample = () => {
+  return (
+    <BoxFlex
+      sx={{
+        flexDirection: 'column',
+      }}
+    >
+      <Typography variant={'h1'}>This is a h1 text</Typography>
+      <Typography variant={'h2'}>This is a h2 text</Typography>
+      <Typography variant={'h3'}>This is a h3 text</Typography>
+      <Typography variant={'h4'}>This is a h4 text</Typography>
+      <Typography variant={'h5'}>This is a h5 text</Typography>
+      <Typography variant={'h6'}>This is a h6 text</Typography>
+      <Typography variant={'subtitle1'}>This is a subtitle1 text</Typography>
+      <Typography variant={'subtitle2'}>This is a subtitle2 text</Typography>
+      <Typography variant={'body1'}>This is a body1 text</Typography>
+      <Typography variant={'body2'}>This is a body2 text</Typography>
+      <Typography variant={'button'}>This is a button text</Typography>
+      <Typography variant={'caption'}>This is a caption text</Typography>
+      <Typography variant={'overline'}>This is a overline text</Typography>
+    </BoxFlex>
+  );
+};
+
+export default TypographyExample;

package/src/multifactor/MultiFactorConfirmModal.tsx

@@ -0,0 +1,67 @@
+import Typography from '@mui/material/Typography';
+import { useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+
+import ActionButton from '../buttons/ActionButton';
+import Modal from '../Modal/Modal';
+import PinInputFormik from '../pinInput/PinInputFormik';
+
+export type MultiFactorConfirmModalProps = {
+  title: string;
+  message: React.ReactNode;
+  isOpen: boolean;
+  isMutationPending?: boolean;
+  onConfirm: VoidFunction;
+  onCancel: VoidFunction;
+};
+
+const MultiFactorConfirmModal = ({
+  title,
+  message,
+  isOpen,
+  isMutationPending = false,
+  onConfirm,
+  onCancel,
+}: MultiFactorConfirmModalProps) => {
+  const { t } = useTranslation();
+
+  const [field] = useField('multiFactorCode');
+
+  const isDisabled =
+    isMutationPending ||
+    field.value.length < 6 ||
+    field.value.replaceAll(' ', '').length < 6;
+
+  return (
+    <Modal
+      title={title}
+      isOpen={isOpen}
+      handleClose={onCancel}
+      maxWidth={'xs'}
+      actions={[
+        <ActionButton
+          key={'action-1'}
+          variant='text'
+          color='secondary'
+          onClick={onCancel}
+        >
+          {t('Cancel')}
+        </ActionButton>,
+        <ActionButton
+          key={'action-2'}
+          onClick={() => onConfirm()}
+          disabled={isDisabled}
+        >
+          {t('Confirm')}
+        </ActionButton>,
+      ]}
+    >
+      <Typography>
+        {message}
+        <PinInputFormik name={'multiFactorCode'} />
+      </Typography>
+    </Modal>
+  );
+};
+
+export default MultiFactorConfirmModal;

package/src/multifactor/__stories__/MultiFactorConfirmModal.stories.tsx

@@ -0,0 +1,30 @@
+import type { Story, Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import ActionButton from '../../buttons/ActionButton';
+import MultiFactorConfirmModal from '../MultiFactorConfirmModal';
+import type { MultiFactorConfirmModalProps } from '../MultiFactorConfirmModal';
+
+export default {
+  title: 'MultiFactor/MultiFactorConfirmModal',
+  component: MultiFactorConfirmModal,
+} as Meta;
+
+export const Example: Story<MultiFactorConfirmModalProps> = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <ActionButton onClick={() => setIsOpen(true)}>Open modal</ActionButton>
+      <MultiFactorConfirmModal
+        title={'Confirme a mudança da chave Pix'}
+        message={
+          'Enviamos um código de validação para o seu email de cadastro.\nDigite o código para confirmar a mudança da chave Pix de depósito.'
+        }
+        isOpen={isOpen}
+        onConfirm={() => null}
+        onCancel={() => setIsOpen(false)}
+      />
+    </>
+  );
+};

package/src/openpix/charge/ChargeTagStatus.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import {
+  CHARGE_STATUS_ENUM,
+  SUBSCRIPTION_INSTALLMENT_STATUS_ENUM,
+} from '@woovi/shared';
+
+import { default as _Tag } from '../../tag/Tag';
+
+export const TAG_STATUS_COLOR = {
+  [CHARGE_STATUS_ENUM.ACTIVE]: '#FF9800',
+  [CHARGE_STATUS_ENUM.ACTIVE_WAITING_PAYMENT_METHOD]: '#FF9800',
+  [CHARGE_STATUS_ENUM.EXPIRED]: '#ff7f50',
+  [CHARGE_STATUS_ENUM.OVERDUE]: '#e65100',
+  [CHARGE_STATUS_ENUM.COMPLETED]: '#4CAF50',
+  [SUBSCRIPTION_INSTALLMENT_STATUS_ENUM.SCHEDULED]: 'rgb(0 149 255)', // status for when the installment of charge is scheduled
+};
+export const ChargeTagStatus = styled(_Tag)<{ status: string }>`
+  background-color: ${(props) => TAG_STATUS_COLOR[props.status]} !important;
+  color: white !important;
+`;

package/src/openpix/images/GiftbackEnvelopeSvg.tsx

@@ -0,0 +1,152 @@
+type GiftbackEnvelopeSvgProps = {
+  width: number;
+  height: number;
+};
+
+const GiftbackEnvelopeSvg = ({
+  width = 229,
+  height = 208,
+}: GiftbackEnvelopeSvgProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox='0 0 229 208'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M216.835 44.9308C191.237 8.86451 135.078 -8.59811 97.4743 4.15159C78.6226 10.5512 63.9382 23.9459 48.1623 35.3561C31.8903 47.064 13.3363 57.7797 5.49794 76.2841C-0.703269 90.919 1.57878 108.332 10.4589 123.314C20.5793 140.33 38.1907 151.443 53.0736 164.193C63.4421 173.023 72.9175 182.846 83.9805 190.883C109.133 208.99 139.692 212.066 165.837 202.59C188.012 194.554 191.088 176.595 196.247 155.858C202.647 130.309 219.564 109.771 225.12 84.172C227.997 71.0255 225.368 56.9363 216.835 44.9308Z'
+        fill='#03D69D'
+      />
+      <path
+        opacity='0.7'
+        d='M216.835 44.9308C191.237 8.86451 135.078 -8.59811 97.4743 4.15159C78.6226 10.5512 63.9382 23.9459 48.1623 35.3561C31.8903 47.064 13.3363 57.7797 5.49794 76.2841C-0.703269 90.919 1.57878 108.332 10.4589 123.314C20.5793 140.33 38.1907 151.443 53.0736 164.193C63.4421 173.023 72.9175 182.846 83.9805 190.883C109.133 208.99 139.692 212.066 165.837 202.59C188.012 194.554 191.088 176.595 196.247 155.858C202.647 130.309 219.564 109.771 225.12 84.172C227.997 71.0255 225.368 56.9363 216.835 44.9308Z'
+        fill='white'
+      />
+      <path
+        d='M28.8891 29.4547L208.298 54.5639C213.833 55.3739 217.748 60.5037 216.938 66.0386L202.089 171.74C201.279 177.275 196.149 181.19 190.614 180.38L11.2046 155.406C5.66982 154.596 1.75495 149.466 2.56492 143.931L17.4145 38.2294C18.0894 32.5596 23.2193 28.6447 28.8891 29.4547Z'
+        fill='#263238'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M29.1591 28.6448L208.568 53.754C214.103 54.5639 218.018 59.6938 217.208 65.2286L202.359 170.93C201.549 176.465 196.419 180.38 190.884 179.57L11.4746 154.461C5.93981 153.651 2.02494 148.521 2.83491 142.986L17.6844 37.2845C18.3594 31.7497 23.4893 27.8348 29.1591 28.6448Z'
+        fill='#03D69D'
+      />
+      <path
+        d='M29.1591 28.6448L208.568 53.754C214.103 54.5639 218.018 59.6938 217.208 65.2286L202.359 170.93C201.549 176.465 196.419 180.38 190.884 179.57L11.4746 154.461C5.93981 153.651 2.02494 148.521 2.83491 142.986L17.6844 37.2845C18.3594 31.7497 23.4893 27.8348 29.1591 28.6448Z'
+        stroke='#263238'
+        strokeWidth='0.75'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M104.622 101.813C106.242 101.813 107.727 100.598 108.807 98.7079L210.188 114.637L212.888 95.063L111.101 83.4534C110.831 81.4284 110.022 79.6735 108.672 78.1885C104.352 74.4087 88.9622 78.3235 82.4824 80.0785L80.7274 79.8085C80.5924 79.5385 80.3225 79.2685 80.1875 79.1335L88.5572 36.8799L69.9278 34.3149L65.6079 76.7036C65.2029 76.8386 64.798 76.9736 64.528 77.2436L61.2881 76.5686C55.2133 72.7887 42.5237 65.7689 37.6638 68.0639C36.4489 68.7388 35.3689 69.8188 34.5589 71.0338L13.4996 66.9839L10.6647 86.6933L32.264 88.8532C32.669 90.3382 33.7489 91.5531 35.0989 92.0931C37.7988 92.7681 42.1187 92.3631 46.7085 91.6881C30.1041 101.678 25.6492 123.817 25.6492 123.817L36.1789 118.417L44.2786 129.217C45.3586 109.778 57.1032 97.8979 63.718 92.6331L53.0533 160.266L69.9278 162.561L77.8925 93.7131H78.2975C83.0224 100.058 92.0671 115.312 87.6122 135.157L98.4119 127.057L107.052 135.157C107.052 135.157 108.807 113.422 96.252 99.2479C98.8169 100.733 101.652 101.543 104.622 101.813Z'
+        fill='#263238'
+      />
+      <path
+        d='M13.7696 64.4189L11.0696 83.8583L68.4428 89.3931L210.593 111.802L213.293 92.3631L70.3328 76.0286L13.7696 64.4189Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M50.2184 160.806L66.9578 163.236L76.2726 83.8581L85.8572 36.4746L67.4978 33.9097L62.773 82.1031L50.2184 160.806Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M65.8779 86.4232C65.8779 86.4232 44.0086 98.7078 42.6587 125.167L34.6939 114.637L24.4342 119.902C24.4342 119.902 30.374 90.2031 54.6733 84.8032L65.8779 86.4232Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M73.3027 87.5029C73.3027 87.5029 90.8521 105.322 85.0473 131.242L95.577 123.277L104.082 131.242C104.082 131.242 106.512 101.002 84.6423 89.1229L73.3027 87.5029Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M62.638 75.8932C62.638 75.8932 42.5237 62.5286 36.1789 65.4985C29.8341 68.4684 27.6741 87.2328 33.7489 88.8528C39.8237 90.4727 55.4832 85.8829 62.098 86.8278L62.638 75.8932Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M32.939 86.288C33.209 88.7179 40.0937 88.7179 45.3586 88.4479C49.2734 87.9079 53.3233 87.2329 56.8332 86.8279C48.4635 85.613 32.669 83.4531 32.939 86.288Z'
+        fill='#999999'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M77.4875 77.9185C77.4875 77.9185 100.572 70.6287 105.837 75.2186C111.101 79.8084 108.132 98.4378 101.787 98.4378C95.442 98.4378 81.6724 89.6631 75.0576 88.7181L77.4875 77.9185Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M103.137 96.1429C102.327 98.3029 95.5769 96.5479 90.5821 94.793C86.9372 93.173 83.1573 91.4181 79.9174 90.2031C88.4222 91.2831 104.082 93.578 103.137 96.1429Z'
+        fill='#999999'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M73.0327 91.1481L63.448 89.7981C61.693 89.5281 60.3431 87.9082 60.4781 86.1532L61.018 76.9735C61.153 75.0836 62.773 73.5986 64.6629 73.7336C64.7979 73.7336 64.7979 73.7336 64.9329 73.7336L76.0026 75.3536C77.8925 75.6236 79.2425 77.3785 78.9725 79.2685C78.9725 79.4034 78.9725 79.4034 78.9725 79.5384L76.9475 88.4482C76.5425 90.2031 74.9226 91.4181 73.0327 91.1481Z'
+        fill='white'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M122.981 177.815L127.976 178.49'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M86.1273 173.09L117.851 177.14'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M72.0877 171.2L79.2425 172.145'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M116.096 34.5846L111.101 33.9097'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M153.085 39.4446L121.226 35.2598'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M166.99 41.1994L159.835 40.2544'
+        stroke='#263238'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default GiftbackEnvelopeSvg;

package/src/openpix/images/WooviLogoInMobile.tsx

@@ -0,0 +1,35 @@
+const WooviLogoInMobile = ({ size = '100px' }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox='0 0 195 182'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M2.13871 62.2408C2.13871 62.2408 10.3588 27.4986 42.7525 10.5971C75.1462 -6.30429 113.779 0.886713 145.237 5.85722C176.696 10.8277 196.706 34.8945 194.566 63.7653C192.427 92.6361 167.058 95.3647 147.688 124.312C128.319 153.26 127.315 164.025 96.1129 177.331C64.9106 190.637 24.8391 168.744 9.42793 129.932C-5.9832 91.1202 2.13871 62.2408 2.13871 62.2408Z'
+        fill='#03D69D'
+      />
+      <path
+        opacity='0.7'
+        d='M2.13871 62.2408C2.13871 62.2408 10.3588 27.4986 42.7525 10.5971C75.1462 -6.30429 113.779 0.886712 145.237 5.85722C176.696 10.8277 196.706 34.8945 194.566 63.7653C192.427 92.6361 167.058 95.3647 147.688 124.312C128.319 153.26 127.315 164.025 96.1129 177.331C64.9106 190.637 24.8391 168.744 9.42793 129.932C-5.9832 91.1202 2.13871 62.2408 2.13871 62.2408Z'
+        fill='white'
+      />
+      <path
+        d='M135.411 4.02396H105.264L104.012 6.34695C103.335 7.56463 102.344 8.57911 101.143 9.28539C99.9417 9.99168 98.5736 10.3641 97.1801 10.3641C95.7866 10.3641 94.4184 9.99168 93.2172 9.28539C92.016 8.57911 91.0253 7.56463 90.3478 6.34695L89.0923 4.02396H58.9362C57.4114 4.00343 55.9408 4.58926 54.8478 5.65265C53.7548 6.71605 53.1288 8.16997 53.1074 9.69478V164.938C53.1174 165.693 53.2762 166.439 53.5745 167.133C53.8729 167.827 54.3051 168.456 54.8463 168.983C55.3876 169.51 56.0274 169.925 56.7291 170.204C57.4309 170.484 58.1809 170.623 58.9362 170.613H135.411C136.936 170.632 138.406 170.045 139.498 168.981C140.59 167.917 141.215 166.462 141.236 164.938V9.69478C141.214 8.17072 140.589 6.71745 139.497 5.65418C138.405 4.59091 136.935 4.00457 135.411 4.02396Z'
+        fill='white'
+        stroke='#263238'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M88.4207 90.6044C90.3904 92.5089 92.1993 94.2579 94.0082 96.0069C89.908 100.865 84.803 103.858 78.0096 102.614C71.6986 101.448 67.5583 97.6782 65.9102 91.615C64.1817 85.2019 67.2367 78.5557 73.1457 75.2909C79.0547 72.026 86.4511 72.8811 91.3149 77.5063C96.7416 82.6367 102.048 87.8838 107.434 93.0531C110.208 95.696 114.308 96.0069 117.282 93.8693C120.619 91.4595 121.222 86.7955 118.649 83.6473C116.036 80.499 111.213 79.9938 108.077 82.6367C106.992 83.5307 106.108 84.6578 105.183 85.6683C103.173 83.725 101.364 81.976 99.5554 80.227C103.535 75.4852 108.56 72.2592 116.036 73.6973C122.267 74.8633 126.89 79.7994 127.935 85.9793C128.94 92.0425 125.644 98.3001 119.895 101.215C114.026 104.169 106.912 103.158 102.128 98.611C96.7818 93.4806 91.4757 88.3113 86.1295 83.1809C83.8382 80.9654 80.6224 80.3047 77.8086 81.5484C74.9546 82.7922 73.3869 84.9687 73.3467 88.0392C73.3065 91.0708 74.7536 93.364 77.6076 94.6466C80.5018 95.9292 83.2353 95.5405 85.6471 93.5195C86.6922 92.5867 87.5364 91.5372 88.4207 90.6044Z'
+        fill='#03D69D'
+      />
+    </svg>
+  );
+};
+
+export default WooviLogoInMobile;

package/src/openpix/order/CheckIcon.tsx

@@ -0,0 +1,20 @@
+const CheckIcon = () => {
+  return (
+    <svg
+      width={90}
+      height={90}
+      viewBox='0 0 135 135'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M67.5 0C30.222 0 0 30.222 0 67.5S30.222 135 67.5 135 135 104.778 135 67.5 104.778 0 67.5 0zm29.258 56.086a6.137 6.137 0 10-9.425-7.854L60.946 79.889 47.293 66.23a6.136 6.136 0 00-8.677 8.678l18.41 18.409a6.136 6.136 0 009.05-.412l30.682-36.818z'
+        fill='#03D69D'
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;

package/src/openpix/order/ConfirmedIcon.tsx

@@ -0,0 +1,189 @@
+const ConfirmedIcon = () => {
+  return (
+    <svg
+      width='259'
+      height='259'
+      viewBox='0 0 259 259'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g clipPath='url(#clip0_41_572)'>
+        <path
+          d='M240.166 54.3437C238.354 51.4256 236.323 48.5625 234.181 45.9196C216.391 24.0059 193.165 14.7559 166.645 8.5342C139.246 2.09224 107.125 0.110096 80.824 11.6726C74.6194 14.4256 68.7443 18.0595 64.0772 23.0149C46.4518 41.68 40.4119 72.9538 20.8098 97.6756C1.20775 122.397 -8.3462 153.176 9.22429 182.412C16.6917 194.801 26.1908 204.987 37.392 213.961C51.2287 224.973 63.1437 239.894 79.1768 248.484C95.9786 257.513 118.381 260.707 136.995 256.522C158.244 251.787 170.653 232.957 186.851 220.183C199.644 210.052 214.909 203.445 227.428 193.039C246.591 177.071 261.141 151.359 258.725 125.921C256.364 101.199 253.289 75.5416 240.166 54.3437Z'
+          fill='#D4F8EE'
+        />
+        <path
+          opacity='0.7'
+          d='M240.166 54.3437C238.354 51.4256 236.323 48.5625 234.181 45.9196C216.391 24.0059 193.165 14.7559 166.645 8.5342C139.246 2.09224 107.125 0.110096 80.824 11.6726C74.6194 14.4256 68.7443 18.0595 64.0772 23.0149C46.4518 41.68 40.4119 72.9538 20.8098 97.6756C1.20775 122.397 -8.3462 153.176 9.22429 182.412C16.6917 194.801 26.1908 204.987 37.392 213.961C51.2287 224.973 63.1437 239.894 79.1768 248.484C95.9786 257.513 118.381 260.707 136.995 256.522C158.244 251.787 170.653 232.957 186.851 220.183C199.644 210.052 214.909 203.445 227.428 193.039C246.591 177.071 261.141 151.359 258.725 125.921C256.364 101.199 253.289 75.5416 240.166 54.3437Z'
+          fill='#D4F8EE'
+        />
+        <path
+          d='M204 81.0021V57.0662H201.82V26.3657C201.82 15.9067 193.414 7.47708 183.036 7.42505C183.036 7.42505 183.036 7.42505 182.984 7.42505H81.7438C71.3136 7.42505 62.9072 15.8547 62.9072 26.3137C62.9072 26.3137 62.9072 26.3137 62.9072 26.3657V232.631C62.9072 243.09 71.3655 251.52 81.7438 251.52H182.984C193.414 251.52 201.82 243.038 201.82 232.631V101.4H204V87.2463H201.82V81.0021H204Z'
+          fill='#707070'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M85.9462 10.0789H178.728C190.248 10.0789 199.588 19.4451 199.588 30.9968V227.948C199.588 239.5 190.248 248.866 178.728 248.866H85.9462C74.4264 248.866 65.0859 239.5 65.0859 227.948V30.9968C65.0859 19.4451 74.4264 10.0789 85.9462 10.0789Z'
+          fill='#263238'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M177.068 11.796H139.707L139.655 11.9521C138.565 15.9587 136.022 18.5605 133.168 18.5605H131.56C128.758 18.5605 126.215 15.9587 125.073 11.9521V11.796H87.6598C77.2296 11.796 68.8232 20.2776 68.8232 30.6846V219.102C68.8232 229.561 77.2815 237.991 87.6598 237.991H177.017C187.395 237.991 195.853 229.561 195.853 219.102V30.6846C195.905 20.2776 187.447 11.796 177.068 11.796Z'
+          fill='white'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M177.069 11.796H139.707L139.655 11.9521C138.565 15.9587 136.022 18.5605 133.168 18.5605H131.56C128.758 18.5605 126.215 15.9587 125.073 11.9521V11.796H87.6598C77.2296 11.796 68.8232 20.2776 68.8232 30.6846V32.818H195.905V30.6846C195.905 20.2776 187.447 11.796 177.069 11.796Z'
+          fill='#03D69D'
+        />
+        <path
+          d='M181.323 120.601C181.323 116.178 187.342 110.922 186.252 106.811C185.111 102.544 177.275 101.088 175.096 97.341C172.968 93.5945 175.563 85.9975 172.501 82.9274C169.44 79.8574 161.915 82.5111 158.127 80.3257C154.339 78.1402 152.938 70.283 148.683 69.1382C144.584 68.0455 139.395 74.0815 134.932 74.0815C130.469 74.0815 125.28 68.0455 121.181 69.1382C116.926 70.283 115.473 78.1402 111.737 80.3257C108 82.4591 100.424 79.8574 97.3626 82.9274C94.301 85.9975 96.9475 93.5425 94.768 97.341C92.5886 101.14 84.753 102.544 83.6114 106.811C82.5217 110.922 88.5411 116.126 88.5411 120.601C88.5411 125.076 82.5217 130.279 83.6114 134.39C84.753 138.657 92.5886 140.114 94.768 143.86C96.8956 147.607 94.301 155.204 97.3626 158.274C100.424 161.344 107.948 158.69 111.737 160.875C115.525 163.061 116.926 170.918 121.181 172.063C125.28 173.156 130.469 167.12 134.932 167.12C139.395 167.12 144.584 173.156 148.683 172.063C152.938 170.918 154.391 163.061 158.127 160.875C161.864 158.69 169.44 161.344 172.501 158.274C175.563 155.204 172.916 147.659 175.096 143.86C177.275 140.062 185.111 138.657 186.252 134.39C187.394 130.279 181.323 125.023 181.323 120.601Z'
+          fill='#03D69D'
+        />
+        <path
+          d='M134.362 139.229L114.332 117.999C113.398 116.958 113.398 115.345 114.435 114.408C115.473 113.472 117.082 113.472 118.016 114.513L133.739 131.216L153.613 102.336C154.34 101.14 155.897 100.775 157.09 101.504C158.284 102.232 158.647 103.793 157.92 104.99C157.868 105.042 157.817 105.146 157.765 105.198L134.362 139.229Z'
+          fill='white'
+        />
+        <path
+          d='M74.375 199.797H113.449'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M144.792 204.949H158.024'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M133.843 204.949H142.042'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M101.048 204.949H130.678'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M74.375 204.949H97.3628'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M124.295 210.465H150.033'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M101.463 210.465H121.078'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M74.375 210.465H98.2969'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M184.021 215.928H187.187'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M160.307 215.928H181.738'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M118.379 215.928H154.807'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M83.7158 215.928H114.695'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M74.375 215.928H80.083'
+          stroke='#263238'
+          strokeWidth='1.3179'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M131.974 14.5018C132.949 14.5018 133.739 13.7097 133.739 12.7326C133.739 11.7555 132.949 10.9634 131.974 10.9634C131 10.9634 130.21 11.7555 130.21 12.7326C130.21 13.7097 131 14.5018 131.974 14.5018Z'
+          fill='#707070'
+        />
+        <path
+          d='M156.104 19.7573H154.443V23.9721H156.104V19.7573Z'
+          fill='white'
+        />
+        <path
+          d='M158.335 18.9247H156.675V23.9721H158.335V18.9247Z'
+          fill='white'
+        />
+        <path
+          d='M160.567 18.3003H158.906V23.92H160.567V18.3003Z'
+          fill='white'
+        />
+        <path
+          d='M162.798 17.2596H161.138V23.92H162.798V17.2596Z'
+          fill='white'
+        />
+        <path
+          d='M183.555 23.816H173.488V17.6759H183.555V23.816ZM174.059 23.2957H182.984V18.2483H174.059V23.2957Z'
+          fill='white'
+        />
+        <path
+          d='M180.182 18.8207H174.889V22.6712H180.182V18.8207Z'
+          fill='white'
+        />
+        <path
+          d='M184.437 20.0175H183.191V21.4744H184.437V20.0175Z'
+          fill='white'
+        />
+        <path
+          d='M169.804 22.5151C169.752 22.5151 169.648 22.5151 169.596 22.4631C167.521 21.2663 166.172 22.359 166.12 22.4111C165.964 22.5672 165.756 22.5672 165.601 22.4631C165.445 22.307 165.445 22.0989 165.549 21.9428L165.601 21.8907C165.653 21.8387 167.417 20.3297 169.96 21.8387C170.115 21.9428 170.219 22.1509 170.115 22.359C170.063 22.4111 169.96 22.5151 169.804 22.5151Z'
+          fill='white'
+        />
+        <path
+          d='M170.581 21.2143C170.529 21.2143 170.426 21.2143 170.374 21.1622C167.416 19.393 165.444 21.1102 165.392 21.1102C165.237 21.2663 165.029 21.2143 164.873 21.1102C164.718 20.9541 164.77 20.7459 164.925 20.5898C164.925 20.5898 167.364 18.5085 170.789 20.5378C170.945 20.6419 171.048 20.85 170.945 21.0582C170.841 21.1622 170.685 21.2143 170.581 21.2143Z'
+          fill='white'
+        />
+        <path
+          d='M171.257 19.8093C171.205 19.8093 171.101 19.8093 171.049 19.7573C167.313 17.5198 164.822 19.6012 164.718 19.7052C164.563 19.8613 164.303 19.8093 164.199 19.6532C164.044 19.4971 164.096 19.2369 164.251 19.1328C164.303 19.1328 167.261 16.5831 171.464 19.0808C171.62 19.1849 171.724 19.393 171.62 19.6012C171.516 19.7052 171.36 19.8093 171.257 19.8093Z'
+          fill='white'
+        />
+        <path
+          d='M168.661 23.1395C168.661 23.6599 168.246 24.0761 167.727 24.0761C167.208 24.0761 166.793 23.6599 166.793 23.1395C166.793 22.6192 167.208 22.2029 167.727 22.2029C168.246 22.2029 168.661 22.6192 168.661 23.1395Z'
+          fill='white'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_41_572'>
+          <rect width='259' height='259' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default ConfirmedIcon;

package/src/openpix/order/EarnCashback.tsx

@@ -0,0 +1,39 @@
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+import { CASHBACK_STATUS } from '@woovi/shared';
+import { convertToCurrency } from '@woovi/utils';
+
+import Ribbon from '../../ribbon/Ribbon';
+import type { ChargeData } from '../paymentLink/types/ChargeDataType';
+
+type EarnGfitbackProps = {
+  chargeData: ChargeData;
+};
+
+const EarnCashback = ({ chargeData }: EarnGfitbackProps) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!chargeData?.cashback) {
+    return null;
+  }
+
+  if (chargeData.cashback?.status !== CASHBACK_STATUS.PENDING) {
+    return null;
+  }
+
+  const earnCashbackValue = convertToCurrency(chargeData.cashback.value / 100);
+
+  return (
+    <Ribbon>
+      <Typography>🤑</Typography>
+      <Typography color={theme.palette.tertiary.main} sx={{ fontSize: '16px' }}>
+        <b>{earnCashbackValue}</b> {t('cashback on time!')}
+      </Typography>
+    </Ribbon>
+  );
+};
+
+export default EarnCashback;

package/src/openpix/order/EarnCashbackExclusive.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+import { CASHBACK_STATUS } from '@woovi/shared';
+import { convertToCurrency } from '@woovi/utils';
+
+import Ribbon from '../../ribbon/Ribbon';
+import type { ChargeData } from '../paymentLink/types/ChargeDataType';
+
+type EarnCashbackExclusiveProps = {
+  chargeData: ChargeData;
+};
+
+const EarnCashbackExclusive = ({ chargeData }: EarnCashbackExclusiveProps) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!chargeData?.cashbackExclusive) {
+    return null;
+  }
+
+  if (chargeData.cashbackExclusive?.status !== CASHBACK_STATUS.PENDING) {
+    return null;
+  }
+
+  const earnCashbackExclusiveValue = convertToCurrency(
+    chargeData.cashbackExclusive.value / 100,
+  );
+
+  return (
+    <Ribbon color={theme.palette.warning.light}>
+      <Typography>🎁</Typography>
+      <Typography color={theme.palette.tertiary.main} sx={{ fontSize: '16px' }}>
+        <b>{earnCashbackExclusiveValue}</b>{' '}
+        {t('of cashback on the next purchase!')}
+      </Typography>
+    </Ribbon>
+  );
+};
+
+export default EarnCashbackExclusive;

package/src/openpix/order/GiftbackRedeem.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+
+import { Tag, TagsContainer } from '@woovi/ui';
+import { maskMoney } from '@woovi/utils';
+
+type Props = {
+  giftbackAppliedValue: number;
+};
+export const GiftbackRedeem = ({ giftbackAppliedValue }: Props) => {
+  const { t } = useTranslation();
+
+  if (!giftbackAppliedValue) {
+    return null;
+  }
+
+  const getStringValue = () => {
+    return t('You redeemed {{giftbackValue}} of Giftback', {
+      giftbackValue: maskMoney(giftbackAppliedValue / 100),
+    });
+  };
+
+  return (
+    <TagsContainer>
+      <Tag
+        key={giftbackAppliedValue}
+        label={getStringValue()}
+        variant='default'
+        style={{
+          background: '#4CAF50',
+          color: '#FFFFFF',
+          fontWeight: 600,
+          fontSize: '14px',
+          lineHeight: '22px',
+        }}
+      />
+    </TagsContainer>
+  );
+};