feat: allow creating price discovery offers

package.json

@@ -47,8 +47,8 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.4.5",
-    "@bosonprotocol/common": "^1.32.0",
-    "@bosonprotocol/react-kit": "^0.41.0",
+    "@bosonprotocol/common": "^1.32.0-alpha.6",
+    "@bosonprotocol/react-kit": "^0.42.0-alpha.0",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",

src/components/detail/DetailWidget/CommitDetailWidget.tsx

@@ -1,3 +1,4 @@
+import { PriceType } from "@bosonprotocol/common";
 import {
   ExternalCommitDetailView,
   extractUserFriendlyError,
@@ -290,6 +291,7 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
   const isOfferNotValidYet = dayjs(
     getDateTimestamp(offer?.validFromDate)
   ).isAfter(nowDate);
+  const isPriceDiscoveryOffer = offer.priceType === PriceType.Discovery;
   const isCommitDisabled =
     !hasSellerEnoughFunds ||
     isExpiredOffer ||
@@ -299,7 +301,8 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
     isPreview ||
     isOfferNotValidYet ||
     isBuyerInsufficientFunds ||
-    (offer.condition && !isConditionMet);
+    (offer.condition && !isConditionMet) ||
+    isPriceDiscoveryOffer;
   const onCommitPendingSignature = () => {
     setIsLoading(true);
     showModal("WAITING_FOR_CONFIRMATION", undefined, "auto", undefined, {

src/components/modal/ModalComponents.tsx

@@ -22,6 +22,7 @@ import { IframeModal } from "./components/IframeModal/IframeModal";
 import { ImageEditorModal } from "./components/ImageEditorModal/ImageEditorModal";
 import InvalidRoleModal from "./components/InvalidRoleModal";
 import ManageFunds from "./components/ManageFunds";
+import { PremintVouchersModal } from "./components/PremintVouchersModal/PremintVouchersModal";
 import ProductCreateSuccess from "./components/ProductCreateSuccess";
 import CreateProfileModal from "./components/Profile/CreateProfileModal";
 import EditProfileModal from "./components/Profile/EditProfileModal";
@@ -87,7 +88,8 @@ export const MODAL_TYPES = {
   PRICE_IMPACT: "PRICE_IMPACT",
   CONFIRM_SWAP: "CONFIRM_SWAP",
   BUYER_SELLER_AGREEMENT: "BUYER_SELLER_AGREEMENT",
-  REDEEMABLE_NFT_TERMS: "REDEEMABLE_NFT_TERMS"
+  REDEEMABLE_NFT_TERMS: "REDEEMABLE_NFT_TERMS",
+  PREMINT_VOUCHERS: "PREMINT_VOUCHERS"
 } as const;
 
 export const MODAL_COMPONENTS = {
@@ -137,5 +139,6 @@ export const MODAL_COMPONENTS = {
   [MODAL_TYPES.TOKEN_SAFETY]: () => <div></div>,
   [MODAL_TYPES.CURRENCY_SEARCH]: () => <div></div>,
   [MODAL_TYPES.PRICE_IMPACT]: () => <div></div>,
-  [MODAL_TYPES.CONFIRM_SWAP]: () => <div></div>
+  [MODAL_TYPES.CONFIRM_SWAP]: () => <div></div>,
+  [MODAL_TYPES.PREMINT_VOUCHERS]: PremintVouchersModal
 } as const;

src/components/modal/components/PremintVouchersModal/PremintVouchersForm.tsx

@@ -0,0 +1,98 @@
+import { useFormikContext } from "formik";
+import React, { ReactNode, useEffect } from "react";
+
+import { FormField, Input, Select } from "../../../form";
+import { Grid } from "../../../ui/Grid";
+import { FormType } from "./form";
+
+type PremintVouchersFormProps = {
+  isRangeReserved: boolean;
+  availableQuantity: number;
+  alreadyMinted?: number;
+  children: ReactNode;
+  onValidityChanged?: (isValid: boolean) => void;
+};
+
+export const PremintVouchersForm: React.FC<PremintVouchersFormProps> = ({
+  isRangeReserved,
+  alreadyMinted = 0,
+  availableQuantity,
+  children,
+  onValidityChanged
+}) => {
+  const { values, isValid, errors } = useFormikContext<FormType>();
+  useEffect(() => {
+    if (onValidityChanged) {
+      if (!isValid) {
+        console.log("Form errors: ", errors);
+      }
+      onValidityChanged(isValid);
+    }
+  }, [isValid, onValidityChanged, errors]);
+  return (
+    <Grid flexDirection="column" gap="2rem" alignItems="flex-end">
+      <FormField
+        title="Recipient"
+        subTitle="If the voucher shall be minted to the Seller wallet OR the Voucher contract itself. "
+      >
+        <Select
+          name="to"
+          options={[
+            {
+              label: "seller wallet",
+              value: "seller"
+            },
+            {
+              label: "voucher contract",
+              value: "contract"
+            }
+          ]}
+          disabled={isRangeReserved}
+        />
+      </FormField>
+      <FormField
+        title="Range Length"
+        subTitle={
+          isRangeReserved
+            ? `A range of ${values.rangeLength} Vouchers has been reserved.`
+            : "The length of the range to reserve (= max number of vouchers that can be minted)."
+        }
+      >
+        {!isRangeReserved && (
+          <div>
+            <Input
+              placeholder="Range length"
+              name="rangeLength"
+              type="number"
+              min={availableQuantity > 0 ? "1" : "0"}
+              step="1"
+              max={`${availableQuantity}`}
+            />
+          </div>
+        )}
+      </FormField>
+      <FormField
+        title="Nb of Vouchers to Premint"
+        subTitle={
+          isRangeReserved
+            ? `The number of vouchers to premint (already minted: ${alreadyMinted}).`
+            : "A vouchers range should be reserved before preminting."
+        }
+      >
+        {isRangeReserved && (
+          <div>
+            <Input
+              placeholder="Nb of Vouchers"
+              name="premintQuantity"
+              type="number"
+              min={values.rangeLength - alreadyMinted > 0 ? "1" : "0"}
+              step="1"
+              max={values.rangeLength - alreadyMinted}
+            />
+          </div>
+        )}
+      </FormField>
+      {children}
+    </Grid>
+  );
+};