.

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);
@@ -166,74 +167,23 @@ const DetailInfo = ({ activityById }) => {
                     <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
                   </span>
                 </Button>
+                {activityById.data.attributes.link && (
                   <Button
                     disabled={loading}
-                  // onClick={() => {
-                  //     if (!endUser) {
-                  //         setloginModal(true);
-                  //     } else {
-                  //         setenquiryModal(true);
-                  //     }
-                  // }}
+                    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,6 +219,8 @@ const DetailInfo = ({ activityById }) => {
             <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
               {endUser?.attributes.email}
             </div>
+            <div className="row d-flex justify-content-center">
+              <div className="col-6">
                 <div className="mt-2">Quantity:</div>
                 <Input
                   type="number"
@@ -276,9 +229,19 @@ const DetailInfo = ({ activityById }) => {
                     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");