@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/sales/manual-booking/search-user/SearchUser.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import Highlighter from "react-highlighter";
@@ -82,7 +82,7 @@ export const SearchUser = ({
         </small>
       </div>
     ),
-    [],
+    []
   );
 
   const NoMatchesLabel = (isSearchName?: boolean) => (

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { SelectDateTypeControl } from "./SelectDateTypeControl";
@@ -10,7 +10,7 @@ export default {
 
 export const Default: Story<any> = (args) => {
   const [orderableType, setOrderableType] = useState<OrderableType | undefined>(
-    undefined,
+    undefined
   );
   const [orderDate, setOrderDate] = useState<string>("2018-07-22");
   const showTypeSelect = boolean("showTypeSelect", true);

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, ChangeEvent } from "react";
+import React, { useCallback, useRef, ChangeEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { DateTime } from "luxon";
@@ -33,7 +33,7 @@ export const SelectDateTypeControl = ({
 
       onChangeDate(value);
     },
-    [onChangeDate],
+    [onChangeDate]
   );
 
   const onChangeOrderableType = useCallback(
@@ -42,7 +42,7 @@ export const SelectDateTypeControl = ({
 
       setOrderableType(value as OrderableType);
     },
-    [setOrderableType],
+    [setOrderableType]
   );
 
   return (

package/src/sales/manual-booking/select-event/SelectEvent.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Card, Form } from "react-bootstrap";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
@@ -47,7 +48,7 @@ export const SelectEvent = ({
                       key={`${event.id}-${event.createdAt}`}
                       coverImageUrl={MediaService.getImageSrcByEvent(
                         event,
-                        event?.providers[0]?.images,
+                        event?.providers[0]?.images
                       )}
                       title={event?.name}
                       rrule={event?.rrule}
@@ -103,8 +104,8 @@ export const EventCardManualBooking = ({
         {rrule
           ? formatToDays(
               rrulestr(
-                rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule,
-              )?.options?.byweekday,
+                rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule
+              )?.options?.byweekday
             )
           : formatToDays([DateTime.fromISO(startAt)?.day])}
       </div>

package/src/sales/manual-booking/select-menu/SelectMenu.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { transformMenus } from "@licklist/plugins/dist/utils/transformMenus";

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
 import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";

package/src/sales/manual-booking/select-menu/components/MenuButton.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 
 export type MenuButtonProps = {

package/src/sales/manual-booking/summary/ManualBookingSummary.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { ManualBookingOrder } from "@licklist/plugins/dist/context/sale/ManualBookingStepsContext";
 import { DateTime } from "luxon";
@@ -73,7 +74,7 @@ export const ManualBookingSummary = ({
                 {showRelyOnPeople && !!relyOnPeopleMultiplier && (
                   <div>
                     {`x ${order.quantity * relyOnPeopleMultiplier} ${t(
-                      "people",
+                      "people"
                     )}`}
                   </div>
                 )}

package/src/sales/modals/payment-modal/PaymentModal.stories.tsx

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

package/src/sales/modals/payment-modal/PaymentModal.tsx

@@ -1,11 +1,11 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Button, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import {
   SalePaymentForm,
   SalePaymentFormRef,
@@ -73,7 +73,7 @@ export const PaymentModal = ({
         </ModalTitle>
 
         <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-          <FaTimes size={20} />
+          <Icon type="times" height="1.2rem" />
         </Button>
       </ModalHeader>
 

package/src/sales/modals/refund-modal/RefundModal.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Button } from "react-bootstrap";
 import { Meta, Story } from "@storybook/react";
 import { boolean, number } from "@storybook/addon-knobs";

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -1,11 +1,11 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Button, Col, Row, Form, FormGroup, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import { OrderPaymentType } from "@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import { EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS } from "../../constants";
 import { CurrencyNumberInput } from "../../../static/CurrencyNumberInput";
 
@@ -69,7 +69,7 @@ export const RefundModal = ({
           </ModalTitle>
 
           <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-            <FaTimes size={20} />
+            <Icon type="times" height="1.2rem" />
           </Button>
         </ModalHeader>
 
@@ -83,8 +83,8 @@ export const RefundModal = ({
                   placeholder={t("Design:paymentType")}
                   value={String(
                     t(
-                      `Design:${EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS[paymentType]}`,
-                    ),
+                      `Design:${EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS[paymentType]}`
+                    )
                   )}
                   disabled
                 />
@@ -92,7 +92,6 @@ export const RefundModal = ({
             </Col>
             <Col xs={12} md={6}>
               <FormGroup>
-                {/* @ts-expect-error 2322  */}
                 <CurrencyNumberInput
                   label={t("Design:amount")}
                   placeholder={t("Design:amount")}

package/src/sales/notes/NotesTable.stories.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { NotesTable, NotesTableProps } from "./NotesTable";

package/src/sales/notes/NotesTable.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import React, { 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")} <FaPlusCircle size={16} className="ml-2" />
+      {t("addNew")} <Icon className="ml-2" type="plus-circle" width="1rem" />
     </Button>
   );
 };

package/src/sales/notes/NotesTableRow.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { 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">
-            <FaEye size={20} />
+            <Icon type="eye" width="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={<FaTrashAlt size={12} />}
+                          icon="trash-alt"
                           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);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>

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

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

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

@@ -1,3 +1,4 @@
+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 { useEffect, useRef, useState } from "react";
+import React, { 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: import.meta.env.VITE_RYFT_KEY,
+        publicKey: process.env.REACT_APP_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 {
+import React, {
   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,7 +166,6 @@ export const SalePaymentForm = forwardRef<
           {showAmountField && (
             <Col xs={12} md={4}>
               <Form.Group>
-                {/* @ts-expect-error TS2345 */}
                 <CurrencyNumberInput
                   label={t("Design:amount")}
                   {...register("amount", {
@@ -185,7 +184,7 @@ export const SalePaymentForm = forwardRef<
         <div
           className={clsx(
             currentFormValues.orderPaymentType !== ORDER_PAYMENT_TYPE_CARD &&
-              "d-none",
+              "d-none"
           )}
         >
           <RyftPayment {...ryftProps} />
@@ -209,7 +208,7 @@ export const SalePaymentForm = forwardRef<
                         return t("Validation:fieldMinNumber", {
                           attribute: t("Design:expirationDate"),
                           min: transformToIsoWithoutMilisecondsAndSeconds(
-                            DateTime.now(),
+                            DateTime.now()
                           )
                             .split("T")
                             .join(" "),
@@ -225,7 +224,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">
@@ -237,5 +236,5 @@ export const SalePaymentForm = forwardRef<
         )}
       </>
     );
-  },
+  }
 );

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

@@ -1,3 +1,4 @@
+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 { useEffect, useState } from "react";
+import React, { 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 { useState } from "react";
+import React, { 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,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import {

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

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from "react";
+import React, { 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,3 +1,4 @@
+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 { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { PieChart, Pie, ResponsiveContainer, Cell } from "recharts";
 
 export interface StatisticsChartProps {

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

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

package/src/setting/admin/PaymentFeeForm.tsx

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