@licklist/design 0.66.11 → 0.66.12-dev.1

package/src/sales/notes/NotesTable.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, Table } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
+import { FaPlusCircle } from "react-icons/fa";
 import { TableRow, TableRowProps } from "./NotesTableRow";
 import { NoteForm } from "./note-form";
-import { Icon } from "../../static";
 
 export type NotesTableProps = Pick<TableRowProps, "onDeleteNote"> & {
   heading: string;
@@ -102,7 +102,7 @@ const AddNoteButton = ({ onClick }: { onClick: () => void }) => {
 
   return (
     <Button onClick={onClick} className="show-form-button">
-      {t("addNew")} <Icon className="ml-2" type="plus-circle" width="1rem" />
+      {t("addNew")} <FaPlusCircle size={16} className="ml-2" />
     </Button>
   );
 };

package/src/sales/notes/NotesTableRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useId } from "@react-aria/utils";
 import clsx from "clsx";
 import { OverlayTrigger, Popover, ListGroup } from "react-bootstrap";
@@ -11,9 +11,9 @@ import {
   DATE_TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config";
 import { getClientTimeZone } from "@licklist/core/dist/Services";
+import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table";
-import { Icon } from "../../static";
 
 export type TableRowProps = {
   note: Note;
@@ -42,7 +42,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
       <td>
         <div className="controls">
           <span className="btn btn-sm eye">
-            <Icon type="eye" width="20" />
+            <FaEye size={20} />
           </span>
           <OverlayTrigger
             trigger="click"
@@ -53,7 +53,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                 id={popoverId}
                 className={clsx(
                   "product-set-card-popover",
-                  !isOverlayVisibile && "d-none"
+                  !isOverlayVisibile && "d-none",
                 )}
               >
                 <Popover.Content
@@ -70,7 +70,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                             confirm(() => onDeleteNote(note.id));
                           }}
                           name={t("remove")}
-                          icon="trash-alt"
+                          icon={<FaTrashAlt size={12} />}
                           className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
@@ -89,7 +89,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

package/src/sales/notes/note-form/NoteForm.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { NoteForm, NoteFormProps } from "./NoteForm";

package/src/sales/notes/note-form/NoteForm.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button, Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";

package/src/sales/payment-form/SalePaymentForm.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean, number } from "@storybook/addon-knobs";
 import { Button } from "react-bootstrap";
