@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.10

package/src/components/modal/components/RequestShipment/RequestShipmentModal.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { styled } from "styled-components";
+import OfferPolicyDetails from "../../../offerPolicy/OfferPolicyDetails";
+import ContractualAgreement from "../../../contractualAgreement/ContractualAgreement";
+import License from "../../../license/License";
+import * as Yup from "yup";
+import { Confirmation } from "../Redeem/Confirmation/Confirmation";
+import { useModal } from "../../useModal";
+import RedeemForm from "../Redeem/RedeemForm/RedeemForm";
+import { ExchangePolicyOverview } from "./exchangePolicyOverview/ExchangePolicyOverview";
+import { GenericModalProps } from "../../ModalContext";
+import { useAccount } from "../../../../hooks";
+import {
+  ContactPreference,
+  getRedeemFormValidationSchema
+} from "../Redeem/const";
+import { getHasBuyerTransferInfos } from "../../../../lib/offer/filter";
+import { BuyerTransferInfo } from "../../../../lib/bundle/const";
+import { Form, Formik, FormikProps } from "formik";
+import { FormModel } from "../Redeem/RedeemFormModel";
+import { useRedemptionContext } from "../../../widgets/redemption/provider/RedemptionContext";
+import { mockedDeliveryAddress } from "../../../widgets/redemption/const";
+import { checkSignatures } from "../Redeem/checkSignatures";
+import Loading from "../../../ui/loading/LoadingWrapper";
+import { useCurrentSellers } from "../../../../hooks/useCurrentSellers";
+import { RequestShipmentSuccess } from "./exchangePolicyOverview/RequestShipmentSuccess";
+import { subgraph } from "@bosonprotocol/core-sdk";
+
+const Wrapper = styled.div``;
+
+enum ActiveStep {
+  EXCHANGE_POLICY_OVERVIEW,
+  EXCHANGE_POLICY,
+  CONTRACTUAL_AGREEMENT,
+  LICENSE_AGREEMENT,
+  REDEEM_FORM,
+  REDEEM_FORM_CONFIRMATION,
+  REDEEM_SUCESS
+}
+export type RequestShipmentModalProps = {
+  exchange: subgraph.ExchangeFieldsFragment;
+  forcedAccount?: string;
+  parentOrigin?: string | null;
+  signatures?: string[] | null;
+};
+const initialStep = ActiveStep.EXCHANGE_POLICY_OVERVIEW;
+export const RequestShipmentModal = ({
+  exchange,
+  parentOrigin,
+  signatures,
+  forcedAccount
+}: RequestShipmentModalProps) => {
+  const { offer } = exchange;
+  const offerId = offer.id;
+  const offerName = exchange?.offer?.metadata?.name || "";
+  const buyerId = exchange?.buyer.id || "";
+  const sellerId = exchange?.seller.id || "";
+  const sellerAddress = exchange?.seller?.assistant;
+  const emailPreference =
+    exchange?.seller.metadata?.contactPreference ===
+    ContactPreference.XMTP_AND_EMAIL;
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
+  const { hideModal, updateProps, store } = useModal();
+  useEffect(() => {
+    updateProps<"REQUEST_SHIPMENT">({
+      ...store,
+      modalProps: {
+        ...store.modalProps,
+        title: "Request shipment"
+      } as GenericModalProps<"REQUEST_SHIPMENT">,
+      modalSize: "auto",
+      modalMaxWidth: {
+        xs: "550px"
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const [step, setStep] = useState<ActiveStep>(initialStep);
+  const { address } = useAccount();
+  useEffect(() => {
+    // if the user disconnects their wallet amid redeem, reset current flow
+    if (!address && step !== initialStep) {
+      setStep(initialStep);
+    }
+  }, [address, step]);
+  const validationSchema = useMemo(() => {
+    return getRedeemFormValidationSchema({
+      emailPreference,
+      requestBuyerAddress
+    });
+  }, [emailPreference, requestBuyerAddress]);
+  type FormType = Yup.InferType<typeof validationSchema>;
+  const formRef = useRef<FormikProps<FormType> | null>(null);
+
+  useEffect(() => {
+    // TODO: this should not be necessary as validateOnMount should handle that
+    if (formRef.current) {
+      formRef.current.validateForm();
+    }
+  }, [step]);
+  const {
+    deliveryInfo: initialDeliveryInfo,
+    postDeliveryInfoUrl,
+    deliveryInfoHandler,
+    redemptionConfirmedHandler,
+    redemptionSubmittedHandler
+  } = useRedemptionContext();
+  const doFetchSellersFromSellerIds = !!sellerId;
+  const sellerIds = useMemo(() => [sellerId], [sellerId]);
+  const {
+    sellers: sellersFromSellerIds,
+    isLoading: areSellersFromSellerIdsLoading
+  } = useCurrentSellers({
+    sellerIds,
+    enabled: doFetchSellersFromSellerIds
+  });
+  if (!address) {
+    return (
+      <>
+        <p>Please connect your account</p>
+        {forcedAccount && <p>(expected account: {forcedAccount})</p>}
+      </>
+    );
+  }
+
+  if (areSellersFromSellerIdsLoading) {
+    return <Loading />;
+  }
+  const areSignaturesMandatory = !!(
+    postDeliveryInfoUrl ||
+    deliveryInfoHandler ||
+    redemptionSubmittedHandler ||
+    redemptionConfirmedHandler
+  );
+  const jsx = checkSignatures({
+    doFetchSellersFromSellerIds,
+    sellersFromSellerIds,
+    parentOrigin,
+    sellerIds,
+    signatures,
+    areSignaturesMandatory
+  });
+  if (jsx) {
+    return jsx;
+  }
+  return (
+    <Wrapper>
+      <Formik<FormType>
+        innerRef={formRef}
+        validationSchema={validationSchema}
+        onSubmit={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
+        initialValues={
+          initialDeliveryInfo ||
+          mockedDeliveryAddress || {
+            [FormModel.formFields.name.name]: "",
+            [FormModel.formFields.streetNameAndNumber.name]: "",
+            [FormModel.formFields.city.name]: "",
+            [FormModel.formFields.state.name]: "",
+            [FormModel.formFields.zip.name]: "",
+            [FormModel.formFields.country.name]: "",
+            [FormModel.formFields.email.name]: "",
+            [FormModel.formFields.walletAddress.name]: "",
+            [FormModel.formFields.phone.name]: ""
+          }
+        }
+        validateOnMount
+      >
+        {({ errors, setFieldValue }) => {
+          const isRedeemFormOK =
+            !errors[FormModel.formFields.name.name] &&
+            !errors[FormModel.formFields.streetNameAndNumber.name] &&
+            !errors[FormModel.formFields.city.name] &&
+            !errors[FormModel.formFields.state.name] &&
+            !errors[FormModel.formFields.zip.name] &&
+            !errors[FormModel.formFields.country.name] &&
+            !errors[FormModel.formFields.email.name] &&
+            !errors[FormModel.formFields.walletAddress.name] &&
+            !errors[FormModel.formFields.phone.name];
+
+          return (
+            <Form
+              placeholder={undefined}
+              onPointerEnterCapture={undefined}
+              onPointerLeaveCapture={undefined}
+            >
+              {step === ActiveStep.EXCHANGE_POLICY_OVERVIEW ? (
+                <ExchangePolicyOverview
+                  onPolicyClick={() => setStep(ActiveStep.EXCHANGE_POLICY)}
+                  onNextClick={() => setStep(ActiveStep.REDEEM_FORM)}
+                />
+              ) : step === ActiveStep.EXCHANGE_POLICY ? (
+                <OfferPolicyDetails
+                  offer={offer}
+                  onContractualAgreementClick={() =>
+                    setStep(ActiveStep.CONTRACTUAL_AGREEMENT)
+                  }
+                  onLicenseAgreementClick={() =>
+                    setStep(ActiveStep.LICENSE_AGREEMENT)
+                  }
+                />
+              ) : step === ActiveStep.CONTRACTUAL_AGREEMENT ? (
+                <ContractualAgreement offerId={offerId} offerData={offer} />
+              ) : step === ActiveStep.LICENSE_AGREEMENT ? (
+                <License offerId={offer.id} offerData={offer} />
+              ) : step === ActiveStep.REDEEM_FORM ? (
+                <RedeemForm
+                  offer={offer}
+                  isValid={isRedeemFormOK}
+                  onNextClick={() =>
+                    setStep(ActiveStep.REDEEM_FORM_CONFIRMATION)
+                  }
+                  onBackClick={() =>
+                    setStep(ActiveStep.EXCHANGE_POLICY_OVERVIEW)
+                  }
+                  setConnectedWalletAddress={() => {
+                    if (address) {
+                      setFieldValue(
+                        FormModel.formFields.walletAddress.name,
+                        address
+                      );
+                    }
+                  }}
+                />
+              ) : step === ActiveStep.REDEEM_FORM_CONFIRMATION ? (
+                <Confirmation
+                  exchangeId={exchange.id}
+                  offerId={offerId}
+                  offerName={offerName}
+                  buyerId={buyerId}
+                  sellerId={sellerId}
+                  sellerAddress={sellerAddress}
+                  redemptionInfoAcceptedInitial={true}
+                  resumeRedemptionInitial={true}
+                  onBackClick={() => setStep(ActiveStep.REDEEM_FORM)}
+                  onSuccess={() => setStep(ActiveStep.REDEEM_SUCESS)}
+                  hideModal={hideModal}
+                />
+              ) : step === ActiveStep.REDEEM_SUCESS ? (
+                <RequestShipmentSuccess onSureClick={hideModal} />
+              ) : (
+                <p>Wrong step...something went wrong</p>
+              )}
+            </Form>
+          );
+        }}
+      </Formik>
+    </Wrapper>
+  );
+};

package/src/components/modal/components/RequestShipment/exchangePolicyOverview/ExchangePolicyOverview.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { styled } from "styled-components";
+import { Grid } from "../../../../ui/Grid";
+import { FairExchangePolicy } from "./FairExchangePolicy";
+import { Button } from "../../../../buttons/Button";
+import { InfoBox } from "./InfoBox";
+import { colors, getCssVar } from "../../../../../theme";
+
+const Wrapper = styled(Grid)``;
+
+export type ExchangePolicyOverviewProps = {
+  onPolicyClick: () => void;
+  onNextClick: () => void;
+};
+
+export const ExchangePolicyOverview = ({
+  onPolicyClick,
+  onNextClick
+}: ExchangePolicyOverviewProps) => {
+  return (
+    <Wrapper flexDirection="column" alignItems="flex-start" gap="2rem">
+      <FairExchangePolicy
+        policyIcon={
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ cursor: "pointer" }}
+            onClick={onPolicyClick}
+          >
+            <path
+              d="M2.16667 15.5C1.70833 15.5 1.31583 15.3369 0.989167 15.0108C0.663055 14.6842 0.5 14.2917 0.5 13.8333V2.16667C0.5 1.70833 0.663055 1.31583 0.989167 0.989167C1.31583 0.663055 1.70833 0.5 2.16667 0.5H8V2.16667H2.16667V13.8333H13.8333V8H15.5V13.8333C15.5 14.2917 15.3369 14.6842 15.0108 15.0108C14.6842 15.3369 14.2917 15.5 13.8333 15.5H2.16667ZM6.08333 11.0833L4.91667 9.91667L12.6667 2.16667H9.66667V0.5H15.5V6.33333H13.8333V3.33333L6.08333 11.0833Z"
+              fill={colors.violet}
+            />
+          </svg>
+        }
+      />
+      <InfoBox
+        message="If you don't want to receive your item right away, you can request shipment at a later stage as well."
+        customTheme={{
+          wrapperStyle: {
+            backgroundColor: getCssVar("--background-color")
+          },
+          iconProps: {
+            size: 24,
+            style: { minWidth: "24px" }
+          }
+        }}
+      />
+      <Button fill onClick={onNextClick} type="button">
+        Next
+      </Button>
+    </Wrapper>
+  );
+};

package/src/components/modal/components/RequestShipment/exchangePolicyOverview/FairExchangePolicy.tsx

@@ -0,0 +1,99 @@
+import React, { ReactNode } from "react";
+import styled, { css } from "styled-components";
+import { CONFIG } from "../../../../../lib/config/config";
+import { Typography } from "../../../../ui/Typography";
+import { getCssVar } from "../../../../../theme";
+import { onlyFairExchangePolicyLabel } from "../../../../../lib/const/policies";
+
+const InfoTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  gap: 1rem;
+  > p {
+    margin: 0;
+  }
+`;
+const InfoList = styled.ul<{ $withCustomMarker?: boolean }>`
+  margin: 0 0 0 1.5rem;
+  padding: 0;
+  line-height: 1.063rem;
+  ${({ $withCustomMarker }) =>
+    $withCustomMarker &&
+    css`
+      margin: unset;
+      li {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    `}
+`;
+const InfoListItem = styled.li`
+  margin: 0;
+  padding: 0;
+
+  p {
+    margin: 0;
+    color: ${getCssVar("--sub-text-color")};
+  }
+`;
+
+interface Props {
+  policyIcon?: ReactNode;
+  titleTag?: keyof JSX.IntrinsicElements;
+  bulletPointIcon?: ReactNode;
+  override?: {
+    minimumDisputeResolutionPeriodDays?: number;
+    minimumDisputePeriodInDays?: number;
+  };
+}
+
+export function FairExchangePolicy({
+  policyIcon,
+  titleTag = "p",
+  bulletPointIcon,
+  override
+}: Props) {
+  const minimumDisputeResolutionPeriodDays =
+    override?.minimumDisputeResolutionPeriodDays !== undefined
+      ? override.minimumDisputeResolutionPeriodDays
+      : CONFIG.defaultDisputeResolutionPeriodDays;
+  const minimumDisputePeriodInDays =
+    override?.minimumDisputePeriodInDays !== undefined
+      ? override.minimumDisputePeriodInDays
+      : CONFIG.minimumDisputePeriodInDays;
+  return (
+    <>
+      <InfoTitleWrapper>
+        <Typography tag={titleTag} data-title>
+          {onlyFairExchangePolicyLabel}
+        </Typography>
+        {policyIcon}
+      </InfoTitleWrapper>
+      <InfoList $withCustomMarker={!!bulletPointIcon}>
+        <InfoListItem>
+          {bulletPointIcon}
+          <Typography tag="p">
+            Min. {minimumDisputePeriodInDays} days to raise a dispute
+          </Typography>
+        </InfoListItem>
+        <InfoListItem>
+          {bulletPointIcon}
+          <Typography tag="p">
+            Min. {minimumDisputeResolutionPeriodDays} days to resolve a dispute
+          </Typography>
+        </InfoListItem>
+        <InfoListItem>
+          {bulletPointIcon}
+          <Typography tag="p">Fair buyer and seller obligations</Typography>
+        </InfoListItem>
+        <InfoListItem>
+          {bulletPointIcon}
+          <Typography tag="p">Standard evidence requirements</Typography>
+        </InfoListItem>
+      </InfoList>
+    </>
+  );
+}

package/src/components/modal/components/RequestShipment/exchangePolicyOverview/InfoBox.tsx

@@ -0,0 +1,43 @@
+import { Info } from "phosphor-react";
+import { CSSProperties, styled } from "styled-components";
+import { Grid } from "../../../../ui/Grid";
+import React from "react";
+import { Typography } from "../../../../ui/Typography";
+import { colors } from "../../../../../theme";
+
+const Wrapper = styled(Grid)`
+  border: 1px solid ${colors.border};
+`;
+
+type InfoBoxTheme = {
+  iconProps: Parameters<typeof Info>[0];
+  messageProps: Parameters<typeof Typography>[0];
+  wrapperStyle: CSSProperties;
+};
+
+export type InfoBoxProps = {
+  message: string;
+  customTheme?: Partial<InfoBoxTheme>;
+  className?: string;
+};
+
+export const InfoBox = ({
+  message,
+  customTheme: { iconProps, wrapperStyle, messageProps } = {},
+  className
+}: InfoBoxProps) => {
+  return (
+    <Wrapper
+      gap="0.5rem"
+      padding="1rem"
+      justifyContent="flex-start"
+      style={wrapperStyle}
+      className={className}
+    >
+      <Info color={colors.violet} weight="bold" {...iconProps} />
+      <Typography fontSize="0.875rem" {...messageProps}>
+        {message}
+      </Typography>
+    </Wrapper>
+  );
+};

package/src/components/modal/components/RequestShipment/exchangePolicyOverview/RequestShipmentSuccess.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Grid } from "../../../../ui/Grid";
+import { Button } from "../../../../buttons/Button";
+import { colors, getCssVar } from "../../../../../theme";
+import { CheckCircle } from "phosphor-react";
+import { Typography } from "../../../../ui/Typography";
+
+const Wrapper = Grid;
+
+export type RequestShipmentSuccessProps = {
+  onSureClick: () => void;
+};
+
+export const RequestShipmentSuccess = ({
+  onSureClick
+}: RequestShipmentSuccessProps) => {
+  return (
+    <Wrapper
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      gap="2rem"
+    >
+      <Grid
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        gap="0.5rem"
+        marginBottom="0.5rem"
+      >
+        <CheckCircle
+          weight="fill"
+          color={getCssVar("--main-accent-color")}
+          style={{ minWidth: "42px", minHeight: "42px" }}
+        />
+        <Typography fontSize="1.25rem" fontWeight={600}>
+          Your product is on the way!
+        </Typography>
+      </Grid>
+      <Grid
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        gap="0.25rem"
+        padding="1.5rem 1rem"
+      >
+        <Typography fontSize="1rem" fontWeight={600}>
+          What’s next?
+        </Typography>
+        <Typography
+          fontSize="0.875rem"
+          fontWeight={400}
+          textAlign="center"
+          color={colors.greyDark}
+        >
+          Your product will arrive in 3-5 working days. <br /> You don't have to
+          do anything else.
+        </Typography>
+      </Grid>
+      <div
+        style={{
+          border: `1px solid ${getCssVar("--background-accent-color")}`,
+          width: "calc(100% + 2rem * 2)"
+        }}
+      />
+      <Button
+        fill
+        onClick={onSureClick}
+        type="button"
+        style={{ margin: "0 2.5rem", borderRadius: "0.125rem" }}
+      >
+        Sure!
+      </Button>
+    </Wrapper>
+  );
+};

package/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx

@@ -21,7 +21,7 @@ import {
   extractUserFriendlyError,
   getHasUserRejectedTx
 } from "../../../../lib/errors/transactions";
-import { theme } from "../../../../theme";
+import { colors } from "../../../../theme";
 import { WithdrawFundsButton } from "../../../cta/funds/WithdrawFundsButton";
 import { useEnvContext } from "../../../environment/EnvironmentContext";
 import { Grid } from "../../../ui/Grid";
@@ -33,10 +33,9 @@ import {
   InputWrapper,
   ProtocolStrong
 } from "./FinancesStyles";
-const colors = theme.colors.light;
 
 const MaxLimitWrapper = styled.div`
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   margin-top: 0.25rem;
 `;
 

package/src/components/modal/components/SellerFinance/FinancesStyles.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
-import { theme } from "../../../../theme";
+import { colors } from "../../../../theme";
 
 import { Grid } from "../../../ui/Grid";
-const colors = theme.colors.light;
+
 export const ProtocolStrong = styled.strong`
   margin-right: 0.25rem;
 `;
@@ -14,7 +14,7 @@ export const InputWrapper = styled(Grid)<{ $hasError?: boolean }>`
   margin-top: -1rem;
   padding: 1.125rem 1rem;
   max-height: 3.5rem;
-  background: ${colors.darkGrey};
+  background: ${colors.greyDark};
   ${({ $hasError }) =>
     $hasError &&
     `

package/src/components/modal/components/Transactions/TransactionFailedModal/TransactionFailedModal.tsx

@@ -4,9 +4,9 @@ import React, { useEffect } from "react";
 import { Grid } from "../../../../ui/Grid";
 import { Typography } from "../../../../ui/Typography";
 import { useModal } from "../../../useModal";
-import { theme } from "../../../../../theme";
+import { colors } from "../../../../../theme";
 import { GenericModalProps } from "../../../ModalContext";
-const colors = theme.colors.light;
+
 export default function TransactionFailedModal({
   errorMessage,
   detailedErrorMessage

package/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx

@@ -7,11 +7,10 @@ import { Grid } from "../../../../ui/Grid";
 import { Typography } from "../../../../ui/Typography";
 import { GenericModalProps } from "../../../ModalContext";
 import { useModal } from "../../../useModal";
-import { theme } from "../../../../../theme";
+import { colors } from "../../../../../theme";
 import { Button } from "../../../../buttons/Button";
 import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext";
 
-const colors = theme.colors.light;
 const StyledArrowCircleUp = styled(ArrowCircleUp)`
   * {
     stroke-width: 2px;
@@ -64,15 +63,13 @@ export default function TransactionSubmittedModal({ action, txHash }: Props) {
           fontSize="1rem"
           lineHeight="150%"
           margin="0.5rem 0 1.5rem 0"
-          color={colors.secondary}
+          color={colors.violet}
         >
           View on Explorer
         </Typography>
       </a>
 
-      <StyledButton onClick={hideModal} withBosonStyle>
-        Close
-      </StyledButton>
+      <StyledButton onClick={hideModal}>Close</StyledButton>
     </Grid>
   );
 }

package/src/components/modal/components/Transactions/WaitingForConfirmationModal/WaitingForConfirmationModal.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from "react";
-import { theme } from "../../../../../theme";
+import { colors } from "../../../../../theme";
 
 import { Grid } from "../../../../ui/Grid";
 import Loading from "../../../../ui/loading/LoadingWrapper";
 import { Typography } from "../../../../ui/Typography";
 import { GenericModalProps } from "../../../ModalContext";
 import { useModal } from "../../../useModal";
-const colors = theme.colors.light;
+
 interface Props {
   action: string;
 }
@@ -46,7 +46,7 @@ export default function WaitingForConfirmationModal({ action }: Props) {
         fontWeight="600"
         fontSize="1rem"
         lineHeight="150%"
-        color={colors.darkGrey}
+        color={colors.greyDark}
         margin="0.5rem 0 1.5rem 0"
       >
         {action}
@@ -55,7 +55,7 @@ export default function WaitingForConfirmationModal({ action }: Props) {
         fontWeight="400"
         fontSize="0.75rem"
         lineHeight="150%"
-        color={colors.darkGrey}
+        color={colors.greyDark}
       >
         Confirm this transaction into your wallet
       </Typography>

package/src/components/modal/components/common/BosonLogo.tsx

@@ -3,18 +3,26 @@ import ReactComponent from "../../../../assets/logo.svg";
 import { Grid, GridProps } from "../../../ui/Grid";
 import { SvgImage, SvgImageProps } from "../../../ui/SvgImage";
 
-export function BosonLogo({
-  gridProps,
-  svgImageProps
-}: {
+export type BosonLogoProps = {
+  className?: string;
   gridProps?: GridProps;
   svgImageProps?: Omit<SvgImageProps, "src">;
-} = {}) {
+};
+export function BosonLogo({
+  gridProps,
+  svgImageProps,
+  className
+}: BosonLogoProps = {}) {
   return (
-    <Grid justifyContent="center" padding="1.5rem 0" {...gridProps}>
+    <Grid
+      justifyContent="center"
+      padding="1.5rem 0"
+      {...gridProps}
+      className={className}
+    >
       <SvgImage
         src={ReactComponent}
-        height="24px"
+        height={24}
         {...svgImageProps}
         style={{ maxWidth: "100%", ...svgImageProps?.style }}
       />