Merge pull request #247 from deriv-com/Jia/refactor-fast-payment

libs/blocks/src/lib/fast-payment/base/base.spec.tsx

@@ -1,55 +1,24 @@
-import { render } from '@testing-library/react';
-
-import {
-  FlagAndorraIcon,
-  FlagAustraliaIcon,
-  FlagBurkinaFasoIcon,
-} from '@deriv/quill-icons/Flags';
+import { render, screen } from '@testing-library/react';
 import Base from './index';
-import { CardContent } from '@deriv-com/components';
+import { cards } from './data';
 
 const title = 'Hassle-free deposits and withdrawals';
 const desc = 'Make instant deposits from 10,000 HKD. Withdraw in minutes.';
-
-const cards: CardContent[] = [
-  {
-    header: '',
-    color: 'gray',
-    align: 'center',
-    size: 'lg',
-    icon: <FlagBurkinaFasoIcon fill="black" iconSize="2xl" />,
-    className: 'h-fit',
-    nonContentClassName: 'p-general-xl',
-  },
-  {
-    header: '',
-    color: 'gray',
-    align: 'center',
-    size: 'lg',
-    icon: <FlagAndorraIcon fill="black" iconSize="2xl" />,
-    className: 'h-fit',
-    nonContentClassName: 'p-general-xl',
-  },
-  {
-    header: '',
-    color: 'gray',
-    align: 'center',
-    size: 'lg',
-    icon: <FlagAustraliaIcon fill="black" iconSize="2xl" />,
-    className: 'h-fit',
-    nonContentClassName: 'p-general-xl',
-  },
-];
+const link = {
+  content: 'testing',
+  href: '/',
+};
 
 describe('FastPayment', () => {
   it('should render successfully', () => {
     const { baseElement, queryByText, container } = render(
       <Base
         title={title}
         description={desc}
+        link={link}
         content={{
           className: 'h-fit',
-          cards: cards,
+          cards: cards.slice(0, 3),
         }}
       />,
     );
@@ -58,7 +27,9 @@ describe('FastPayment', () => {
     expect(container.querySelector('h2')).toBeTruthy();
     expect(queryByText(title)).toBeTruthy();
     expect(queryByText(desc)).toBeTruthy();
-    expect(document.getElementById('cards-container')).toBeTruthy();
+    expect(screen.getByTestId('cards-container')).toBeTruthy();
+    expect(screen.getByTestId('fast-payment-link')).toBeTruthy();
+    expect(screen.getByTestId('fast-payment-description')).toBeTruthy();
   });
 
   //render without description
@@ -69,14 +40,15 @@ describe('FastPayment', () => {
         content={{
           className: 'h-fit',
           cols: 'infinite',
-          cards: cards,
+          cards: cards.slice(0, 3),
         }}
       />,
     );
 
     expect(container.querySelector('h2')).toBeTruthy();
-    expect(document.getElementById('fast-payment-description')).toBeNull();
-    expect(document.getElementById('cards-container')).toBeTruthy();
-    expect(document.getElementById('infinite-carousel')).toBeTruthy();
+    expect(screen.queryByTestId('fast-payment-description')).toBeNull();
+    expect(screen.queryByTestId('fast-payment-link')).toBeNull();
+    expect(screen.getByTestId('cards-container')).toBeTruthy();
+    expect(screen.queryAllByTestId('infinite-carousel')).toBeTruthy();
   });
 });

libs/blocks/src/lib/fast-payment/base/base.stories.tsx

@@ -1,40 +1,40 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Base from '.';
-import { cards } from './data';
+import { cards, sliderCards } from './data';
 
 const content: Record<string, object | null> = {
-  two_col: {
+  twoCol: {
     cols: 'two',
     cards: cards.slice(0, 2),
   },
-  three_col: {
+  threeCol: {
     cols: 'three',
     cards: cards.slice(0, 3),
   },
-  four_col: {
+  fourCol: {
     cols: 'four',
     cards: cards.slice(0, 4),
   },
-  five_col: {
+  fiveCol: {
     cols: 'five',
     cards: cards.slice(0, 5),
   },
   carousel: {
     cols: 'infinite',
-    cards: cards,
+    cards: sliderCards,
   },
 };
 
 const links: Record<string, object | null> = {
-  with_link: {
+  withLink: {
     content: 'Learn More',
     href: '#',
   },
   none: null,
 };
 
 const meta = {
-  title: 'Blocks/FastPayment/Default',
+  title: 'Blocks/FastPayment',
   component: Base,
   tags: ['autodocs'],
   argTypes: {
@@ -44,6 +44,7 @@ const meta = {
     title: {
       description: '`string`',
     },
+    className: { table: { disable: true } },
     link: {
       description: '`{content: ReactNode, href: string}`',
       options: Object.keys(links),
@@ -74,11 +75,12 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     description: 'Make instant deposits from 10,000 HKD. Withdraw in minutes.',
-    title: 'Hassle-free deposits and withdrawals',
+    title: 'Hassle-free deposits and withdrawals.',
     link: {
       content: 'Learn More',
       href: '#',
     },
+    className: 'bg-background-primary-container',
     disclaimer: '*Disclaimer text goes here.',
     content: {
       cards: cards.slice(0, 3),
@@ -151,7 +153,7 @@ export const Carousel: Story = {
     ...Default.args,
     content: {
       cols: 'infinite',
-      cards: cards,
+      cards: sliderCards,
     },
   },
 };

libs/blocks/src/lib/fast-payment/base/data.tsx

@@ -4,7 +4,7 @@ import {
   PaymentMethodSkrillBrandIcon,
 } from '@deriv/quill-icons';
 
-export const cards: CardContent[] = [
+export const sliderCards: CardContent[] = [
   {
     id: 1,
     icon: <PaymentMethodSkrillBrandIcon height="80px" width="128px" />,
@@ -76,3 +76,46 @@ export const cards: CardContent[] = [
     align: 'center',
   },
 ];
+
+export const cards: CardContent[] = [
+  {
+    id: 1,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+    header: 'Header.',
+    description: 'Description.',
+  },
+  {
+    id: 2,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+    header: 'Header.',
+    description: 'Description.',
+  },
+  {
+    id: 3,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+    header: 'Header.',
+    description: 'Description.',
+  },
+  {
+    id: 4,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+    header: 'Header.',
+    description: 'Description.',
+  },
+  {
+    id: 5,
+    color: 'gray',
+    size: 'xs',
+    align: 'center',
+    header: 'Header.',
+    description: 'Description.',
+  },
+];

libs/blocks/src/lib/fast-payment/base/index.tsx

@@ -1,4 +1,4 @@
-import { FluidContainer, Heading, Text } from '@deriv/quill-design';
+import { FluidContainer, Heading, Text, qtJoin } from '@deriv/quill-design';
 import { CardsContainer, CustomLink } from '@deriv-com/components';
 
 import { FastPaymentProps } from '../types';
@@ -10,34 +10,46 @@ const Base: React.FC<FastPaymentProps> = ({
   description,
   link,
   disclaimer,
-  content: { cards = [], cols = 'three', dense },
+  content: { cards = [], cols = 'three', dense, sliderClass },
+  className,
 }) => {
   return (
-    <FluidContainer className="bg-background-primary-container py-general-4xl">
-      <div className="flex flex-col items-center text-center">
-        <Heading.H2>{title}</Heading.H2>
-        {description && <Text className="pt-general-lg">{description}</Text>}
-
-        {link && (
-          <div className="flex justify-center pt-general-xl">
-            <CustomLink href={link.href} className="w-fit" hasIcon>
-              {link.content}
-            </CustomLink>
-          </div>
-        )}
-        <CardsContainer
-          cards={cards}
-          variant="ContentBottom"
-          cols={cols}
-          dense={dense}
-          className="pt-general-2xl"
-        />
-        {disclaimer && (
-          <Text size="sm" className="pt-general-2xl text-typography-subtle">
-            {disclaimer}
-          </Text>
-        )}
-      </div>
+    <FluidContainer
+      className={qtJoin(
+        'flex flex-col items-center py-general-4xl text-center',
+        className,
+      )}
+      data-testid="fast-payment-container"
+    >
+      <Heading.H2>{title}</Heading.H2>
+      {description && (
+        <Text data-testid="fast-payment-description" className="pt-general-md">
+          {description}
+        </Text>
+      )}
+      {link && (
+        <CustomLink
+          href={link.href}
+          className="w-fit pt-general-xl"
+          hasIcon
+          data-testid="fast-payment-link"
+        >
+          {link.content}
+        </CustomLink>
+      )}
+      <CardsContainer
+        cards={cards}
+        variant="ContentBottom"
+        cols={cols}
+        dense={dense}
+        className="pt-general-2xl"
+        sliderClass={sliderClass}
+      />
+      {disclaimer && (
+        <Text size="sm" className="pt-general-2xl text-typography-subtle">
+          {disclaimer}
+        </Text>
+      )}
     </FluidContainer>
   );
 };

libs/blocks/src/lib/fast-payment/types/index.ts

@@ -12,4 +12,5 @@ export interface FastPaymentProps {
   link?: LinkProps;
   disclaimer?: ReactNode;
   content: Omit<CardsContainerProps<'ContentBottom'>, 'variant'>;
+  className?: string;
 }

libs/components/src/lib/cards-container/cards-container.classname.ts

@@ -0,0 +1,45 @@
+import { cva } from 'class-variance-authority';
+
+export const colsClass = cva('flex flex-wrap gap-gap-lg', {
+  variants: {
+    dense: {
+      true: 'lg:max-w-max',
+      false: '',
+    },
+    justify: {
+      center: 'lg:justify-center',
+      start: 'justify-start',
+    },
+  },
+  compoundVariants: [
+    {
+      dense: [true, false],
+      className: 'w-full',
+    },
+  ],
+  defaultVariants: {
+    dense: false,
+    justify: 'start',
+  },
+});
+
+export const cardContainer = cva('flex overflow-hidden', {
+  variants: {
+    cols: {
+      infinite: 'w-screen',
+      two: '',
+      three: '',
+      four: '',
+      five: '',
+    },
+  },
+  compoundVariants: [
+    {
+      cols: ['two', 'three', 'four', 'five'],
+      className: 'w-full',
+    },
+  ],
+  defaultVariants: {
+    cols: 'two',
+  },
+});