@@ -30,7 +30,7 @@ export const Default: Story<SalePaymentFormProps> = () => {
   useEffect(() => {
     try {
       ryftPayment.init({
-        publicKey: process.env.REACT_APP_RYFT_KEY,
+        publicKey: import.meta.env.VITE_RYFT_KEY,
         accountId: "test",
       });
 
@@ -38,7 +38,7 @@ export const Default: Story<SalePaymentFormProps> = () => {
         "cardValidationChanged",
         (e: MessageEvent["data"]) => {
           setIsValid(e.isValid);
-        }
+        },
       );
 
       setRyftInitFailure(false);

package/src/sales/payment-form/SalePaymentForm.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   forwardRef,
   useImperativeHandle,
   useCallback,
@@ -51,7 +51,7 @@ export const SalePaymentForm = forwardRef<
       orderPaymentTypeError,
       ...ryftProps
     },
-    ref
+    ref,
   ) => {
     const { t } = useTranslation(["Design", "Validation", "Sale"]);
     const { formValues, setFormValues } = useContext(SalePaymentFormContext);
@@ -140,7 +140,7 @@ export const SalePaymentForm = forwardRef<
                       return (
                         <option key={key} value={key}>
                           {t(
-                            `Design:${EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS[key]}`
+                            `Design:${EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS[key]}`,
                           )}
                         </option>
                       );
@@ -150,12 +150,12 @@ export const SalePaymentForm = forwardRef<
                       <option key={key} value={key}>
                         {t(`Design:paid`, {
                           argument: t(
-                            `Design:${EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS[key]}`
+                            `Design:${EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS[key]}`,
                           ),
                         })}
                       </option>
                     );
-                  }
+                  },
                 )}
               </Form.Control>
               {orderPaymentTypeError && (
@@ -166,6 +166,7 @@ export const SalePaymentForm = forwardRef<
           {showAmountField && (
             <Col xs={12} md={4}>
               <Form.Group>
+                {/* @ts-expect-error TS2345 */}
                 <CurrencyNumberInput
                   label={t("Design:amount")}
                   {...register("amount", {
@@ -184,7 +185,7 @@ export const SalePaymentForm = forwardRef<
         <div
           className={clsx(
             currentFormValues.orderPaymentType !== ORDER_PAYMENT_TYPE_CARD &&
-              "d-none"
+              "d-none",
           )}
         >
           <RyftPayment {...ryftProps} />
@@ -208,7 +209,7 @@ export const SalePaymentForm = forwardRef<
                         return t("Validation:fieldMinNumber", {
                           attribute: t("Design:expirationDate"),
                           min: transformToIsoWithoutMilisecondsAndSeconds(
-                            DateTime.now()
+                            DateTime.now(),
                           )
                             .split("T")
                             .join(" "),
@@ -224,7 +225,7 @@ export const SalePaymentForm = forwardRef<
                   }
                   isInvalid={!!errors.paymentLinkExpireDate}
                   min={transformToIsoWithoutMilisecondsAndSeconds(
-                    DateTime.now().minus({ minutes: 1 })
+                    DateTime.now().minus({ minutes: 1 }),
                   )}
                 />
                 <Form.Control.Feedback type="invalid">
@@ -236,5 +237,5 @@ export const SalePaymentForm = forwardRef<
         )}
       </>
     );
-  }
+  },
 );

package/src/sales/payment-form/components/RyftPayment/RyftPayment.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Button } from "react-bootstrap";
 import { useHistory } from "react-router-dom";

package/src/sales/sales-and-views/SalesAndViewsChart.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import moment from "moment";
 

package/src/sales/sales-and-views/SalesAndViewsChart.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import moment from "moment";
 import { useIntl } from "react-intl";
@@ -96,7 +96,7 @@ function SalesAndViewsChart({
           <div
             className={clsx(
               "bullet-point",
-              chartType === "sales" && "bullet-point--active"
+              chartType === "sales" && "bullet-point--active",
             )}
           />
           {t("sales")}
@@ -110,7 +110,7 @@ function SalesAndViewsChart({
           <div
             className={clsx(
               "bullet-point",
-              chartType === "views" && "bullet-point--active"
+              chartType === "views" && "bullet-point--active",
             )}
           />
           {t("views")}
@@ -201,7 +201,7 @@ function SalesAndViewsChart({
             onClick={() => handleFilter(period)}
             className={clsx(
               "filter-menu-item",
-              period === activePeriod && "active"
+              period === activePeriod && "active",
             )}
           >
             {t(period)}

package/src/sales/source-of-sales/SourceOfSalesChart.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import {

package/src/sales/source-of-sales/SourceOfSalesChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
@@ -36,7 +36,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [data.length]
+    [data.length],
   );
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -78,7 +78,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
   useEffect(() => {
     if (extendedData.length > 0) {
       setDeaultCYPosition(
-        DEFAULT_CY_POSITION - extendedData.length * CY_COEFICIENT_FOR_PIE
+        DEFAULT_CY_POSITION - extendedData.length * CY_COEFICIENT_FOR_PIE,
       );
     }
   }, [extendedData]);

package/src/sales/statistics-chart/StatisticsChart.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { StatisticsChart, StatisticsChartProps } from "./StatisticsChart";

package/src/sales/statistics-chart/StatisticsChart.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { PieChart, Pie, ResponsiveContainer, Cell } from "recharts";
 
 export interface StatisticsChartProps {

package/src/setting/admin/AdminSetting.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import Container from "react-bootstrap/Container";
 

package/src/setting/admin/AdminSettingForm.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useId } from "@react-aria/utils";
 import { Button, Spinner, Form } from "react-bootstrap";
 import InputGroup from "react-bootstrap/InputGroup";
@@ -11,8 +10,8 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProviderType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
-import Icon from "../../static/Icon";
+import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { FaCommentAlt } from "react-icons/fa";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
 
@@ -33,7 +32,7 @@ export interface AdminSettingFormProps extends HasPermissionProp {
   providerMetadata: {
     country?: string;
     providableId?: number;
-    providerType?: ProviderType;
+    providerType?: ProvidableType;
   };
 }
 
@@ -75,12 +74,7 @@ export const AdminSettingForm = ({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="comment-alt"
-                  style={{
-                    width: "1rem",
-                  }}
-                />
+                <FaCommentAlt size={16} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -148,7 +142,7 @@ export const AdminSettingForm = ({
                     <Form.Control.Feedback type="invalid">
                       {HookFormService.hasError(
                         errors.additionalPaymentMethodsEnabled,
-                        "validate"
+                        "validate",
                       ) && (
                         <>
                           {t("noCountryIsProvided")}

package/src/setting/admin/PaymentFeeForm.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useId } from "@react-aria/utils";
 import Card from "react-bootstrap/Card";
 import Col from "react-bootstrap/Col";
@@ -7,8 +6,8 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { WarningMessage, Icon } from "../../static";
+import { FaPercentage, FaPoundSign } from "react-icons/fa";
+import { WarningMessage } from "../../static";
 
 export type PaymentFeeFormFieldValues = {
   feeInPercent: number;
@@ -65,12 +64,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="percentage"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPercentage size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -118,12 +112,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="pound-sign"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPoundSign size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -168,12 +157,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="pound-sign"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPoundSign size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -230,12 +214,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="percentage"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPercentage size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -280,12 +259,7 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <Icon
-                        type="pound-sign"
-                        style={{
-                          width: ".7rem",
-                        }}
-                      />
+                      <FaPoundSign size={10} />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 

package/src/setting/dashboard/DashboardSetting.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import Container from "react-bootstrap/Container";
 import * as Config from "@licklist/core/dist/Config";
@@ -34,7 +33,7 @@ export default {
 } as Meta;
 
 export const SettingFormComponent: Story<DashboardSettingFormProps> = (
-  args
+  args,
 ) => (
   <Container>
     <DashboardSettingForm
@@ -45,7 +44,7 @@ export const SettingFormComponent: Story<DashboardSettingFormProps> = (
 );
 
 export const FinancialDataFormComponent: Story<FinancialDataFormProps> = (
-  args
+  args,
 ) => {
   const form = useForm<FinancialDataFormFieldValues>({
     defaultValues: args.defaultValues,
@@ -58,7 +57,7 @@ export const FinancialDataFormComponent: Story<FinancialDataFormProps> = (
 };
 
 export const EventSettingFormComponent: Story<EventSettingFormProps> = (
-  args
+  args,
 ) => {
   const form = useForm<EventSettingFormFieldValues>({
     defaultValues: args.defaultValues,
@@ -71,7 +70,7 @@ export const EventSettingFormComponent: Story<EventSettingFormProps> = (
 };
 
 export const OtherSettingFormComponent: Story<OtherSettingFormProps> = (
-  args
+  args,
 ) => {
   const form = useForm<OtherSettingFormFieldValues>({
     defaultValues: args.defaultValues,
@@ -84,7 +83,7 @@ export const OtherSettingFormComponent: Story<OtherSettingFormProps> = (
 };
 
 export const ProviderSettingFormComponent: Story<ProviderSettingFormProps> = (
-  args
+  args,
 ) => {
   const form = useForm<ProviderSettingFormFieldValues>({
     defaultValues: args.defaultValues,

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useId } from "@react-aria/utils";
 import { Button, Spinner } from "react-bootstrap";
 import Col from "react-bootstrap/Col";

package/src/setting/dashboard/EventSettingForm.tsx

@@ -1,5 +1,4 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";

package/src/setting/dashboard/FinancialDataForm.tsx

@@ -1,12 +1,11 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import Icon from "../../static/Icon";
+import { FaIdBadge, FaMoneyCheckAlt, FaUser } from "react-icons/fa";
 
 export type FinancialDataFormFieldValues = {
   accountName: string;
@@ -46,12 +45,7 @@ export function FinancialDataForm({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="user"
-                  style={{
-                    width: "1rem",
-                  }}
-                />
+                <FaUser size={16} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -65,12 +59,7 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="id-badge"
-                  style={{
-                    width: "1rem",
-                  }}
-                />
+                <FaIdBadge size={16} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -116,12 +105,7 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <Icon
-                  type="money-check-alt"
-                  style={{
-                    width: "1.7rem",
-                  }}
-                />
+                <FaMoneyCheckAlt size={28} />
               </InputGroup.Text>
             </InputGroup.Prepend>
 

package/src/setting/dashboard/OtherSettingForm.tsx

@@ -1,5 +1,4 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
 import Card from "react-bootstrap/Card";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";

package/src/setting/dashboard/ProviderSettingForm.tsx

@@ -1,13 +1,12 @@
 import Currency from "@licklist/core/dist/Config/Currency";
 import { useId } from "@react-aria/utils";
-import React from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import Icon from "../../static/Icon";
+import { FaPhone } from "react-icons/fa";
 import { SelectItem } from "../../types/generic/SelectItem";
 // @TODO not for first release
 // import { Button } from "react-bootstrap";
@@ -114,12 +113,7 @@ export const ProviderSettingForm = ({
             <InputGroup>
               <InputGroup.Prepend>
                 <InputGroup.Text>
-                  <Icon
-                    type="phone"
-                    style={{
-                      width: "1rem",
-                    }}
-                  />
+                  <FaPhone size={16} />
                 </InputGroup.Text>
               </InputGroup.Prepend>
 

package/src/setting/dashboard/components/IpInput.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { IpInput as IpInputComponent, IpInputProps } from "./IpInput";
 

package/src/setting/dashboard/components/IpInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import validateIp from "@licklist/plugins/dist/validation/Rules/ipRule";
 import validatePort from "@licklist/plugins/dist/validation/Rules/portRule";
-import React, {
+import {
   ChangeEvent,
   ClipboardEventHandler,
   Fragment,
@@ -12,7 +12,7 @@ import React, {
 import { Button, FormControl, InputGroup } from "react-bootstrap";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../../static";
+import { FaTimes } from "react-icons/fa";
 
 export interface IpInputProps {
   onChange: (value: string) => void;
@@ -31,7 +31,7 @@ const ipInputsNames = [
   "ipPort",
 ] as const;
 
-type IpInputsNames = typeof ipInputsNames[number];
+type IpInputsNames = (typeof ipInputsNames)[number];
 
 const IpDischargeFieldNames: Partial<IpInputsNames>[] = [
   "firstIpDischarge",
@@ -78,7 +78,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
       });
       return parsedIp;
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -91,7 +91,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
       const data = e.clipboardData.getData("text");
       parseAndUpdateIpFields(data);
     },
-    []
+    [],
   );
 
   const isRemovable = Boolean(onRemove);
@@ -154,7 +154,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
             disabled={!isRemovable}
             onClick={onRemove}
           >
-            <Icon type="times" width=".55rem" height=".9rem" color="red" />
+            <FaTimes size={14} color="red" />
           </Button>
         </InputGroup.Text>
         <FormControl.Feedback type="invalid">

package/src/setting/dashboard/payments/payments-form/PaymentsForm.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { PaymentsForm, PaymentsFormProps } from "./PaymentsForm";
 

package/src/setting/dashboard/payments/payments-form/PaymentsForm.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button, Form, Spinner } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { PaymentsModal, PaymentsModalProps } from "./PaymentsModal";