wip

bosonprotocol · Oct 23, 2024 · d6e742a · d6e742a
1 parent 43d5509
commit d6e742a
Show file tree

Hide file tree

Showing 24 changed files with 447 additions and 241 deletions.
diff --git a/packages/react-kit/src/components/form/Phone.tsx b/packages/react-kit/src/components/form/Phone.tsx
@@ -122,7 +122,10 @@ export const PhoneWrapper = styled.div`
 `;
 
 const handleCountry = () => {
-  const countryCode = (navigator?.language || "")?.toUpperCase() as CountryCode;
+  const countryCode = (navigator?.languages || [])
+    .find((language) => language.includes("-"))
+    ?.split("-")?.[1]
+    ?.toUpperCase() as CountryCode;
   if (isSupportedCountry(countryCode as CountryCode)) return countryCode;
   return undefined;
 };

diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx
@@ -42,10 +42,7 @@ import {
   DeliveryInfoMessage
 } from "../../../../../hooks/callbacks/types";
 import { NonModalProps } from "../../../nonModal/NonModal";
-import {
-  RedemptionWidgetAction,
-  useRedemptionContext
-} from "../../../../widgets/redemption/provider/RedemptionContext";
+import { useRedemptionContext } from "../../../../widgets/redemption/provider/RedemptionContext";
 import { extractUserFriendlyError } from "../../../../../lib/errors/transactions";
 const colors = theme.colors.light;
 
@@ -66,12 +63,14 @@ export interface ConfirmationProps
   buyerId: string;
   sellerId: string;
   sellerAddress: string;
+  redemptionInfoAcceptedInitial: boolean;
+  resumeRedemptionInitial: boolean;
   onBackClick: () => void;
   setIsLoading?: React.Dispatch<React.SetStateAction<boolean>>;
   hideModal?: NonModalProps["hideModal"];
 }
 
