From 89d87d75013f3a4f909905bbe9843107c6d80780 Mon Sep 17 00:00:00 2001
From: Mimi Tran <80493680+mimi-imtbl@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:43:30 +1000
Subject: [PATCH] [NO CHANGELOG][Add Funds Widget] Add FiatOption component
 (#2233)

---
 .../add-funds/components/FiatOption.tsx       | 68 +++++++++++++++++++
 .../src/widgets/add-funds/types.ts            |  5 ++
 2 files changed, 73 insertions(+)
 create mode 100644 packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx
new file mode 100644
index 0000000000..881fabf788
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx
@@ -0,0 +1,68 @@
+import { IconProps, MenuItem, MenuItemSize } from '@biom3/react';
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FiatOptionType } from '../types';
+
+export interface FiatOptionProps<RC extends ReactElement | undefined = undefined> {
+  rc?: RC;
+  type: FiatOptionType;
+  onClick?: (type: FiatOptionType) => void;
+  disabled?: boolean;
+  size?: MenuItemSize;
+}
+
+export function FiatOption<RC extends ReactElement | undefined = undefined>({
+  type,
+  onClick,
+  disabled = false,
+  size,
+  rc = <span />,
+}: FiatOptionProps<RC>) {
+  const { t } = useTranslation();
+
+  const icon: Record<FiatOptionType, IconProps['icon']> = {
+    [FiatOptionType.DEBIT]: 'BankCard',
+    [FiatOptionType.CREDIT]: 'BankCard',
+  };
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick(type);
+    }
+  };
+
+  const menuItemProps = {
+    disabled,
+    emphasized: true,
+    onClick: disabled ? undefined : handleClick,
+  };
+
+  return (
+    <MenuItem
+      rc={rc}
+      size={size || 'medium'}
+      sx={{
+        marginBottom: 'base.spacing.x1',
+        userSelect: 'none',
+        ...(disabled && {
+          filter: 'opacity(0.5)',
+          cursor: 'not-allowed !important',
+        }),
+      }}
+      {...menuItemProps}
+    >
+      <MenuItem.FramedIcon icon={icon[type]} />
+      <MenuItem.Label size="medium">
+        {t(`views.ADD_FUNDS.drawer.options.${type}.heading`)}
+      </MenuItem.Label>
+      {!disabled && <MenuItem.IntentIcon />}
+      <MenuItem.Caption>
+        { t(
+          `views.ADD_FUNDS.drawer.options.${type}.${
+            disabled ? 'disabledCaption' : 'caption'
+          }`,
+        )}
+      </MenuItem.Caption>
+    </MenuItem>
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts
index ce5c8bad7b..c821fb5ea2 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts
@@ -20,3 +20,8 @@ export type RouteData = {
   amountData: AmountData;
   route: RouteResponse;
 };
+
+export enum FiatOptionType {
+  CREDIT = 'credit',
+  DEBIT = 'debit',
+}