1） 增加复制key

src/components/UseExchangeCodePop/index.jsx

@@ -1,4 +1,4 @@
-import React, { useReducer } from "react";
+import React, { useReducer, useRef, useEffect } from "react";
 import {
   Card,
   Drawer,
@@ -22,9 +22,19 @@ import FormItem from "@/components/form-item/main";
 import Grid from "@/components/gird/main.js";
 import Bus from "@/assets/eventBus.js";
 import _ from "lodash";
+import { isSameDay } from "date-fns";
+import moment from "moment";
+import {
+  handelResponse,
+  getAccessVerification,
+  getProductInfoSelect,
+} from "@/assets/api.js";
 
 import "./style.less";
-import { useRef } from "react";
+import { useState } from "react";
+const initArray = (targetNum) => {
+  return Array.from({ length: targetNum }, (_, index) => index);
+};
 
 const Column2 = [
   {
@@ -130,6 +140,11 @@ function reducer(state, action) {
         ...state,
         describe: action.payload,
       };
+    case "date_time":
+      return {
+        ...state,
+        date_time: action.payload,
+      };
     default:
       return;
   }
@@ -137,10 +152,13 @@ function reducer(state, action) {
 
 // 新建/编辑兑换弹窗
 const UseExchangeCodePop = (props) => {
-  const { title } = props;
+  const { title, closeDraw, time, direct_reseller_id, showProductPop } = props;
   const code_info = useRef(null);
   const code_rule = useRef(null);
   const [state, dispatch] = useReducer(reducer, initData);
+  const [addIsType, setAddIsType] = useState("");
+  const [newGoodsBtnLoading, setNewGoodsBtnLoading] = useState(false);
+  const [newGoldLoading, setNewGoldLoading] = useState(false);
   const rulesForm = {
     code_name: [{ type: "required", message: "请输入兑换码名称" }],
     issued: [
@@ -156,13 +174,99 @@ const UseExchangeCodePop = (props) => {
     date_time: [{ type: "required", message: "请选择生效时间段" }],
     rank: [{ type: "required", message: "请选择商品范围" }],
   };
-  const codeSubmit = () => {};
+  useEffect(() => {
-  const closeDraw = () => {};
+    console.log("time =>", time);
-  const onChangeCombinedDate = () => {};
+    dispatch({ type: "date_time", payload: time });
-  const onDisabledTime = () => {};
+  }, []);
-  const onDisabledRange = () => {};
+  const codeSubmit = () => {
+    if (code_info.current.validator() && code_rule.current.validator()) {
+      console.log("校验通过...");
+    }
+  };
+  const closeDrawPop = () => {
+    closeDraw();
+  };
+  const onChangeCombinedDate = (e) => {
+    dispatch({ type: "date_time", payload: e });
+  };
+  const onDisabledTime = (date, type) => {
+    const min = new Date();
+    const hour = min.getHours();
+    const minute = min.getMinutes();
+    const second = min.getSeconds();
+    const isSame = isSameDay(date, min);
+
+    return isSame
+      ? {
+          disabledHours: () => initArray(hour),
+          disabledMinutes: (hourValue) =>
+            hourValue === hour ? initArray(minute) : [],
+          disabledSeconds: (hourValue, minuteValue) =>
+            hourValue === hour && minuteValue === minute
+              ? initArray(second)
+              : [],
+        }
+      : {};
+  };
+  const onDisabledRange = (date, type) => {
+    let isdisabled = false;
+    let str = moment(date).format("YYYY-MM-DD HH:mm:ss");
+    if (type == "start") {
+      isdisabled =
+        moment(str).isBefore(time[0]) || moment(str).isAfter(time[1]);
+    }
+    if (type == "end") {
+      isdisabled =
+        moment(str).add(1, "days").isBefore(time[0]) ||
+        moment(str).isAfter(time[1]);
+    }
+    return isdisabled;
+  };
   const onRankChange = () => {};
-  const addProduct = () => {};
+
+  // 新建商品/新建立减金
+  const addProduct = (type) => {
+    setAddIsType(type);
+    /* type: 立减金/商品 */
+    let direct_reseller_ids = direct_reseller_id;
+    if (direct_reseller_ids <= 0) {
+      // 老数据不能进行新增商品操作
+      Notify.error(`请添加映射分销商`);
+      return;
+    }
+    if (type === "addProduct") {
+      // showProductPop({ type: true, title: "新建商品" });
+      setNewGoodsBtnLoading(true);
+    } else {
+      // showProductPop({ type: true, title: "新增立减金" });
+      setNewGoldLoading(true);
+    }
+    let param = {
+      reseller_id: direct_reseller_ids,
+    };
+    getProductInfoSelect(param).then((res) => {
+      console.log("res =>", res);
+      if (type === "addProduct") {
+        setNewGoodsBtnLoading(false);
+      } else {
+        setNewGoldLoading(false);
+      }
+      if (res.code === 200) {
+        sessionStorage.setItem("productsList", JSON.stringify(res.data.data));
+        if (type === "addProduct") {
+          showProductPop({
+            type: true,
+            title: "新建商品",
+            productData: res.data.data,
+          });
+        } else {
+          showProductPop({ type: true, title: "新增立减金" });
+        }
+      } else {
+        sessionStorage.setItem("productsList", JSON.stringify([]));
+      }
+    });
+  };
   const productEditShow = () => {};
   return (
     <div>
@@ -182,7 +286,7 @@ const UseExchangeCodePop = (props) => {
             </Button>
             <Button
               onClick={(e) => {
-                closeDraw();
+                closeDrawPop();
               }}
             >
               取消
@@ -190,7 +294,7 @@ const UseExchangeCodePop = (props) => {
           </div>
         }
         onClose={(e) => {
-          closeDraw();
+          closeDrawPop();
         }}
         maskClosable={false}
       >
@@ -315,7 +419,7 @@ const UseExchangeCodePop = (props) => {
                     <Button
                       type="primary"
                       style={{ marginLeft: "20px" }}
-                      loading={state.newGoodsBtnLoading}
+                      loading={newGoodsBtnLoading}
                       onClick={() => {
                         addProduct("addProduct");
                       }}
@@ -325,7 +429,7 @@ const UseExchangeCodePop = (props) => {
                     <Button
                       type="primary"
                       style={{ marginLeft: "20px" }}
-                      loading={state.newGoldLoading}
+                      loading={newGoldLoading}
                       onClick={() => {
                         addProduct("addKnockGold");
                       }}
@@ -407,5 +511,4 @@ const UseExchangeCodePop = (props) => {
     </div>
   );
 };
-
 export default UseExchangeCodePop;

src/components/UsePlanCard/index.jsx

@@ -34,7 +34,6 @@ import Form from "../../components/form/main";
 import FormItem from "../../components/form-item/main";
 import Bus from "../../assets/eventBus.js";
 import Grid from "../../components/gird/main.js";
-import UseExchangeCodePop from "../UseExchangeCodePop/index";
 
 import "./style.less";
 
@@ -44,7 +43,7 @@ const initPlanInfo = {
   type: 2,
   reseller: null,
   return_id: "1",
-  date_time: ["", ""],
+  date_time: ["2022-08-01 14:40:48", "2022-08-10 23:59:59"],
 };
 function reducerPlanInfo(state, action) {
   switch (action.type) {
@@ -73,7 +72,7 @@ function reducerPlanInfo(state, action) {
   }
 }
 const UsePlanCardStep01 = forwardRef((props, ref) => {
-  const { getResellerInfo } = props;
+  const { getResellerInfo, getTime } = props;
 
   //校验规则
   const rules = {
@@ -113,6 +112,7 @@ const UsePlanCardStep01 = forwardRef((props, ref) => {
 
   useEffect(() => {
     getReseller();
+    getTime(model.date_time);
   }, []);
 
   const onResellerChange = (e) => {
@@ -121,6 +121,7 @@ const UsePlanCardStep01 = forwardRef((props, ref) => {
   };
 
   const onChangeCombinedDate = (e) => {
+    getTime(e);
     dispatch({ type: "date_time", payload: e });
   };
 
@@ -268,7 +269,6 @@ const initPlanKey = {
     range: "",
   },
   rowIndex: -1,
-  drawerVisible: false,
 };
 
 // 清除数据
@@ -276,7 +276,6 @@ const clearPlanKeyType = (state, data) => {
   state.codeInfo = data.codeInfo;
   state.rank = data.rank;
   state.rankoptions = data.rankoptions;
-  state.drawerVisible = data.drawerVisible;
   state.rowIndex = data.rowIndex;
   return {
     ...state,
@@ -319,6 +318,7 @@ function reducerPlanKey(state, action) {
 }
 
 const UsePlanCardStep02 = forwardRef((props, ref) => {
+  const { showExchangeCodePop, time } = props;
   const exchangeColumn = [
     {
       title: "兑换名称",
@@ -434,42 +434,18 @@ const UsePlanCardStep02 = forwardRef((props, ref) => {
       obj.text = res.product_name;
       return obj;
     });
-    // this.setState({
-    //   draw_title: "编辑兑换码",
-    //   rankoptions: arr,
-    //   rank: arr,
-    //   codeInfo: codeInfo,
-    //   rowIndex: rowIndex,
-    // });
-
-    // let temp = _.map(row.product, (o) => {
-    //   o.checked = true;
-    //   return o;
-    // });
-
-    // sessionStorage.setItem("productData", JSON.stringify(row.product));
-    // sessionStorage.setItem("knockGoldData", JSON.stringify(row.product));
-    // this.setState({ tempdata: temp, drawerVisible: true });
   };
   const checkIndex = (e) => {
+    let title = "";
     switch (e) {
       case 0:
-        dispatch({
+        title = "新建兑换码";
-          type: "draw_title",
-          payload: "新建兑换码",
-        });
         break;
       case 1:
-        dispatch({
+        title = "新建优惠券";
-          type: "draw_title",
-          payload: "新建优惠券",
-        });
         break;
       case 2:
-        dispatch({
+        title = "新建立减金";
-          type: "draw_title",
-          payload: "新建立减金",
-        });
         break;
       default:
         break;
@@ -488,18 +464,11 @@ const UsePlanCardStep02 = forwardRef((props, ref) => {
         codeInfo: codeInfo,
         rank: null,
         rankoptions: [],
-        drawerVisible: true,
         rowIndex: -1,
       },
     });
-
     setTableData([]);
-    // this.setState({ rank: null });
+    showExchangeCodePop({ title: title, type: true });
-    // this.setState({ rankoptions: [] });
-    // this.setState({ codeInfo: codeInfo });
-    // this.setState({ tempdata: [] });
-    // this.setState({ drawerVisible: true });
-    // this.setState({ rowIndex: -1 });
   };
 
   const submit = () => {
@@ -675,9 +644,6 @@ const UsePlanCardStep02 = forwardRef((props, ref) => {
           />
         </FormItem>
       </Form>
-      {model.drawerVisible ? (
-        <UseExchangeCodePop title={model.draw_title}></UseExchangeCodePop>
-      ) : null}
     </div>
   );
 });

src/components/UseProductForm/index.jsx

@@ -0,0 +1,293 @@
+import React, { useReducer, useState, useRef } from "react";
+import {
+  Select,
+  Button,
+  ImageUpload,
+  onUpload,
+  Sweetalert,
+  RadioButton,
+  RadioGroup,
+  Notify,
+} from "zent";
+
+import Ipt from "@/components/input/main";
+import Form from "@/components/form/main";
+import FormItem from "@/components/form-item/main";
+import Bus from "@/assets/eventBus.js";
+
+import "./style.less";
+
+const rules = {
+  product: [{ type: "required", message: "请选择映射商品" }],
+  quantity: [
+    { type: "required", message: "请输入商品库存" },
+    {
+      type: "regExp",
+      message: "请输入小于100万的整数",
+      reg: "^(?!0)(?:[0-9]{1,6}|1000000)$",
+    },
+  ],
+  contract_price: [
+    { type: "required", message: "请输入合同价" },
+    {
+      type: "regExp",
+      message: "最多保留4位小数",
+      reg: "^[0-9]+(.[0-9]{1,4})?$",
+    },
+  ],
+  product_name: [{ type: "required", message: "请输入商品名称" }],
+  /*  权重 */
+  weight: [
+    { type: "required", message: "请输入权重" },
+    {
+      type: "regExp",
+      message: "请输入0~100权重数字",
+      reg: "^([0-9]{0,2}|100)$",
+    },
+  ],
+};
+
+const initState = {
+  product_id: "",
+  product_type: "1",
+  contract_price: "",
+  official_price: "",
+  cost_price: "",
+  quantity: "",
+  weight: "0",
+  product_name: "",
+  show_url: "",
+  describe_url: "",
+  map_product_name: "",
+  detail_url: "",
+  account_type: "",
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "product":
+      return {
+        ...state,
+        product: action.payload,
+      };
+    case "weight":
+      return {
+        ...state,
+        weight: action.payload,
+      };
+    case "quantity":
+      return {
+        ...state,
+        quantity: action.payload,
+      };
+    case "contract_price":
+      return {
+        ...state,
+        contract_price: action.payload,
+      };
+    case "product_name":
+      return {
+        ...state,
+        product_name: action.payload,
+      };
+
+    default:
+      return;
+  }
+};
+
+const UseProductForm = () => {
+  const [model, dispatch] = useReducer(reducer, initState); // form 表单数据
+  const [productOption, setProductOption] = useState([]);
+  const [productpic, setProductpic] = useState([]);
+  const form1 = useRef(null);
+  const onProductChange = (e) => {};
+  const onTypeChange = () => {};
+  const onUploadError = () => {};
+  const onUploadChange = () => {};
+  const onUploadChange2 = () => {};
+  const onUploadChange3 = () => {};
+  return (
+    <div>
+      <Form model={model} rules={rules} ref={form1}>
+        <FormItem labelname="映射商品" prop="product" id="product">
+          <Select
+            options={productOption}
+            width={500}
+            placeholder="请选择商品"
+            value={model.cur_product}
+            onChange={(e) => {
+              onProductChange(e);
+              Bus.emit("change", "product", e);
+            }}
+          />
+        </FormItem>
+        <FormItem labelname="商品类型" prop="type" id="type">
+          <RadioGroup
+            onChange={(e) => {
+              onTypeChange(e);
+            }}
+            value={model.product_type}
+          >
+            <RadioButton value={1}>直充</RadioButton>
+            <RadioButton value={2}>卡密</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <FormItem labelname="预估成本价" prop="cost_price" id="cost_price">
+          <div className="line-value">{model.cost_price}</div>
+        </FormItem>
+        <FormItem labelname="商品权重" prop="weight" id="weight">
+          <Ipt
+            onChange={(e) => {
+              dispatch({ type: "weight", payload: e });
+            }}
+            onClearItem={(e) => {
+              dispatch({ type: "weight", payload: "" });
+            }}
+            value={model.weight}
+            placeholder={"请输入"}
+            labelWidth={"0px"}
+            maxLength={3}
+            height={"36px"}
+            countShow={false}
+            width={"520px"}
+            alignment={"left"}
+          />
+        </FormItem>
+        <FormItem labelname="商品库存" prop="quantity" id="quantity">
+          <Ipt
+            onChange={(e) => {
+              dispatch({ type: "weight", payload: e });
+            }}
+            onClearItem={(e) => {
+              dispatch({ type: "weight", payload: "" });
+            }}
+            value={model.quantity}
+            placeholder={"请输入"}
+            labelWidth={"0px"}
+            maxLength={7}
+            height={"36px"}
+            width={"520px"}
+            alignment={"left"}
+          />
+        </FormItem>
+
+        <FormItem id="contract_price" labelname="合同价" prop="contract_price">
+          <Ipt
+            onChange={(e) => {
+              dispatch({ type: "contract_price", payload: e });
+            }}
+            onClearItem={(e) => {
+              dispatch({ type: "contract_price", payload: "" });
+            }}
+            value={model.contract_price}
+            placeholder={"请输入"}
+            labelWidth={"0px"}
+            maxLength={16}
+            height={"36px"}
+            width={"520px"}
+            alignment={"left"}
+          />
+        </FormItem>
+        <FormItem id="product_name" labelname="商品名称" prop="product_name">
+          <Ipt
+            onChange={(e) => {
+              dispatch({ type: "product_name", payload: e });
+            }}
+            onClearItem={(e) => {
+              dispatch({ type: "product_name", payload: "" });
+            }}
+            value={model.product_name}
+            placeholder={"请输入"}
+            labelWidth={"0px"}
+            maxLength={16}
+            height={"36px"}
+            width={"520px"}
+            alignment={"left"}
+          />
+        </FormItem>
+
+        <FormItem
+          id="official_price"
+          labelname="商品官方价"
+          prop="official_price"
+        >
+          <div className="line-value">{model.official_price}</div>
+        </FormItem>
+
+        <FormItem id="show_url" prop="show_url" labelname="商品Logo">
+          <ImageUpload
+            className="zent-image-upload-demo"
+            maxSize={5 * 1024 * 1024}
+            tips="图片不超过 2M"
+            maxAmount={1}
+            onError={onUploadError}
+            onChange={(e) => {
+              onUploadChange(e);
+            }}
+            fileList={model.show_url}
+            value={model.show_url}
+          />
+        </FormItem>
+        <FormItem prop="describe_url" labelname="商品图" id="describe_url">
+          <ImageUpload
+            className="good-image-upload-demo"
+            maxSize={2 * 1024 * 1024}
+            tips="图片不超过 2M"
+            maxAmount={9}
+            onError={onUploadError}
+            onChange={(e) => {
+              onUploadChange3(e);
+            }}
+            sortable
+            fileList={model.describe_url}
+            multiple
+          />
+        </FormItem>
+        <FormItem
+          prop="detail_url"
+          labelname="商品详情"
+          id="detail_url"
+          required={false}
+        >
+          <ImageUpload
+            className="zent-image-upload-demo"
+            maxSize={2 * 1024 * 1024}
+            tips="图片不超过 2M"
+            maxAmount={1}
+            onError={onUploadError}
+            fileList={model.detail_url ? [{ src: model.detail_url }] : null}
+            onChange={(e) => {
+              onUploadChange2(e);
+            }}
+          />
+        </FormItem>
+      </Form>
+
+      <div className="mobile">
+        <div className="mobile_top">
+          {productpic ? (
+            <div className="swiper-container">
+              <div className="swiper-wrapper">
+                {productpic.map((item, index) => {
+                  return (
+                    <div className="swiper-slide" key={index}>
+                      <img src={item.url} alt="" />
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="swiper-pagination"></div>
+            </div>
+          ) : null}
+        </div>
+        <div className="mobile_center"></div>
+        <div className="mobile_bottom">
+          {model.detail_url ? <img src={model.detail_url} alt="" /> : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UseProductForm;

src/components/UseProductForm/style.less

@@ -0,0 +1,9 @@
+.line-value{
+	width: 80%;
+	text-align: left;
+	height: 36px;
+	border-bottom: 1px solid #e0e0e0;
+}
+.good-image-upload-demo{
+	width: 300px !important;
+}

src/components/UseProductPop/index.jsx

@@ -0,0 +1,70 @@
+import React, { useRef } from "react";
+import {
+  Card,
+  Drawer,
+  Button,
+  Tabs,
+  Notify,
+  DateRangePicker,
+  Select,
+  Input,
+  Checkbox,
+  Switch,
+  Icon,
+  RadioGroup,
+  RadioButton,
+  BlockLoading,
+} from "zent";
+
+import UseProductForm from "@/components/UseProductForm/index";
+import KnockGold from "@/components/knockGold"; /* 立减金 */
+
+const UseProductPop = (props) => {
+  const { title, closeDraw, productData, addIsType } = props;
+  const product = useRef(null);
+  const knockGold = useRef(null);
+  const productSubmit = () => {};
+  const closeDrawPop = () => {
+    closeDraw();
+  };
+  return (
+    <div>
+      <Drawer
+        className="draw"
+        width={"86%"}
+        title={title}
+        footer={
+          <div style={{ textAlign: "center" }}>
+            <Button
+              type="primary"
+              onClick={(e) => {
+                productSubmit();
+              }}
+            >
+              提交
+            </Button>
+            <Button onClick={(e) => closeDrawPop()}>取消</Button>
+          </div>
+        }
+        visible={true}
+        onClose={(e) => {}}
+        maskClosable={false}
+      >
+        <div className="draw2">
+          <Card
+            className="borderNone"
+            style={{ width: "95%", margin: "10px auto" }}
+          >
+            {addIsType === "addKnockGold" ? (
+              <KnockGold className="addKnockGold" data={productData} />
+            ) : (
+              <UseProductForm data={UseProductForm} />
+            )}
+          </Card>
+        </div>
+      </Drawer>
+    </div>
+  );
+};
+
+export default UseProductPop;

src/pages/plan/copy/index.jsx

@@ -23,6 +23,8 @@ import {
   UsePlanCardStep02,
   UsePlanCardStep03,
 } from "../../../components/UsePlanCard/index";
+import UseExchangeCodePop from "@/components/UseExchangeCodePop/index";
+import UseProductPop from "@/components/UseProductPop/index";
 import "./style.less";
 const stepsData = [
   {
@@ -61,8 +63,21 @@ const UseOneCopy = () => {
   const [step2_pagetitle, setStep2_pagetitle] = useState("生成key");
   const [keyStyle, setkeyStyle] = useState(1);
   const [isload, setIsload] = useState(false);
-  const [direct_reseller_id, setDirect_reseller_id] = useState(0);
+  const [direct_reseller_id, setDirect_reseller_id] = useState(23377);
   const [whiteStyle, setWhiteStyle] = useState(false);
+  const [newPlanTime, setNewPlanTime] = useState([]);
+
+  const [statePop, setStatePop] = useState({
+    type: false,
+    title: "",
+  });
+
+  const [productPop, setProductPop] = useState({
+    title: "",
+    type: false,
+    productData: [],
+  });
+  const [productTitle, setProductTitle] = useState("");
   const step1 = useRef(null);
   const step2 = useRef([]);
   const step3 = useRef(null);
@@ -71,6 +86,7 @@ const UseOneCopy = () => {
   // 获取分销商信息
   const getResellerInfo = (e) => {
     setResellerInfo(e);
+    setDirect_reseller_id(e.direct_reseller_id);
     console.log("分销商信息:", e);
   };
   /*** 👆👆👆👆👆👆👆  step 01 👆👆👆👆👆👆👆  ***/
@@ -95,12 +111,6 @@ const UseOneCopy = () => {
       console.log("校验通过...");
       setStateSteps(1);
     }
-    // let arr1 = [];
-    // keys.forEach((item) => {
-    //   let val = step2.current[item].submit();
-    //   arr1.push(val);
-    // });
-    // console.log("step 2 =>", arr1);
   };
   // 返回
   const onReturn = () => {};
@@ -118,10 +128,17 @@ const UseOneCopy = () => {
     );
   };
   const closeStep = () => {};
+
+  const showExchangeCodePop = (e) => {
+    setStatePop({ type: e.type, title: e.title });
+  };
+  const closeDraw = () => {
+    setStatePop({ type: false });
+  };
+
   return (
     <div className="plan-add">
       <div className="plan-left">
-        {/********************* 第一步 *****************/}
         <UseSteps
           current={stateSteps}
           onChange={(e) => stepChange(e)}
@@ -146,8 +163,10 @@ const UseOneCopy = () => {
           <div className="step1">
             <div className="plan-title">营销计划</div>
             <Card style={{ width: "100%" }} title="新建计划">
+              {/********************* 第一步 *****************/}
               <UsePlanCardStep01
                 ref={step1}
+                getTime={(e) => setNewPlanTime(e)}
                 getResellerInfo={(e) => {
                   getResellerInfo(e);
                 }}
@@ -194,6 +213,7 @@ const UseOneCopy = () => {
                       isload={isload}
                       direct_reseller_id={direct_reseller_id}
                       whiteStyle={whiteStyle}
+                      showExchangeCodePop={(e) => showExchangeCodePop(e)}
                     ></UsePlanCardStep02>
                   </Card>
                 ) : null;
@@ -214,6 +234,24 @@ const UseOneCopy = () => {
           {nextBtnEl()}
         </div>
       </div>
+      {statePop.type ? (
+        <UseExchangeCodePop
+          title={statePop.title}
+          productTitle={(e) => setProductTitle(e)}
+          time={newPlanTime}
+          direct_reseller_id={direct_reseller_id}
+          showProductPop={(e) => setProductPop(e)}
+          closeDraw={() => closeDraw()}
+        ></UseExchangeCodePop>
+      ) : null}
+
+      {productPop.type ? (
+        <UseProductPop
+          title={productPop.title}
+          productData={productPop.productData}
+          closeDraw={() => setProductPop({ type: false })}
+        ></UseProductPop>
+      ) : null}
     </div>
   );
 };