wishlist api binding complete

Chetan
Commit ef8940ac authored 2024-06-10 12:30:09 +0530 by Chetan
Showing 4 changed files with 325 additions and 129 deletions
components/user/MyWhishList.js
pages/user/wishlist/index.js
redux/actions/activityAction.js
styles/globals.css
--- a/components/user/MyWhishList.js
View file @ef8940a
+++ b/components/user/MyWhishList.js
View file @ef8940a
 import Image from "next/image";
 import React, { Fragment } from "react";
 import { Button } from "react-bootstrap";
-import { renderImage } from "../../services/imageHandling";
+import { cleanImage } from "../../services/imageHandling";
+import WishlistComponent from "../detail/WIshlistComponent";
-const MyWhishList = () => {
+import { useRouter } from "next/router";
-    const whishListData = [
-        {
-            id: "0",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image1.png"
-        },
-        {
-            id: "1",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image2.png"
-        },
-        {
-            id: "2",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image3.png"
-        },
-        {
-            id: "3",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image4.png"
-        }
-    ]
+const MyWhishList = ({ data }) => {
+    const router = useRouter();
    return (
        <Fragment>
            <div className="container pb-5">
@@ -63,44 +15,43 @@ const MyWhishList = () => {
                        <h2 className="px-2 px-lg-0">My Bookings</h2>
                        <div className="listing-items">
                            <div className="row">
-                                {whishListData?.length && whishListData.map((data, index) => (
+                                {data?.length && data.map((data, index) => (
                                    <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
                                        <div className="item">
                                            <div className="browse-experiences-item">
                                                <div className="img-wrapper">
                                                    <span className="image-container">
-                                                        <Image src={renderImage(data.image)} layout="fill" className="image img-fluid" />
+                                                        <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
                                                    </span>
                                                    <div className="top-rated">Top Rated</div>
                                                </div>
                                                <div className="info">
                                                    <div className="top-name">
-                                                        <div className="title">{data.name}</div>
+                                                        <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
                                                        <div className="rating-wishlist">
                                                            <div className="rating">
-                                                                <span className="number">{data.rating}</span>
+                                                                <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
                                                                <span className="image-container">
                                                                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                                                                </span>
                                                            </div>
-                                                            <span className="image-container">
+                                                            <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
-                                                                <Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" />
-                                                            </span>
                                                        </div>
                                                    </div>
-                                                    <div className="discription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a></div>
+                                                    <div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
-                                                    {/* <p className="price">{data.price} <span>{data.discount}</span></p> */}
                                                    <div className="price">
-                                                        ${data?.price} <span className="off">{data.discount}</span>
+                                                        ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span>
                                                    </div>
                                                    <div className="detail">
-                                                        <div>{data.availablity}</div>
+                                                        <div className="">For 1 Night</div>
-                                                        <div>{data.other}</div>
+                                                        <div className="">Includes taxes & Fees</div>
                                                    </div>
                                                    <div className="explore-now">
                                                        <Button
                                                            variant="primary"
+                                                            onClick={() => {
+                                                                router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
+                                                              }}
                                                        >
                                                            Explore Now
                                                        </Button>

--- a/pages/user/wishlist/index.js
View file @ef8940a
+++ b/pages/user/wishlist/index.js
View file @ef8940a
 import React from "react";
 import Layout from "../../../components/layout/Layout";
 import MyWhishList from "../../../components/user/MyWhishList";
+import { useSelector } from "react-redux";
-export default function UserProfilePage () {
+export default function UserProfilePage() {
+    const { wishlists } = useSelector(state => state.wishlists)
    return (
        <Layout>
-            <MyWhishList />
+            <MyWhishList data={wishlists}/>
        </Layout>
    );
 };
\ No newline at end of file
--- a/redux/actions/activityAction.js
View file @ef8940a
+++ b/redux/actions/activityAction.js
View file @ef8940a
@@ -547,7 +547,7 @@ export const getWishlists =
            }
          }
        },
-        populate: ["endUser", "experience"]
+        populate: ["endUser", "experience", "experience.image"]
      };
      const queryString = qs.stringify(query, {

--- a/styles/globals.css
View file @ef8940a
+++ b/styles/globals.css
View file @ef8940a
@@ -260,7 +260,7 @@ h6 {
 }
 /* cursor pointer */
-.cursor-pointer{
+.cursor-pointer {
  cursor: pointer;
 }
@@ -270,12 +270,12 @@ h6 {
  position: relative;
 }
-.image-container > span {
+.image-container>span {
  position: unset !important;
  /* display: inline-block !important; */
 }
-.image-container.d-inblock > span {
+.image-container.d-inblock>span {
  position: unset !important;
  display: inline-block !important;
 }
@@ -286,6 +286,7 @@ h6 {
  position: relative !important;
  height: unset !important;
 }
 header {
  position: relative;
  z-index: 99;
@@ -369,13 +370,16 @@ header {
 .header-search {
  position: relative;
 }
 .header-search .rbt .rbt-input-main {
  padding-right: 2.5rem;
  font-size: 0.833vw;
 }
-.header-search > .form-control {
+.header-search>.form-control {
  font-size: 0.833vw;
 }
 .header-search .search-icon {
  position: absolute;
  right: 0;
@@ -412,12 +416,14 @@ header {
  width: 100%;
  height: 100%;
 }
 .home-banner-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
-  background: rgba(0, 0, 0, 0.2); /* Black see-through */
+  background: rgba(0, 0, 0, 0.2);
+  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
@@ -427,17 +433,21 @@ header {
  z-index: 1;
  border-radius: 0 0 8rem 8rem;
 }
-.home-banner-bg > span {
+.home-banner-bg>span {
  height: 100%;
  display: block;
 }
-.home-banner-bg > span > span {
+.home-banner-bg>span>span {
  height: 100% !important;
 }
-.home-banner-bg > span > span .image {
+.home-banner-bg>span>span .image {
  object-fit: cover !important;
  border-radius: 0 0 136px 136px;
 }
 .banner-bg {
  position: absolute;
  left: 0;
@@ -499,7 +509,7 @@ header {
  position: relative;
 }
-.owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
+.owl-custom01.owl-carousel .owl-nav button.owl-prev>span {
  background: url(/images/icons/arrow-left.svg) no-repeat center;
  width: 14px;
  height: 22px;
@@ -507,7 +517,7 @@ header {
  display: block;
 }
-.owl-custom01.owl-carousel .owl-nav button.owl-next > span {
+.owl-custom01.owl-carousel .owl-nav button.owl-next>span {
  background: url(/images/icons/arrow-right.svg) no-repeat center;
  width: 14px;
  height: 22px;
@@ -549,9 +559,11 @@ header {
  border: 3px solid #fff;
  background: #2a2a2a;
 }
 .searchbar-h .rbt-menu.dropdown-menu.show {
  top: 1.7rem !important;
 }
 .searchbar-h {
  position: relative;
  width: 100%;
@@ -671,9 +683,11 @@ span.form-error,
 .form-container .input-group {
  margin-bottom: 28px;
 }
 .form-container .input-group .form-error {
  margin-top: 0.4rem;
 }
 .form-container label {
  color: #000;
  font-family: "Sofia Pro Light";
@@ -831,7 +845,7 @@ span.form-error,
  user-select: none;
 }
-.check-container input:checked ~ .checkmark:after {
+.check-container input:checked~.checkmark:after {
  display: block;
 }
@@ -859,7 +873,7 @@ span.form-error,
  width: 0;
 }
-.check-container input:checked ~ .checkmark {
+.check-container input:checked~.checkmark {
  background-color: #fff;
 }
@@ -994,12 +1008,15 @@ span.form-error,
  align-items: center;
  justify-content: center;
 }
-.btn-edit > span:first-child {
+.btn-edit>span:first-child {
  margin-top: 0.2rem;
 }
 .btn-edit .image-container .image {
  width: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320)) !important;
 }
 .content-wraaper label {
  color: #646464;
  font-size: 18px;
@@ -1070,7 +1087,7 @@ span.form-error,
  color: #808080;
 }
-.card-booking-content > p:last-child {
+.card-booking-content>p:last-child {
  margin-bottom: 0;
 }
@@ -1113,7 +1130,7 @@ span.form-error,
  color: #808080;
 }
-.card-booking-content .description > span {
+.card-booking-content .description>span {
  color: #646464;
  text-decoration: underline;
 }
@@ -1123,7 +1140,7 @@ span.form-error,
  font-weight: 600;
 }
-.card-booking-content .price > span {
+.card-booking-content .price>span {
  font-size: 0.8rem;
  color: #808080;
 }
@@ -1159,7 +1176,7 @@ span.form-error,
  margin-bottom: 1rem;
 }
-.card-booking-content .details-div > p:first-child {
+.card-booking-content .details-div>p:first-child {
  font-family: "Sofia Pro Light";
  font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
  line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
@@ -1169,7 +1186,7 @@ span.form-error,
  margin-bottom: 0;
 }
-.card-booking-content .details-div > p:last-child {
+.card-booking-content .details-div>p:last-child {
  font-family: "Sofia Pro Light";
  font-size: 16px;
  font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
@@ -1206,6 +1223,7 @@ span.form-error,
  letter-spacing: 0em;
  margin-bottom: 20px;
 }
 .business-details::before {
  content: "";
  border-left: 6px solid #0070bd;
@@ -1360,9 +1378,11 @@ span.form-error,
  display: flex;
  align-items: center;
 }
-.sidebar ul li a > span {
+.sidebar ul li a>span {
  flex: 0 0 auto;
 }
 .sidebar ul li a span {
  padding-left: 1rem;
  padding-top: 5px;
@@ -1446,9 +1466,11 @@ span.form-error,
  color: #ffffff;
  border: none;
 }
 .btnAdd:disabled .image-container .image {
  width: 14px !important;
 }
 .btnAdd:hover,
 .btnAdd:focus,
 .btnAdd:active {
@@ -1511,12 +1533,12 @@ span.form-error,
 }
 /* On mouse-over, add a grey background color */
-.radioContainer:hover input ~ .checkmark {
+.radioContainer:hover input~.checkmark {
  background-color: #fff;
 }
 /* When the radio button is checked, add a blue background */
-.radioContainer input:checked ~ .checkmark {
+.radioContainer input:checked~.checkmark {
  color: #0070bd;
 }
@@ -1528,7 +1550,7 @@ span.form-error,
 }
 /* Show the indicator (dot/circle) when checked */
-.radioContainer input:checked ~ .checkmark:after {
+.radioContainer input:checked~.checkmark:after {
  display: block;
 }
@@ -1861,6 +1883,7 @@ span.form-error,
  text-align: center;
  cursor: pointer;
 }
 .let-discover-carousal a .image {
  padding: 0.2rem !important;
 }
@@ -1868,12 +1891,15 @@ span.form-error,
 .let-discover-carousal a .title {
  padding: 1rem;
 }
 .let-discover-carousal a.active {
  color: #000;
 }
 .let-discover-carousal a.active .title {
  text-decoration: underline;
 }
 .carousal-c {
  padding: 0 4rem;
 }
@@ -1929,6 +1955,7 @@ span.form-error,
  position: relative;
  color: #000;
 }
 .browse-experiences-item .img-wrapper .image-container .image {
  height: calc(220px + (220 - 220) * (100vw - 320px) / (1920 - 320)) !important;
  background-color: #adadad;
@@ -1964,46 +1991,57 @@ span.form-error,
  align-items: center;
  justify-content: center;
 }
 .info .rating-wishlist .rating .number {
  padding-top: 0.2rem;
 }
 .info .rating-wishlist .wishlist .image-container {
  width: 19px;
  height: 19px;
  display: block;
 }
 .rs {
  /* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
 }
 .share-social-container {
  display: flex;
  align-items: center;
 }
 .anticon.anticon-copy {
  cursor: pointer;
 }
 .share-social-container .share-social-some-network {
  margin-right: 1rem;
 }
 .wishlist-share .wishlist {
  width: 29px;
  height: 29px;
 }
 .info .rating-wishlist .rating .image-container {
  width: 14px;
  /* margin-top: -4px; */
  margin-left: 4px;
 }
-.product-info .wishlist-share > div {
+.product-info .wishlist-share>div {
  margin-bottom: 1rem;
 }
 .browse-experiences-item .info .discription {
  font-size: 0.677vw;
  line-height: 0.8vw;
  color: #808080;
  margin-bottom: 10px;
 }
-.browse-experiences-item .info .discription > span {
+.browse-experiences-item .info .discription>span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
@@ -2038,9 +2076,11 @@ span.form-error,
  line-height: 11px;
  margin-bottom: 10px;
 }
-.browse-experiences-item .info .detail > div {
+.browse-experiences-item .info .detail>div {
  margin-bottom: 0.4rem;
 }
 .btn-outline-secondary {
  border: 1px solid #000;
  font-size: 16px;
@@ -2048,9 +2088,11 @@ span.form-error,
  padding-left: 1rem;
  padding-right: 1rem;
 }
 .btn-outline-secondary:hover {
  background: #0070bd;
 }
 .btn-center {
  text-align: center;
  padding: 2rem 0;
@@ -2063,12 +2105,14 @@ span.form-error,
  object-fit: cover;
  padding: 4rem;
 }
 .gift-an-experience-inner .img .image {
  display: block;
  animation: scale2 4s infinite;
  transition: all 0.6s ease-out;
  overflow: hidden;
 }
 .gift-an-experience-inner .content .title {
  font-size: 2.083vw;
  line-height: 2.083vw;
@@ -2088,6 +2132,7 @@ span.form-error,
  text-align: center;
  padding: 0 13vw;
 }
 .testimonial-item .image {
  padding: 0.2rem !important;
 }
@@ -2256,9 +2301,11 @@ footer hr {
  justify-content: space-between;
  cursor: pointer;
 }
 .box-01 .reset a:hover {
  color: #0070bd;
 }
 .box-01 .reset a .image-container {
  margin-left: 0.5rem;
 }
@@ -2303,6 +2350,7 @@ footer hr {
 .form-select {
  font-size: 0.833vw;
 }
 .data-filters-item label input {
  margin-right: 0.4rem;
  margin-top: -4px;
@@ -2517,15 +2565,19 @@ footer hr {
  align-items: center;
  padding: 0.5rem 0 2rem;
 }
 .product-reviews .review {
  margin-left: 1rem;
 }
 .guest-reviews-detail .star-ratings .star-container {
  padding: 0 0.1rem !important;
 }
 .guest-reviews-detail .star-ratings {
  margin-bottom: 1rem;
 }
 .product-info .product-reviews .star {
  display: flex;
  align-items: center;
@@ -2560,7 +2612,7 @@ footer hr {
  line-height: 2.083vw;
 }
-.product-info .price > span {
+.product-info .price>span {
  color: #808080;
  font-size: 14px;
 }
@@ -2571,16 +2623,18 @@ footer hr {
  margin-bottom: 0.5rem;
 }
-.product-info .location > span {
+.product-info .location>span {
  color: #808080;
  font-size: 16px;
 }
 .btn:hover {
  box-shadow: -1px 6px 10px 0 rgba(120, 60, 20, 0.2);
  transform: scale(1.05);
  /* background-color: transparent; */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-row {
  padding: 2rem 0;
 }
@@ -2611,10 +2665,12 @@ footer hr {
 .image-gallery-content .image-gallery-slide .image-gallery-image {
  /* max-height: 100%; */
 }
 .image-gallery-content.image-gallery-thumbnails-bottom.fullscreen .image-gallery-thumbnail {
  width: 100px;
 }
-.breadcrumb-item + .breadcrumb-item::before {
+.breadcrumb-item+.breadcrumb-item::before {
  content: "";
  background: url(/images/icons/arrow-right-grey.svg) no-repeat;
  width: 24px;
@@ -2629,11 +2685,13 @@ footer hr {
 .btn {
  font-size: 0.833vw;
 }
-.btn-check:focus + .btn,
+.btn-check:focus+.btn,
 .btn:focus,
 button:focus:not(:focus-visible) {
  box-shadow: none;
 }
 .availability-wrappper {
  display: flex;
  align-items: center;
@@ -2648,7 +2706,7 @@ button:focus:not(:focus-visible) {
  margin: 0.5rem;
 }
-.availability-wrappper li > span {
+.availability-wrappper li>span {
  width: 30px;
  display: block;
  margin-right: 10px;
@@ -2719,9 +2777,11 @@ button:focus:not(:focus-visible) {
  margin-left: 0.5rem;
  cursor: pointer;
 }
 .guest-reviews-detail.modal .head {
  margin-bottom: 0;
 }
 .guest-reviews-detail {
  margin-right: 3rem;
 }
@@ -2734,7 +2794,7 @@ button:focus:not(:focus-visible) {
  margin-bottom: 2rem;
 }
-.guest-reviews-session > .container {
+.guest-reviews-session>.container {
  border-top: 1px solid #c9c9c9;
  padding-top: 3rem;
 }
@@ -2771,15 +2831,18 @@ button:focus:not(:focus-visible) {
  height: 3px;
  background-size: 90%;
 }
 .accordion-01 .title-accord {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96%;
 }
 .logout-bk {
  display: none;
 }
 .accordion-01 .accordion-button {
  font-size: 1.042vw;
  line-height: 1.042vw;
@@ -2848,13 +2911,16 @@ button:focus:not(:focus-visible) {
  border: 1px solid #000;
  border-radius: 10px;
 }
 .testimonial-session .rating {
  margin-bottom: 0.5rem;
 }
 .testimonial-session .rating .star-ratings svg {
  width: 33px !important;
  height: 33px !important;
 }
 .sub-categories {
  display: flex;
  align-items: center;
@@ -2862,11 +2928,13 @@ button:focus:not(:focus-visible) {
  -ms-overflow-style: none;
  scrollbar-width: none;
 }
-.active > .page-link,
+.active>.page-link,
 .page-link.active {
  background-color: #0070bd;
  border-color: #0070bd;
 }
 .sub-categories a {
  cursor: pointer;
  display: flex;
@@ -2889,46 +2957,57 @@ input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
 .sub-categories a .image-container {
  width: 20px;
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: -0.8rem;
 }
 .graph {
  padding-top: 3rem;
 }
 .graph .graph-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #808080;
 }
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-inner {
  padding: 5px 8px;
  color: #808080;
  background-color: transparent;
 }
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before,
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-content {
  background: #fff;
 }
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
  box-shadow: 1px 1px 6px #c1c1c1;
 }
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider:hover .ant-slider-track {
  background-color: #0070bd;
 }
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-handle::after {
  background-color: #0070bd;
  box-shadow: 0 0 0 2px #0070bd;
 }
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-rail {
  background-color: #a1a1a1;
 }
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-track {
  background-color: #0070bd;
 }
 .box-01 .inner .price .sub-text {
  color: #d1d1d1;
 }
@@ -2939,16 +3018,21 @@ input[type="number"]::-webkit-outer-spin-button {
  left: 0;
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
+  background-color: rgba(0, 0, 0, 0.8);
-  z-index: 999; /* Ensure the overlay appears above other content */
+  /* Semi-transparent black background */
+  z-index: 999;
+  /* Ensure the overlay appears above other content */
 }
 .let-discover-session.let-discover-listing-session .swiper-nav,
 .home_nav {
  width: 106%;
 }
 .mySwiper01 .swiper-button-prev:after {
  background: url(/images/icons/arrow-left-w.svg) no-repeat center;
 }
 .mySwiper01 .swiper-button-next:after {
  background: url(/images/icons/arrow-right-w.svg) no-repeat center;
 }
@@ -2981,7 +3065,7 @@ input[type="number"]::-webkit-outer-spin-button {
  background: transparent;
 }
-.swiper-nav button .image-container > span {
+.swiper-nav button .image-container>span {
  width: 14px !important;
 }
@@ -3011,16 +3095,20 @@ input[type="number"]::-webkit-outer-spin-button {
  margin-top: -20px;
  margin-bottom: 5rem;
 }
 .page-title-area .banner-bg .image-container {
  height: 100%;
  display: block;
 }
-.page-title-area .banner-bg .image-container > span {
+.page-title-area .banner-bg .image-container>span {
  height: 100% !important;
 }
 .page-title-area .banner-bg .image {
  object-fit: cover;
 }
 .page-title-one {
  background: url(/images/banner/about-us.png);
 }
@@ -3177,7 +3265,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .swiper-pagination-fraction,
 .swiper-pagination-custom,
-.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-horizontal>.swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -5px !important;
 }
@@ -3287,14 +3375,17 @@ input[type="number"]::-webkit-outer-spin-button {
  height: 220px;
  position: relative;
 }
 .blog-item .img-wrapper .image-container {
  height: 100%;
  display: block;
 }
-.blog-item .img-wrapper .image-container > span {
+.blog-item .img-wrapper .image-container>span {
  height: 100% !important;
 }
-.blog-item .img-wrapper .image-container > span > .image {
+.blog-item .img-wrapper .image-container>span>.image {
  object-fit: cover;
  border-radius: 25px 25px 0 0;
 }
@@ -3349,6 +3440,7 @@ input[type="number"]::-webkit-outer-spin-button {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
 }
 .blog-item .info .read-more .btn {
  font-size: 0.677vw;
  line-height: 0.677vw;
@@ -3374,36 +3466,44 @@ input[type="number"]::-webkit-outer-spin-button {
  padding: 0;
  border-top: 0;
 }
 .blogs-filter .btn.btn-primary {
  padding-top: 0.475rem;
  padding-bottom: 0.475rem;
 }
 .blog-detail-inner-session .profile {
  display: flex;
  align-items: center;
 }
 .blog-detail-inner-session .profile .image-container {
  width: 56px;
  display: inline-block;
  margin-right: 0.5rem;
 }
 .blog-detail-inner-session .date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
 }
 .blog-detail-inner-session .date .image-container {
  width: 29px;
  display: inline-block;
  margin-right: 0.5rem;
 }
 .blog-detail-inner-session .flag-list {
  padding: 2rem 0;
 }
 .blog-detail-inner-session .flag-list li {
  display: inline-block;
  margin-right: 1rem;
 }
 .blog-detail-inner-session .flag-list li a {
  background: #f7f5f1;
  border-radius: 5px;
@@ -3411,45 +3511,55 @@ input[type="number"]::-webkit-outer-spin-button {
  padding: 0.5rem 1rem;
  display: block;
 }
 .blog-detail-inner-session h2 {
  font-size: 1.667vw;
  line-height: 1.967vw;
  font-weight: 400;
  margin-bottom: 2rem;
 }
 .blog-detail-inner-session p {
  margin-bottom: 1.5rem;
 }
 .blog-detail-inner-session {
  padding-bottom: 3rem;
 }
 .s-page-session {
  margin: 5rem 0;
 }
 .s-page-session h2 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  margin-bottom: 1rem;
 }
 .s-page-session p {
  margin-bottom: 1.5rem;
 }
 .s-page-session ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-left: 2rem;
  margin-bottom: 2rem;
 }
 .gift-card-session {
  padding: 5rem 0;
 }
 .gift-card-lt {
  text-align: center;
  width: 100%;
  height: 260px;
  padding-right: 3rem;
 }
 .gift-card-lt .gift-box {
  height: 100%;
  background: #f7f5f1;
@@ -3459,21 +3569,26 @@ input[type="number"]::-webkit-outer-spin-button {
  border-radius: 13px;
  margin-bottom: 1rem;
 }
 .gift-card-rt {
  border-left: 2px solid #e9e9e9;
  padding-left: 3rem;
 }
 .gift-card-session .back-btn .image-container {
  width: 15px;
  display: inline-block;
 }
 .gift-card-amt ul li {
  display: inline-block;
  vertical-align: top;
 }
 .gift-card-amt ul li input[type="radio"] {
  display: none;
 }
 .gift-card-amt ul li a,
 .gift-card-amt ul li label {
  cursor: pointer;
@@ -3493,16 +3608,19 @@ input[type="number"]::-webkit-outer-spin-button {
  align-items: center;
  justify-content: center;
 }
-.gift-card-amt > ul {
+.gift-card-amt>ul {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
 }
 .gift-card-amt ul li a,
-.gift-card-amt ul li label > span {
+.gift-card-amt ul li label>span {
  font-size: 14px;
 }
-.gift-card-amt ul li input[type="radio"]:checked + label {
+.gift-card-amt ul li input[type="radio"]:checked+label {
  background: #0070bd;
  color: #fff;
 }
@@ -3511,6 +3629,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .gift-card-amt ul li label {
  padding: 1.5rem 2rem;
 }
 .tooltip-wrapper {
  position: relative;
 }
@@ -3532,37 +3651,44 @@ input[type="number"]::-webkit-outer-spin-button {
 .tooltip-btn {
  position: relative;
 }
 .tooltip-btn .image-container {
  width: 12px;
  display: inline-block;
 }
-.tooltip-btn:hover + .tooltips {
+.tooltip-btn:hover+.tooltips {
  display: block;
 }
 .tooltip-btn:hover {
  cursor: pointer;
 }
 .cl-gry {
  color: #808080 !important;
 }
 .gift-card-rt .back-btn {
  margin-bottom: 1rem;
 }
 .gift-card-rt .title {
  font-size: 1.667vw;
  margin-bottom: 0.5rem;
 }
 .gift-card-amt {
  margin: 1rem 0;
 }
 .gift-card-rt .form-01 .form-control {
  border: 1px solid #000;
  border-radius: 9px;
 }
-.gift-card-rt .form-01 .link-a {
-}
+.gift-card-rt .form-01 .link-a {}
 .gift-card-session .result-box {
  text-align: center;
  min-height: 390px;
@@ -3571,6 +3697,7 @@ input[type="number"]::-webkit-outer-spin-button {
  align-items: center;
  justify-content: center;
 }
 .gift-card-session .result-box p {
  font-size: 32px;
  line-height: 40px;
@@ -3583,6 +3710,7 @@ input:disabled {
  color: -internal-light-dark(rgb(84, 84, 84), rgb(170, 170, 170)) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
 }
 img {
  transition: all 0.6s ease-out;
 }
@@ -3591,6 +3719,7 @@ img:hover {
  transform: scale(1.02);
  transition: all 0.6s ease-out;
 }
 .navbar-expand-lg .navbar-nav .nav-link.gift-card .image {
  display: block;
  animation: scale1 4s infinite;
@@ -3598,6 +3727,7 @@ img:hover {
  overflow: hidden;
  padding: 0.1rem !important;
 }
 @keyframes scale1 {
  0% {
    transform: scale(0.9);
@@ -3625,6 +3755,7 @@ img:hover {
    transform: scale(1);
  }
 }
 .get-in-touch-session .rt-banner .image {
  display: block;
  animation: scale2 4s infinite;
@@ -3632,17 +3763,20 @@ img:hover {
  overflow: hidden;
  padding: 1.5rem !important;
 }
 .founder-session .f-img .image {
  display: block;
  animation: scale2 4s infinite;
  transition: all 0.6s ease-out;
  overflow: hidden;
 }
 .heading03 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
 }
 /* .form-container .upload-files{
  display: inline-block;
    width: 102px;
@@ -3667,6 +3801,7 @@ img:hover {
    padding-top: 2rem; */
  height: inherit;
 }
 /* ::-webkit-file-upload-button {
  display: none;
 }
@@ -3676,19 +3811,23 @@ img:hover {
 .form-container .upload-file .anticon.anticon-plus {
  position: absolute;
 }
 .search-icon.btn:hover {
  color: inherit;
  background-color: inherit;
  border-color: inherit;
  box-shadow: none;
 }
 .form-control:focus {
  box-shadow: none;
  border-color: #ced4da;
 }
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip {
  z-index: 10;
 }
 .swiper-nav button {
  margin: 0 !important;
  padding: 0 !important;
@@ -3700,28 +3839,43 @@ img:hover {
 .page-link {
  box-shadow: 0px 2.57px 8.85px 0px #00000026;
 }
 .load-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 4rem;
 }
-.load-more .pagination .page-item {
-}
+.load-more .pagination .page-item {}
 .page-item:not(:first-child) .page-link {
  margin-left: 10px;
 }
 .page-link {
  display: block;
  font-size: 16px;
  border-radius: 5px;
 }
 .see-my-gift-cards-row {
  margin-bottom: 4rem;
 }
-.browse-experiences-carousal .swiper-slide{
+.browse-experiences-carousal .swiper-slide {
  padding: 1rem;
 }
+.text-trunc-2 {
+  display: -webkit-box;
+  max-width: 100%;
+  height: 35px; /* this height is tempary while content is getting larger than 2 lines then remove it*/
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 @media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    margin: 0 2rem;
@@ -3761,6 +3915,7 @@ img:hover {
    color: #000;
    font-weight: bold;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    margin: 0 2rem;
    font-size: 0.833vw;
@@ -3800,56 +3955,69 @@ img:hover {
    display: none !important;
  }
 }
 @media only screen and (max-width: 1440px) and (min-width: 1279px) {
  .availability-wrappper li {
    width: 31%;
  }
  .let-discover-session.let-discover-listing-session .swiper-nav,
  .home_nav {
    width: 108%;
  }
 }
 @media (max-width: 1023px) {
  .browse-experiences-item .img-wrapper .image-container .image {
    height: 120px !important;
  }
  .footer-link h3 {
    font-size: 1.85vw;
    line-height: 1.85vw;
-}
+  }
  .gift-card-amt ul li a,
  .gift-card-amt ul li label {
    padding: 1.5rem 2.8rem;
  }
  .gift-card-lt {
    width: 100%;
    height: 200px;
    padding-right: 0;
  }
  .swiper-nav,
  .home_nav {
    margin-left: -33px;
  }
  .top-btn {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  .swiper-nav,
  .home_nav {
    margin-left: -25px;
  }
  p {
    font-size: 1.3vw;
    line-height: 1.5vw;
  }
  .testimonial-item .name {
    font-size: 1.85vw;
    line-height: 2vw;
    margin-top: 1rem;
  }
  body {
    font-size: 1.264vw !important;
  }
  .product-info .product-name {
    font-size: 20px;
    line-height: 30px;
@@ -3879,147 +4047,186 @@ img:hover {
    margin-right: 0;
  }
 }
 @media (max-width: 991px) {
-  .vendor-signup a{
+  .vendor-signup a {
    min-width: 140px;
  }
 }
 @media (max-width: 767px) {
  .browse-experiences-item .img-wrapper .image-container .image {
    height: 220px !important;
  }
  .subscribe label .btn {
    padding: 2.8vw;
-}
+  }
  footer .subscribe input {
    padding: 2.8vw;
-}
+  }
- .form-container.content-wraaper .bg-white.border-div .profile-img-s{
+  .form-container.content-wraaper .bg-white.border-div .profile-img-s {
    width: 12vw;
  }
  .gift-an-experience-session {
    margin-bottom: 2rem;
  }
  .content-wraaper label {
    margin-top: 1rem;
  }
  .border-div {
    padding: 1.5rem;
  }
  .gift-card-rt .title {
    font-size: 4.667vw;
  }
-  .gift-card-amt > ul {
+  .gift-card-amt>ul {
    grid-gap: 10px;
  }
  .gift-card-amt ul li a,
  .gift-card-amt ul li label {
    padding: 1rem;
  }
  .see-my-gift-cards-row {
    text-align: center;
    margin-bottom: 3rem;
  }
  .card-booking-img.bgGrey {
    padding: 4rem 4rem;
  }
  .rightContent h2 {
    font-size: 4.172vw;
    line-height: 4.172vw;
  }
  .sub-categories {
    margin-bottom: 1rem;
  }
  .header-search .rbt .rbt-input-main {
    font-size: 1rem;
  }
  .blog-detail-inner-session h2 {
    font-size: 4.867vw;
    line-height: 6.967vw;
    margin-bottom: 1rem;
  }
  .blog-item .top-rated {
    font-size: 2.8vw;
  }
  .blog-item .info .read-more .btn {
    font-size: 3vw;
    line-height: 3vw;
  }
  .blog-item .info .title {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
  p {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  .product-info .location {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
  .browse-experiences-item .info .discription {
    font-size: 0.813rem;
    line-height: 1rem;
  }
  .browse-experiences-item .info .price {
    font-size: 1rem;
    line-height: 1.15rem;
  }
  body {
    font-size: 0.875rem !important;
  }
  .gift-card-amt ul li a,
-  .gift-card-amt ul li label > span {
+  .gift-card-amt ul li label>span {
    font-size: 12px;
  }
  .gift-card-amt ul li a,
  .gift-card-amt ul li label {
    font-size: 16px;
    height: 70px;
  }
  .s-page-session {
    margin: 3rem 0;
  }
  .accordion-01 .accordion-button {
    font-size: 16px;
    line-height: 20px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .faqs-session {
    padding: 1rem 0 3rem;
  }
  .availability-wrappper li {
    margin: 0.5rem 0.5rem;
    font-size: 14px;
  }
  .availability-wrappper {
    margin-top: 0rem;
  }
  .image-container.btn-gift {
    width: 3vw;
  }
  .box-01 .head {
    font-size: 1rem;
    line-height: 1.2rem;
    padding: 1rem;
  }
  .sub-categories a {
    font-size: 12px;
    padding: 1rem;
    height: 2rem;
    margin-left: 0.5rem;
  }
  .navbar-toggler {
    border: 0;
  }
  .navbar-toggler .navbar-toggler-icon {
    background: url(/images/icons/close_icon.svg) no-repeat !important;
    background-size: 100% !important;
  }
  .navbar-toggler.collapsed .navbar-toggler-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.95' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  .top-rated {
    font-size: 12px;
    display: flex;
@@ -4028,51 +4235,64 @@ img:hover {
    justify-content: center;
    line-height: 15px;
  }
  .discover-swiper-button-prev arrow {
    left: 0;
  }
  .navbar-collapse form {
    margin-right: 0 !important;
  }
  .header-search {
    width: 100%;
  }
  .navbar-expand-lg .navbar-nav {
    padding-bottom: 1rem;
  }
  .navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
    width: 18px;
    margin-left: 5px;
  }
  .header_wrap .navbar-expand-lg .navbar-nav .nav-link {
    display: flex;
    align-items: center;
  }
  .navbar-collapse {
    margin-top: 1rem;
  }
  .copyright {
    font-size: 14px;
  }
  .let-discover-session.let-discover-listing-session .swiper-nav,
  .home_nav {
    width: 100%;
  }
  .swiper-nav,
  .home_nav {
    left: 0;
    width: 100%;
    margin-left: 0;
  }
  .home-banner .swiper-button-prev,
  .home-banner .swiper-button-next {
    display: none;
  }
  .product-info .price {
    font-size: 3.883vw;
    line-height: 3.883vw;
    margin-bottom: 1rem;
  }
  .top-btn {
    margin-bottom: 1rem;
    margin-top: 1rem;
@@ -4080,39 +4300,50 @@ img:hover {
    align-items: center;
    justify-content: space-between;
  }
  .top-btn button {
    width: 100%;
  }
  .header-search .search-icon .image-container {
    width: 3.585vw;
  }
-  .header-search > .form-control {
+  .header-search>.form-control {
    font-size: 3vw;
    margin-bottom: 1rem;
  }
  .btn {
    font-size: 3vw;
  }
  .navbar-brand {
    width: 22.927vw;
  }
  .info .top-name .title {
    font-size: 4vw;
  }
  .home-banner .banner-txt .disc {
    font-size: 3vw;
    line-height: 4vw;
  }
-  .home-banner-bg > span > span .image {
+  .home-banner-bg>span>span .image {
    border-radius: 0 0 20px 20px;
  }
  .gift-card-rt .title,
  .gift-card-rt .cl-gry {
    padding-left: 1rem;
  }
  .gift-card-rt .back-btn {
    display: none;
  }
  .gift-card-amt ul {
    text-align: center;
  }
@@ -4124,12 +4355,15 @@ img:hover {
    border-top: 2px solid #e9e9e9;
    margin-top: 4rem;
  }
  .gift-card-lt {
    margin: 0 auto;
  }
  .d-table-cell {
    padding-top: 2rem;
  }
  .filter-dd {
    justify-content: space-between;
    padding: 0 0 2rem;
@@ -4193,10 +4427,12 @@ img:hover {
    height: 250px;
    margin-bottom: 2rem;
  }
  .our-mission .inner .title {
    font-size: 20px;
    line-height: 20px;
  }
  .page-title-one {
    background: url(/images/banner/about-us-m.png) no-repeat;
  }
@@ -4213,7 +4449,7 @@ img:hover {
    top: 40%;
  }
-  .swiper-nav button .image-container > span {
+  .swiper-nav button .image-container>span {
    width: 10px !important;
  }
@@ -4230,21 +4466,26 @@ img:hover {
  .form-select {
    font-size: 0.9rem;
  }
  .data-filters-item label {
    font-size: 0.8rem;
    line-height: 1rem;
  }
  .container-fluid {
    max-width: 100vw;
  }
  .home-banner-bg::before {
    border-radius: 0 0 1rem 1rem;
  }
  .let-discover-carousal a .title {
    padding: 1rem;
    font-size: 14px;
    line-height: 16px;
  }
  footer .subscribe input {
    width: 67%;
  }
@@ -4341,12 +4582,15 @@ img:hover {
    height: 55px;
    padding: 0.8rem;
  }
  .searchbar-h .rbt-menu.dropdown-menu.show {
    top: 0.8rem !important;
  }
-  .rbt-menu > .dropdown-item {
+  .rbt-menu>.dropdown-item {
    font-size: 13px;
  }
  .searchbar-h .search-icon {
    right: 8px;
    top: 12px;