.

components/detail/DetailInfo.js

@@ -39,6 +39,7 @@ const DetailInfo = ({ activityById }) => {
   const [enqDate, setenqDate] = useState();
   const [loading, setloading] = useState(false);
   const [quantity, setquantity] = useState();
+  const [enquireDate, setenquireDate] = useState();
   const [loginModal, setloginModal] = useState(false);
   const [enquiryModal, setenquiryModal] = useState(false);
   const [showshareWidget, setshowshareWidget] = useState(false);
@@ -97,7 +98,7 @@ const DetailInfo = ({ activityById }) => {
                 <span className="rating">
                   <span className="image-container">
                     <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
-                  {calculateRating(activityById.data.attributes.reviews.data)}
+                    {calculateRating(activityById.data.attributes.reviews.data)}
                   </span>
                 </span>
                 <span className="review">{activityById.data.attributes.reviews.data.length > 0 ? activityById.data.attributes.reviews.data.length : 0}</span>
@@ -166,74 +167,23 @@ const DetailInfo = ({ activityById }) => {
                     <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
                   </span>
                 </Button>
-                <Button
-                  disabled={loading}
-                  // onClick={() => {
-                  //     if (!endUser) {
-                  //         setloginModal(true);
-                  //     } else {
-                  //         setenquiryModal(true);
-                  //     }
-                  // }}
-                  variant="primary"
-                >
-                  Book Now
-                </Button>
+                {activityById.data.attributes.link && (
+                  <Button
+                    disabled={loading}
+                    onClick={() => {
+                      window.open(activityById.data.attributes.link, "_blank", "noopener,noreferrer");
+                    }}
+                    variant="primary"
+                  >
+                    Book Now
+                  </Button>
+                )}
               </div>
             </div>
           </div>
         )}
       </div>
-      {/* {activityById && (
-        <div className="row hide-on-desktop">
-          <div className="col-12">
-            <ul className="availability-wrappper">
-              <li>
-                <span className="image-container">
-                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
-                </span>
-                From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
-              </li>
-              <li>
-                <span className="image-container">
-                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
-                </span>
-                Time: 9:45 AM - 10:00 AM
-              </li>
-              <li>
-                <span className="image-container">
-                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
-                </span>
-                Duration: 2-3 Hours
-              </li>
-              <li>
-                <span className="image-container">
-                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
-                </span>
-                Contact: 1(332) 204-8500
-              </li>
-              <li>
-                <span className="image-container">
-                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
-                </span>
-                Date: All
-              </li>
-              <li>
-                <span className="image-container">
-                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
-                </span>
-                Age: 13+
-                <div className="info-div">
-                  <a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
-                  </a>
-                  {showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )} */}
+
       <Modal
         centered
         show={showshareWidget}
@@ -248,6 +198,7 @@ const DetailInfo = ({ activityById }) => {
       </Modal>
       {activityById && (
         <Modal
+          centered
           show={enquiryModal}
           onHide={() => {
             setenquiryModal(false);
@@ -268,17 +219,29 @@ const DetailInfo = ({ activityById }) => {
             <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
               {endUser?.attributes.email}
             </div>
-            <div className="mt-2">Quantity:</div>
-            <Input
-              type="number"
-              onChange={e => {
-                // console.log("e", e);
-                setquantity(e.target.value);
-              }}
-            ></Input>
+            <div className="row d-flex justify-content-center">
+              <div className="col-6">
+                <div className="mt-2">Quantity:</div>
+                <Input
+                  type="number"
+                  onChange={e => {
+                    // console.log("e", e);
+                    setquantity(e.target.value);
+                  }}
+                ></Input>
+              </div>
+              <div className="col-6">
+                <div className="mt-2">Date:</div>
+                <DatePicker
+                  onChange={e => {
+                    console.log(e);
+                  }}
+                />
+              </div>
+            </div>
             <Button
               disabled={loading || !quantity}
-              className="mt-2"
+              className="mt-2 col-12"
               onClick={async () => {
                 setloading(true);
                 console.log("hello");