@bosonprotocol/react-kit 0.30.0-alpha.4 → 0.30.0-alpha.6

package/src/components/modal/components/Redeem/RedeemForm/RedeemForm.tsx

@@ -1,14 +1,18 @@
 import React from "react";
+import type { Country as CountryCode } from "react-phone-number-input";
 import { useBreakpoints } from "../../../../../hooks/useBreakpoints";
+import { BuyerTransferInfo } from "../../../../../lib/bundle/const";
+import { getHasBuyerTransferInfos } from "../../../../../lib/offer/filter";
+import { Exchange } from "../../../../../types/exchange";
 import { Button } from "../../../../buttons/Button";
+import { CountrySelect } from "../../../../form/CountrySelect";
 import Input from "../../../../form/Input";
 import Phone from "../../../../form/Phone";
 import { Grid } from "../../../../ui/Grid";
 import { Typography } from "../../../../ui/Typography";
 import { FormModel } from "../RedeemFormModel";
-import { CountrySelect } from "../../../../form/CountrySelect";
-import type { Country as CountryCode } from "react-phone-number-input";
 interface Props {
+  exchange: Exchange | null;
   isValid: boolean;
   onNextClick: () => void;
   onBackClick: () => void;
@@ -55,11 +59,17 @@ const fatfMemberCountries: CountryCode[] = [
 ];
 
 export default function RedeemForm({
+  exchange,
   isValid,
   onNextClick,
   onBackClick
 }: Props) {
   const { isLteXS } = useBreakpoints();
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
   return (
     <>
       <Typography
@@ -142,6 +152,14 @@ export default function RedeemForm({
             placeholder={FormModel.formFields.email.placeholder}
           />
         </Grid>
+        {requestBuyerAddress && (
+          <Grid flexDirection="column" alignItems="flex-start">
+            <Input
+              name={FormModel.formFields.walletAddress.name}
+              placeholder={FormModel.formFields.walletAddress.placeholder}
+            />
+          </Grid>
+        )}
         <Grid flexDirection="column" alignItems="flex-start">
           <Phone
             name={FormModel.formFields.phone.name}

package/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx

@@ -45,6 +45,7 @@ export default function RedeemFormView({
         <p>Invalid exchange state.</p>
       ) : (
         <RedeemForm
+          exchange={exchange}
           isValid={isValid}
           onNextClick={onNextClick}
           onBackClick={onBackClick}

package/src/components/modal/components/Redeem/RedeemFormModel.ts

@@ -36,6 +36,12 @@ export const FormModel = {
       placeholder: "Email",
       mustBeEmail: "This is not an e-mail"
     },
+    walletAddress: {
+      name: "walletAddress",
+      requiredErrorMessage: "This field is required",
+      placeholder: "WalletAddress",
+      mustBeWalletAddress: "This is not a wallet address"
+    },
     phone: {
       name: "phone",
       requiredErrorMessage: "This field is required",
@@ -44,4 +50,4 @@ export const FormModel = {
   }
 } as const;
 
-export type FormType = Record<keyof typeof FormModel["formFields"], string>;
+export type FormType = Record<keyof (typeof FormModel)["formFields"], string>;

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -56,6 +56,8 @@ import {
   DetailContextProps,
   DetailViewProvider
 } from "../common/detail/DetailViewProvider";
+import { getHasBuyerTransferInfos } from "../../../../lib/offer/filter";
+import { BuyerTransferInfo } from "../../../../lib/bundle/const";
 
 const colors = theme.colors.light;
 const UlWithWordBreak = styled.ul`
@@ -328,6 +330,11 @@ function RedeemNonModal({
   const emailPreference =
     exchange?.seller.metadata?.contactPreference ===
     ContactPreference.XMTP_AND_EMAIL;
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
   const validationSchema = useMemo(() => {
     return Yup.object({
       [FormModel.formFields.name.name]: Yup.string()
@@ -356,11 +363,21 @@ function RedeemNonModal({
             .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)
     });
-  }, [emailPreference]);
+  }, [emailPreference, requestBuyerAddress]);
   type FormType = Yup.InferType<typeof validationSchema>;
   const [{ currentStep }, setStep] = useState<{
     previousStep: ActiveStep[];
@@ -495,6 +512,7 @@ function RedeemNonModal({
             [FormModel.formFields.zip.name]: "",
             [FormModel.formFields.country.name]: "",
             [FormModel.formFields.email.name]: "",
+            [FormModel.formFields.walletAddress.name]: "",
             [FormModel.formFields.phone.name]: ""
           }
         }
@@ -509,6 +527,7 @@ function RedeemNonModal({
             !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 (

package/src/components/productCard/ProductCard.tsx

@@ -63,8 +63,8 @@ const Wrapper = ({
   }
   return <>{children}</>;
 };
-export const PhygitalLabel = () => {
-  return <TopLeftRibbon data-text="Phygital" />;
+export const PhygitalLabel = ({ ...rest }) => {
+  return <TopLeftRibbon {...rest} data-text="Phygital" />;
 };
 export const ProductCard = (props: IProductCard) => {
   const {

package/src/lib/bundle/const.ts

@@ -27,3 +27,9 @@ export const ercTokenMapping = {
   erc721: "ERC721",
   erc1155: "ERC1155"
 } as const;
+
+export const BUYER_TRANSFER_INFO_KEY = "buyerTransferInfo";
+export enum BuyerTransferInfo {
+  "email" = "email",
+  "walletAddress" = "walletAddress"
+}

package/src/lib/offer/filter.ts

@@ -1,5 +1,8 @@
 import { subgraph } from "@bosonprotocol/core-sdk";
 import type { Offer } from "../../types/offer";
+import { NftItem, isNftItem } from "../bundle/filter";
+import { BUYER_TRANSFER_INFO_KEY, BuyerTransferInfo } from "../bundle/const";
+import { isTruthy } from "../../types/helpers";
 
 export type BundleMetadata = Extract<
   Offer["metadata"],
@@ -30,3 +33,28 @@ export const isProductV1 = (
 ): offer is ProductV1 =>
   offer.metadata?.__typename === "ProductV1MetadataEntity" ||
   offer.metadata?.type === subgraph.MetadataType.PRODUCT_V1;
+
+const getBuyerTransferInfoTerm = (item: NftItem) =>
+  item.terms?.find((term) => term.key === BUYER_TRANSFER_INFO_KEY);
+export const getBuyerTransferInfos = (
+  offer: Offer | subgraph.OfferFieldsFragment
+): Set<string> => {
+  return isBundle(offer)
+    ? new Set(
+        offer.metadata.items
+          .filter(isNftItem)
+          .map((item) => getBuyerTransferInfoTerm(item)?.value)
+          .filter(isTruthy)
+      )
+    : new Set();
+};
+
+export const getHasBuyerTransferInfos = (
+  offer: Offer | subgraph.OfferFieldsFragment,
+  valuesToFind: BuyerTransferInfo[]
+): boolean => {
+  const buyerTransferInfos = getBuyerTransferInfos(offer);
+  return valuesToFind.every((buyerTransferInfoValue) => {
+    return buyerTransferInfos.has(buyerTransferInfoValue);
+  });
+};