-export default function Confirmation({
+export function Confirmation({
   onBackClick,
   exchangeId,
   offerId,
@@ -84,12 +83,12 @@ export default function Confirmation({
   onPendingSignature,
   onPendingTransaction,
   setIsLoading: setLoading,
-  hideModal
+  hideModal,
+  redemptionInfoAcceptedInitial,
+  resumeRedemptionInitial
 }: ConfirmationProps) {
   const { envName, configId } = useEnvContext();
   const {
-    widgetAction,
-    setWidgetAction,
     deliveryInfoHandler,
     redemptionSubmittedHandler,
     redemptionConfirmedHandler,
@@ -106,10 +105,10 @@ export default function Confirmation({
   );
   const [redeemError, setRedeemError] = useState<Error | null>(null);
   const [redemptionInfoAccepted, setRedemptionInfoAccepted] = useState<boolean>(
-    widgetAction === RedemptionWidgetAction.CONFIRM_REDEEM
+    redemptionInfoAcceptedInitial
   );
   const [resumeRedemption, setResumeRedemption] = useState<boolean>(
-    widgetAction === RedemptionWidgetAction.CONFIRM_REDEEM
+    resumeRedemptionInitial
   );
   const { chatInitializationStatus } = useChatStatus();
   const showSuccessInitialization =
@@ -230,13 +229,6 @@ export default function Confirmation({
     }
     return { resume };
   };
-  const handleOnBackClick = () => {
-    if (widgetAction === RedemptionWidgetAction.CONFIRM_REDEEM) {
-      // As the redemption will be edited again, switch the widgetAction to REDEEM_FORM
-      setWidgetAction(RedemptionWidgetAction.REDEEM_FORM);
-    }
-    onBackClick();
-  };
 
   const sendDeliveryDetailsToChat = async (message: DeliveryInfoMessage) => {
     let resume = true;
@@ -310,7 +302,7 @@ ${FormModel.formFields.walletAddress.placeholder}: ${message.deliveryDetails.wal
         <Grid flexDirection="row" flexBasis="0">
           <ThemedButton
             themeVal="blankSecondary"
-            onClick={handleOnBackClick}
+            onClick={onBackClick}
             disabled={
               isLoading || (redemptionInfoAccepted && !resumeRedemption)
             }
@@ -426,7 +418,12 @@ ${FormModel.formFields.walletAddress.placeholder}: ${message.deliveryDetails.wal
                 txResponse: context.txResponse,
                 provider: signer?.provider
               });
-              console.error("Error while redeeming", error, errorMessage);
+              console.error("Error while redeeming", {
+                error,
+                errorMessage,
+                context,
+                exchangeId
+              });
               error.message = errorMessage;
               const message = {
                 redemptionInfo,
@@ -551,7 +548,7 @@ ${FormModel.formFields.walletAddress.placeholder}: ${message.deliveryDetails.wal
         </div>
         <ThemedButton
           themeVal="outline"
-          onClick={handleOnBackClick}
+          onClick={onBackClick}
           disabled={isLoading || (redemptionInfoAccepted && !resumeRedemption)}
         >
           Back

diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
@@ -1,11 +1,15 @@
 import { getAddress } from "ethers/lib/utils";
 import React, { useEffect } from "react";
 import { Exchange } from "../../../../../types/exchange";
-import Confirmation, { ConfirmationProps } from "./Confirmation";
+import { Confirmation, ConfirmationProps } from "./Confirmation";
 import { NonModalProps, useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
 import { RedeemHeader } from "../RedeemHeader";
 import { useAccount } from "../../../../../hooks/connection/connection";
+import {
+  RedemptionWidgetAction,
+  useRedemptionWidgetContext
+} from "../../../../widgets/redemption/provider/RedemptionWidgetContext";
 
 const colors = theme.colors.light;
 
@@ -41,6 +45,8 @@ export function ConfirmationView({
       }
     });
   }, [dispatch]);
+  const { widgetAction, setWidgetAction } = useRedemptionWidgetContext();
+  const isConfirm = widgetAction === RedemptionWidgetAction.CONFIRM_REDEEM;
   return (
     <>
       {!exchange ? (
@@ -57,7 +63,15 @@ export function ConfirmationView({
           buyerId={buyerId}
           sellerId={sellerId}
           sellerAddress={sellerAddress}
-          onBackClick={onBackClick}
+          redemptionInfoAcceptedInitial={isConfirm}
+          resumeRedemptionInitial={isConfirm}
+          onBackClick={() => {
+            if (isConfirm) {
+              // As the redemption will be edited again, switch the widgetAction to REDEEM_FORM
+              setWidgetAction(RedemptionWidgetAction.REDEEM_FORM);
+            }
+            onBackClick();
+          }}
           onSuccess={onSuccess}
           hideModal={hideModal}
         />

diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
@@ -32,9 +32,12 @@ import { useConfigContext } from "../../../config/ConfigContext";
 import { Typography } from "../../../ui/Typography";
 import {
   RedemptionContextProps,
-  RedemptionWidgetAction,
   useRedemptionContext
 } from "../../../widgets/redemption/provider/RedemptionContext";
+import {
+  useRedemptionWidgetContext,
+  RedemptionWidgetAction
+} from "../../../widgets/redemption/provider/RedemptionWidgetContext";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
 import { BosonLogo } from "../common/BosonLogo";
 import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
@@ -50,14 +53,15 @@ import {
   ExpireVoucherView,
   ExpireVoucherViewProps
 } from "./ExchangeView/expireVoucher/ExpireVoucherView";
-import { ContactPreference } from "./const";
+import { ContactPreference, getRedeemFormValidationSchema } from "./const";
 import {
   DetailContextProps,
   DetailViewProvider
 } from "../common/detail/DetailViewProvider";
 import { getHasBuyerTransferInfos } from "../../../../lib/offer/filter";
 import { BuyerTransferInfo } from "../../../../lib/bundle/const";
 import { useDisconnect } from "../../../../hooks/connection/useDisconnect";
+import { mockedDeliveryAddress } from "../../../widgets/redemption/const";
 
 const colors = theme.colors.light;
 const UlWithWordBreak = styled.ul`
@@ -317,12 +321,9 @@ function RedeemNonModal({
     sellerIds: sellerIds,
     enabled: doFetchSellersFromSellerIds
   });
-  const {
-    showRedemptionOverview,
-    widgetAction,
-    exchangeState,
-    deliveryInfo: initialDeliveryInfo
-  } = useRedemptionContext();
+  const { deliveryInfo: initialDeliveryInfo } = useRedemptionContext();
+  const { showRedemptionOverview, widgetAction, exchangeState } =
+    useRedemptionWidgetContext();
 
   const emailPreference =
     exchange?.seller.metadata?.contactPreference ===
@@ -333,46 +334,9 @@ function RedeemNonModal({
       ])
     : false;
   const validationSchema = useMemo(() => {
-    return Yup.object({
-      [FormModel.formFields.name.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.name.requiredErrorMessage),
-      [FormModel.formFields.streetNameAndNumber.name]: Yup.string()
-        .trim()
-        .required(
-          FormModel.formFields.streetNameAndNumber.requiredErrorMessage
-        ),
-      [FormModel.formFields.city.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.city.requiredErrorMessage),
-      [FormModel.formFields.state.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.state.requiredErrorMessage),
-      [FormModel.formFields.zip.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.zip.requiredErrorMessage),
-      [FormModel.formFields.country.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.country.requiredErrorMessage),
-      [FormModel.formFields.email.name]: emailPreference
-        ? Yup.string()
-            .trim()
-            .required(FormModel.formFields.email.requiredErrorMessage)
-            .email(FormModel.formFields.email.mustBeEmail)
-        : Yup.string().trim().email(FormModel.formFields.email.mustBeEmail),
-      [FormModel.formFields.walletAddress.name]: requestBuyerAddress
-        ? Yup.string()
-            .trim()
-            .required(FormModel.formFields.walletAddress.requiredErrorMessage)
-            .test(
-              "mustBeAddress",
-              FormModel.formFields.walletAddress.mustBeWalletAddress,
-              (value) => (value ? ethers.utils.isAddress(value) : true)
-            )
-        : Yup.string().trim(),
-      [FormModel.formFields.phone.name]: Yup.string()
-        .trim()
-        .required(FormModel.formFields.phone.requiredErrorMessage)
+    return getRedeemFormValidationSchema({
+      emailPreference,
+      requestBuyerAddress
     });
   }, [emailPreference, requestBuyerAddress]);
   type FormType = Yup.InferType<typeof validationSchema>;
@@ -474,15 +438,6 @@ function RedeemNonModal({
   if (jsx) {
     return jsx;
   }
-  const deliveryAddressVar =
-    typeof process !== "undefined"
-      ? process?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK || // @ts-expect-error import.meta.env only exists in vite environments
-        import.meta?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK
-      : // @ts-expect-error import.meta.env only exists in vite environments
-        import.meta?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK;
-  const mockedDeliveryAddress = deliveryAddressVar
-    ? JSON.parse(deliveryAddressVar)
-    : undefined;
 
   const handleRaiseDispute = (exchangeId: string | undefined) => {
     const raiseDisputeForExchangeUrlWithId =

diff --git a/packages/react-kit/src/components/modal/components/Redeem/const.ts b/packages/react-kit/src/components/modal/components/Redeem/const.ts
@@ -1,3 +1,7 @@
+import * as Yup from "yup";
+import { FormModel } from "./RedeemFormModel";
+import { ethers } from "ethers";
+
 export enum ProfileType {
   LENS = "lens",
   REGULAR = "regular"
@@ -7,3 +11,51 @@ export enum ContactPreference {
   XMTP = "xmtp",
   XMTP_AND_EMAIL = "xmtp_and_email"
 }
+
+export const getRedeemFormValidationSchema = ({
+  emailPreference,
+  requestBuyerAddress
+}: {
+  emailPreference: boolean;
+  requestBuyerAddress: boolean;
+}) => {
+  return Yup.object({
+    [FormModel.formFields.name.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.name.requiredErrorMessage),
+    [FormModel.formFields.streetNameAndNumber.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.streetNameAndNumber.requiredErrorMessage),
+    [FormModel.formFields.city.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.city.requiredErrorMessage),
+    [FormModel.formFields.state.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.state.requiredErrorMessage),
+    [FormModel.formFields.zip.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.zip.requiredErrorMessage),
+    [FormModel.formFields.country.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.country.requiredErrorMessage),
+    [FormModel.formFields.email.name]: emailPreference
+      ? Yup.string()
+          .trim()
+          .required(FormModel.formFields.email.requiredErrorMessage)
+          .email(FormModel.formFields.email.mustBeEmail)
+      : Yup.string().trim().email(FormModel.formFields.email.mustBeEmail),
+    [FormModel.formFields.walletAddress.name]: requestBuyerAddress
+      ? Yup.string()
+          .trim()
+          .required(FormModel.formFields.walletAddress.requiredErrorMessage)
+          .test(
+            "mustBeAddress",
+            FormModel.formFields.walletAddress.mustBeWalletAddress,
+            (value) => (value ? ethers.utils.isAddress(value) : true)
+          )
+      : Yup.string().trim(),
+    [FormModel.formFields.phone.name]: Yup.string()
+      .trim()
+      .required(FormModel.formFields.phone.requiredErrorMessage)
+  });
+};