Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 1c7ad208 by jaymehta
Options

share widget

1 parent 8c3cbf8e
Inline Side-by-side
Showing 7 changed files with 208 additions and 56 deletions
components/detail/DetailInfo.js
......@@ -15,6 +15,7 @@ import { useRouter } from "next/router.js";
import Link from "next/link.js";
import { checkWishlist, toggleWishlist } from "../../redux/actions/activityAction.js";
import WishlistComponent from "./WIshlistComponent.js";
import ShareWidget from "./ShareWidget.js";
const DetailInfo = ({ activityById }) => {
const router = useRouter();
......@@ -29,6 +30,7 @@ const DetailInfo = ({ activityById }) => {
const [quantity, setquantity] = useState();
const [loginModal, setloginModal] = useState(false);
const [enquiryModal, setenquiryModal] = useState(false);
const [showshareWidget, setshowshareWidget] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser);
useEffect(() => {
......@@ -63,7 +65,15 @@ const DetailInfo = ({ activityById }) => {
{endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />}
<a href="#" className="add-to-forwardt">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
<Image
onClick={() => {
setshowshareWidget(true);
}}
layout="fill"
alt=""
className="image img-fluid"
src="/images/icons/forward.svg"
/>
</span>
</a>
</div>
......@@ -108,9 +118,7 @@ const DetailInfo = ({ activityById }) => {
${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>}
</div>
<div className="mb-4">{activityById.data.attributes.description}</div>
<div className="location">
Location & Address
</div>
<div className="location">Location & Address</div>
{/* <div className="mb-2">Chelsea </div> */}
<div className="">{activityById.data.attributes.address}</div>
<div className="btn-row">
......@@ -197,6 +205,17 @@ const DetailInfo = ({ activityById }) => {
</div>
</div>
)} */}
<Modal
show={showshareWidget}
onHide={() => {
setshowshareWidget(false);
}}
>
<Modal.Header closeButton>Share on social media</Modal.Header>
<Modal.Body>
<ShareWidget />
</Modal.Body>
</Modal>
{activityById && (
<Modal
show={enquiryModal}
......
components/detail/ShareWidget.js 0 → 100644
import { CopyTwoTone } from "@ant-design/icons";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import {
FacebookIcon,
FacebookShareButton,
FacebookShareCount,
LinkedinIcon,
LinkedinShareButton,
TwitterShareButton,
WhatsappIcon,
WhatsappShareButton,
XIcon
} from "react-share";
const ShareWidget = () => {
const [shareUrl, setshareUrl] = useState("asd");
const [title, settitle] = useState("");
const [copy, setcopy] = useState({ copied: false });
const router = useRouter();
useEffect(() => {
console.log(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}${router.asPath}`);
setshareUrl(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}${router.asPath}`);
}, []);
return (
<div className=" d-flex ">
<div className="Demo__container">
<div className="Demo__some-network">
<FacebookShareButton url={shareUrl} className="Demo__some-network__share-button">
<FacebookIcon size={32} round />
</FacebookShareButton>
</div>
<div className="Demo__some-network">
<WhatsappShareButton url={shareUrl} title={title} separator=":: " className="Demo__some-network__share-button">
<WhatsappIcon size={32} round />
</WhatsappShareButton>
</div>
<div className="Demo__some-network">
<LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
<LinkedinIcon size={32} round />
</LinkedinShareButton>
</div>
<div className="Demo__some-network">
<TwitterShareButton url={shareUrl} title={title} className="Demo__some-network__share-button">
<XIcon size={32} round />
</TwitterShareButton>
</div>
</div>
<div>
<CopyToClipboard text={shareUrl} onCopy={() => setcopy({ copied: true })}>
<span>
{!copy.copied && (
<div>
<CopyTwoTone /> Copy to clipboard
</div>
)}
{copy.copied ? <span>Copied to clipboard!</span> : null}
</span>
</CopyToClipboard>
</div>
</div>
);
};
export default ShareWidget;
components/vendor/ActivityDetails.js
......@@ -141,6 +141,8 @@ const ActivityDetails = ({ isUpdate }) => {
const [showImageUploadModal, setshowImageUploadModal] = useState(false);
const [imagesArrayComponent, setimagesArrayComponent] = useState([]);
const [displayImage, setdisplayImage] = useState();
const [termsConditions, settermsConditions] = useState();
const [cancellationPolicy, setCancellationPolicy] = useState();
useEffect(() => {
// dispatch(loadUser());
......@@ -332,6 +334,9 @@ const ActivityDetails = ({ isUpdate }) => {
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
setdisplayImage(activityById?.data.attributes.image?.data.id);
setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id);
settermsConditions(activityById?.data.attributes.termsConditions?.data?.id);
}
}, []);
// useEffect(() => {
......@@ -1043,26 +1048,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="input-group">
<label>Cancellation Policy</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id={`cancellationPolicyFile`}
name={`cancellationPolicyFile`}
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue(`cancellationPolicyFile`, file);
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`cancellationPolicyFile`}>
Upload
</label>
<UploadImageCustom isUpdate={isUpdate} setImage={setCancellationPolicy} populatedImages={activityById?.data.attributes.termsConditions} />
</div>
{values.cancellationPolicyFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
......@@ -1081,26 +1067,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="input-group">
<label>Terms & Conditions</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id={`termsConditionsFile`}
name={`termsConditionsFile`}
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue(`termsConditionsFile`, file);
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`termsConditionsFile`}>
Upload
</label>
<UploadImageCustom isUpdate={isUpdate} setImage={settermsConditions} populatedImages={activityById?.data.attributes.cancellationPolicy} />
</div>
{values.termsConditionsFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
......@@ -1121,8 +1088,8 @@ const ActivityDetails = ({ isUpdate }) => {
</div>
<div className="row d-flex mt-4">
<p className="textH">Add display image</p>
{console.log(displayImage)}
<UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes} />
{/* {console.log(displayImage)} */}
<UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes.image} />
<hr />
</div>
<div className="row d-flex ">
......
components/vendor/UploadImageCustom.js
......@@ -36,7 +36,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
if (!populatedImages) {
return;
}
const initialImages = transformImageData([{ url: cleanImage(populatedImages.image.data?.attributes), deleteId: populatedImages.image.data?.id, id: populatedImages.id }]);
const initialImages = transformImageData([{ url: cleanImage(populatedImages.data?.attributes), deleteId: populatedImages.data?.id, id: populatedImages.id }]);
if (populatedImages) {
setFileList(initialImages);
}
......@@ -118,7 +118,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
message.error(`Failed to remove ${file.name}. Image ID not found.`);
return;
}
newFileId();
setImage()
setFileList([]);
try {
await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
......
package.json
......@@ -26,6 +26,7 @@
"react": "18.2.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-typeahead": "^6.3.2",
"react-copy-to-clipboard": "^5.1.0",
"react-datepicker": "^4.8.0",
"react-dom": "18.2.0",
"react-highlight-words": "^0.20.0",
......@@ -41,6 +42,7 @@
"react-player": "^2.11.0",
"react-redux": "^8.0.2",
"react-select": "^5.8.0",
"react-share": "^5.1.0",
"react-star-ratings": "^2.3.0",
"react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8",
......
redux/actions/activityAction.js
......@@ -112,7 +112,21 @@ export const getActivitiesByVendor = () => async dispatch => {
}
}
},
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image", "category", "reviews"]
populate: [
"masterMonths",
"subCategory",
"subCategory.category",
"timeSlots",
"masterPincode",
"vendor",
"category",
"imagesComponent",
"imagesComponent.image",
"image",
"termsConditions",
"cancellationPolicy",
"reviews"
]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
......@@ -151,8 +165,21 @@ export const getActivityById = id => async dispatch => {
};
const query = {
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "category", "imagesComponent",
"imagesComponent.image", "image"]
populate: [
"masterMonths",
"subCategory",
"subCategory.category",
"timeSlots",
"masterPincode",
"vendor",
"category",
"imagesComponent",
"imagesComponent.image",
"image",
"termsConditions",
"cancellationPolicy",
"reviews"
]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
......@@ -243,7 +270,21 @@ export const getActivitiesForAdmin =
}
}
},
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image", "category"]
populate: [
"masterMonths",
"subCategory",
"subCategory.category",
"timeSlots",
"masterPincode",
"vendor",
"category",
"imagesComponent",
"imagesComponent.image",
"image",
"termsConditions",
"cancellationPolicy",
"reviews"
]
};
const queryString = qs.stringify(query, {
......@@ -292,7 +333,21 @@ export const getActivitiesForEndUser = () => async dispatch => {
// }
// }
// },
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image"]
populate: [
"masterMonths",
"subCategory",
"subCategory.category",
"timeSlots",
"masterPincode",
"vendor",
"category",
"imagesComponent",
"imagesComponent.image",
"image",
"reviews",
"termsConditions",
"cancellationPolicy"
]
};
const queryString = qs.stringify(query, {
......@@ -368,7 +423,19 @@ export const getActivitiesByFilters =
// $and: [{ fromDate: { $gte: "2024-05-05" } }, { toDate: { $lte: toDate } }]
// $or: subCategory
},
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image", "category", "reviews"]
populate: [
"masterMonths",
"subCategory",
"subCategory.category",
"timeSlots",
"masterPincode",
"vendor",
"image",
"category",
"reviews",
"termsConditions",
"cancellationPolicy"
]
// sort: ["pricePerPerson:asc"]
};
if (category) {
......
yarn.lock
......@@ -1586,7 +1586,7 @@ copy-descriptor@^0.1.0:
resolved "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz"
integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
copy-to-clipboard@^3.3.3:
copy-to-clipboard@^3.3.1, copy-to-clipboard@^3.3.3:
version "3.3.3"
resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
......@@ -1723,6 +1723,13 @@ debounce@^1.1.0:
resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
debug@^2.1.3:
version "2.6.9"
resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
dependencies:
ms "2.0.0"
debug@^2.2.0:
version "2.6.9"
resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
......@@ -3241,6 +3248,13 @@ json5@^1.0.1:
dependencies:
minimist "^1.2.0"
jsonp@^0.2.1:
version "0.2.1"
resolved "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz"
integrity sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==
dependencies:
debug "^2.1.3"
jss-camel-case@^6.0.0:
version "6.1.0"
resolved "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz"
......@@ -4769,6 +4783,14 @@ react-chartjs-2@2.9.0:
lodash "^4.17.4"
prop-types "^15.5.8"
react-copy-to-clipboard@^5.1.0:
version "5.1.0"
resolved "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz"
integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
dependencies:
copy-to-clipboard "^3.3.1"
prop-types "^15.8.1"
react-datepicker@^4.8.0:
version "4.8.0"
resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz"
......@@ -5074,6 +5096,14 @@ react-select@^5.8.0:
react-transition-group "^4.3.0"
use-isomorphic-layout-effect "^1.1.2"
react-share@^5.1.0:
version "5.1.0"
resolved "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz"
integrity sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==
dependencies:
classnames "^2.3.2"
jsonp "^0.2.1"
react-star-ratings@^2.3.0:
version "2.3.0"
resolved "https://registry.npmjs.org/react-star-ratings/-/react-star-ratings-2.3.0.tgz"
......@@ -5147,7 +5177,7 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.2:
loose-envify "^1.4.0"
prop-types "^15.6.2"
react@*, "react@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^15.5.x || ^16.x || ^17.x || ^18.x", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.9.0 || ^17 || ^18", "react@^17.0.2 || ^18", "react@^17.0.2 || ^18.0.0-0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=0.14.0, "react@>=0.14.0 || ^15.6.1 || ^16.0.0", react@>=15, react@>=15.0.0, react@>=16, react@>=16.0.0, react@>=16.11.0, react@>=16.14.0, react@>=16.3.0, react@>=16.4.0, react@>=16.6.0, react@>=16.8.0, "react@>=16.8.6 || ^17.0.0 || ^18.0.0", react@>=16.9.0, react@18.2.0:
react@*, "react@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^15.3.0 || 16 || 17 || 18", "react@^15.5.x || ^16.x || ^17.x || ^18.x", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.9.0 || ^17 || ^18", "react@^17 || ^18", "react@^17.0.2 || ^18", "react@^17.0.2 || ^18.0.0-0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=0.14.0, "react@>=0.14.0 || ^15.6.1 || ^16.0.0", react@>=15, react@>=15.0.0, react@>=16, react@>=16.0.0, react@>=16.11.0, react@>=16.14.0, react@>=16.3.0, react@>=16.4.0, react@>=16.6.0, react@>=16.8.0, "react@>=16.8.6 || ^17.0.0 || ^18.0.0", react@>=16.9.0, react@18.2.0:
version "18.2.0"
resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!