Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ae85b911 by Ravindra Kanojiya
Options

gift card api call

1 parent e8a09a03
Expand all
Inline Side-by-side
Showing 15 changed files with 224 additions and 46 deletions
components/detail/DetailGallery.js
......@@ -2,8 +2,14 @@ import React, { useEffect, useState } from "react";
import ImageGallery from "react-image-gallery";
import Image from "next/image";
import { cleanImage } from "../../services/imageHandling";
import { useSelector } from "react-redux";
import WishlistComponent from "./WIshlistComponent";
import { Modal } from "react-bootstrap";
import ShareWidget from "./ShareWidget";
const DetailGallery = ({ activityById }) => {
const { endUser } = useSelector(state => state.endUser);
const [showshareWidget, setshowshareWidget] = useState(false);
console.log("activityById here", activityById);
// const images = [
......@@ -53,14 +59,18 @@ const DetailGallery = ({ activityById }) => {
<div className="top-row">
<div className="most-booked">Most Booked</div>
<div className="wishlist-share">
<a href="#" className="add-to-wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
</span>
</a>
{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>
......@@ -79,6 +89,17 @@ const DetailGallery = ({ activityById }) => {
</div>
</div>
)}
<Modal
show={showshareWidget}
onHide={() => {
setshowshareWidget(false);
}}
>
<Modal.Header closeButton>Share on social media</Modal.Header>
<Modal.Body>
<ShareWidget />
</Modal.Body>
</Modal>
</>
);
};
......
components/detail/ShareWidget.js
......@@ -25,25 +25,25 @@ const ShareWidget = () => {
}, []);
return (
<div className=" d-flex ">
<div className="Demo__container">
<div className="Demo__some-network">
<FacebookShareButton url={shareUrl} className="Demo__some-network__share-button">
<div className=" d-flex align-items-center justify-content-between">
<div className="share-social-container">
<div className="share-social-some-network">
<FacebookShareButton url={shareUrl} className="share-social-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">
<div className="share-social-some-network">
<WhatsappShareButton url={shareUrl} title={title} separator=":: " className="share-social-some-network-share-button">
<WhatsappIcon size={32} round />
</WhatsappShareButton>
</div>
<div className="Demo__some-network">
<LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
<div className="share-social-some-network">
<LinkedinShareButton url={shareUrl} className="share-social-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">
<div className="share-social-some-network">
<TwitterShareButton url={shareUrl} title={title} className="share-social-some-network-share-button">
<XIcon size={32} round />
</TwitterShareButton>
</div>
......
components/listing/LetDiscover.js
......@@ -139,7 +139,7 @@ const LetDiscover = ({ categories }) => {
}}
>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes.image.data.attributes)} />
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span>
<div className="title">{data.attributes.name}</div>
</a>
......
components/user/MyGiftCard.js
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { renderImage } from "../../services/imageHandling";
import { cleanImage, renderImage } from "../../services/imageHandling";
import { useSelector } from "react-redux";
const MyGiftCard = () => {
const { giftCard } = useSelector(state => state.giftCard);
console.log("giftCard >>>>>", giftCard)
const giftCardData = [
{
id: "0",
......@@ -35,12 +38,12 @@ const MyGiftCard = () => {
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Gift Card</h2>
<div className="row">
{giftCardData?.length && giftCardData.map((data, index) => (
{giftCard?.length && giftCard.map((data, index) => (
<div className="col-12 col-lg-4" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img bgGrey">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
<Image src={cleanImage(data.attributes.image.data.attributes)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content details-wrapper">
......@@ -48,16 +51,16 @@ const MyGiftCard = () => {
<div className="d-flex align-items-start justify-content-between">
<div className="details-div">
<p>Sender’s Email Id</p>
<p>{data.sender_email}</p>
<p>{data.attributes.senderEmail}</p>
</div>
<div className="details-div">
<p>Receiver’s Email Id</p>
<p>{data.receiver_email}</p>
<p>{data.attributes.receiverEmail}</p>
</div>
</div>
<div className="details-div">
<p>Gift Amount</p>
<p>{data.gift_amount}</p>
<p>{data.attributes.amount}</p>
</div>
</div>
</div>
......
pages/user/giftcard/index.js
import React from "react";
import Layout from "../../../components/layout/Layout";
import MyGiftCard from "../../../components/user/MyGiftCard";
import { getGiftCard } from "../../../redux/actions/giftCardAction";
import { wrapper } from "../../../redux/store";
export default function UserGiftCardPage () {
......@@ -10,3 +12,15 @@ export default function UserGiftCardPage () {
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try {
await store.dispatch(getGiftCard())
return {
props: {},
};
} catch (error) {
}
});
\ No newline at end of file
public/images/icons/wishlist-01.svg
<svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5015 2.47197C15.3399 -0.0758325 19.7262 0.00875068 22.4601 2.74848C25.1942 5.4882 25.2881 9.85304 22.7453 12.6999L12.5002 22.961L2.25532 12.6999C-0.287408 9.85304 -0.19236 5.4813 2.54047 2.74848C5.27639 0.012557 9.65493 -0.0796145 12.5015 2.47197ZM20.7496 4.45554C18.9382 2.64043 16.0137 2.5668 14.1159 4.27039L12.5026 5.71842L10.8885 4.27152C8.98526 2.56555 6.06602 2.6406 4.2493 4.45731C2.4492 6.25742 2.35883 9.14049 4.01774 11.0447L12.5002 19.5406L20.9829 11.0447C22.6425 9.13976 22.5524 6.26218 20.7496 4.45554Z" fill="#424242"/>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 29 29">
<defs>
<style>
.cls-1 {
clip-path: url(#clippath);
}
.cls-2 {
fill: none;
}
.cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-3 {
fill: #000;
}
</style>
<clipPath id="clippath">
<rect class="cls-2" y="2.5" width="29" height="24.4"/>
</clipPath>
</defs>
<g class="cls-1">
<path class="cls-3" d="M29,10.2c0-.5-.1-1.1-.3-1.6-.8-2.8-2.5-4.8-5.4-5.6-3.1-.9-5.8-.2-8.1,2.1-.3.3-.5.6-.8.8-.3-.3-.5-.6-.7-.8-1.2-1.3-2.7-2.1-4.5-2.4-2.8-.3-5.2.5-7.1,2.5C.3,7.2-.3,9.7.1,12.3c.3,1.7,1.1,3.1,2.1,4.5,1.4,1.8,3.1,3.2,4.8,4.7,2.1,1.7,4.1,3.4,6.2,5,.8.6,1.6.7,2.4,0,2.7-2.2,5.4-4.4,8-6.6,1.3-1.1,2.6-2.4,3.5-3.8.9-1.4,1.6-2.8,1.7-4.5,0,0,0-.1,0-.2v-1.2ZM14.5,25.3c0,0-.1,0-.2-.1-2.3-1.9-4.6-3.7-6.9-5.6-1.6-1.3-3.1-2.7-4.3-4.4-1.1-1.6-1.7-3.3-1.4-5.3.3-2.1,1.2-3.8,3.2-4.9,1.8-1,3.7-1.1,5.7-.3,1.1.5,2,1.4,2.7,2.3.1.1.2.3.3.4.5.6,1.3.6,1.8,0,.4-.5.8-1.1,1.3-1.5,1.5-1.5,3.4-2.1,5.6-1.7,2.3.5,3.9,1.9,4.6,4,.9,2.4.5,4.7-1,6.9-.9,1.3-2.1,2.5-3.3,3.6-2.1,1.7-4.2,3.5-6.2,5.2-.6.5-1.2,1-1.8,1.5Z"/>
</g>
</svg>
\ No newline at end of file
public/images/vendor/call (copy).svg 0 → 100644
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="15.5" r="15.5" fill="#0070BD"/>
</svg>
public/images/vendor/call.svg
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="15.5" r="15.5" fill="#0070BD"/>
<path d="M22.75 18.315V20.9671C22.75 21.3608 22.4456 21.6875 22.0529 21.7153C21.7248 21.7384 21.4572 21.75 21.25 21.75C14.6226 21.75 9.25 16.3774 9.25 9.75C9.25 9.54278 9.26159 9.27515 9.28476 8.94713C9.31253 8.55441 9.6392 8.25 10.0329 8.25H12.6851C12.8776 8.25 13.0388 8.39582 13.0581 8.58735C13.0755 8.7593 13.0916 8.89735 13.1066 9.00151C13.2583 10.061 13.5681 11.0695 14.0115 12.0023C14.0827 12.152 14.0363 12.3312 13.9014 12.4275L12.2827 13.5838C13.2681 15.8858 15.1142 17.7319 17.4162 18.7174L18.5703 17.1014C18.6679 16.9649 18.8492 16.918 19.0007 16.9899C19.9334 17.4329 20.9418 17.7425 22.0012 17.8938C22.1047 17.9087 22.2419 17.9246 22.4126 17.9419C22.6042 17.9612 22.75 18.1225 22.75 18.315Z" fill="white"/>
</svg>
redux/actions/giftCardAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { GET_GIFTCARD_FAIL, GET_GIFTCARD_REQUEST, GET_GIFTCARD_SUCCESS } from "../constants/giftCardConstants";
export const getGiftCard = () => async dispatch => {
try {
dispatch({
type: GET_GIFTCARD_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["image"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards?${queryString}`, config);
console.log("response > ", response.data);
dispatch({
type: GET_GIFTCARD_SUCCESS,
payload: response.data
});
console.log("gift card here");
return response.data;
} catch (error) {
dispatch({
type: GET_GIFTCARD_FAIL,
payload: error.response.data
});
}
};
redux/constants/giftCardConstants.js 0 → 100644
export const GET_GIFTCARD_REQUEST = "GET_GIFTCARD_REQUEST"
export const GET_GIFTCARD_SUCCESS = "GET_GIFTCARD_SUCCESS"
export const GET_GIFTCARD_FAIL = "GET_GIFTCARD_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/giftCardReducer.js 0 → 100644
import { GET_GIFTCARD_FAIL, GET_GIFTCARD_REQUEST, GET_GIFTCARD_SUCCESS, CLEAR_ERRORS } from "../constants/giftCardConstants";
export const giftCardReducer = (state = { giftCard: [] }, action) => {
switch (action.type) {
case GET_GIFTCARD_REQUEST:
return {
loading: true
};
case GET_GIFTCARD_SUCCESS:
return {
giftCard: action.payload.data,
// totalCount: action.payload.meta.pagination.total,
// resultsPerPage: action.payload.meta.pagination.pageSize
};
case GET_GIFTCARD_FAIL:
return {
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
redux/reducers/reducers.js
......@@ -12,6 +12,7 @@ import { blogReducer, blogsReducer } from "./blogReducer";
import { getAllHomeBannerReducer } from "./homeBannerReducer";
import { getAllFaqsReducer } from "./faqsReducer";
import { reviewsReducer } from "./reviewsReducers";
import { giftCardReducer } from "./giftCardReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -46,6 +47,7 @@ const reducers = combineReducers({
wishlists: getWishlistsReducer,
faqs: getAllFaqsReducer,
reviews: reviewsReducer,
giftCard: giftCardReducer,
});
export default reducers;
styles/globals.css
......@@ -979,7 +979,8 @@ span.form-error,
.content-wraaper h2 {
color: #000;
font-family: "Sofia Pro Light";
font-size: 28px;
/* font-size: 28px; */
font-size: calc(20px + (28 - 20) * (100vw - 320px) / (1920 - 320));
font-weight: 600;
line-height: normal;
margin-bottom: 30px;
......@@ -1201,20 +1202,20 @@ span.form-error,
.content-div h2 {
font-family: "Sofia Pro Bold";
font-size: 36px;
line-height: 50px;
font-size: calc(20px + (36 - 20) * (100vw - 320px) / (1920 - 320));
line-height: calc(30px + (50 - 30) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
margin-bottom: 20px;
}
.content-div h4 {
font-family: "Sofia Pro Light";
font-size: 30px;
line-height: 37px;
/* font-size: 30px; */
font-size: calc(18px + (30 - 18) * (100vw - 320px) / (1920 - 320));
line-height: calc(30px + (37 - 30) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
margin-bottom: 20px;
}
.business-details::before {
content: "";
border-left: 6px solid #0070bd;
......@@ -1247,8 +1248,9 @@ span.form-error,
.helplist li p,
.business-details p {
font-family: "Sofia Pro Light";
font-size: 18px;
line-height: 20px;
/* font-size: 18px; */
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(16px + (28 - 16) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
text-align: left;
margin-bottom: 0;
......@@ -1368,7 +1370,9 @@ span.form-error,
display: flex;
align-items: center;
}
.sidebar ul li a > span {
flex: 0 0 auto;
}
.sidebar ul li a span {
padding-left: 1rem;
padding-top: 5px;
......@@ -1377,6 +1381,8 @@ span.form-error,
.sidebarContainer .content {
flex: 1;
padding: 2rem 1rem;
flex-grow: 1;
overflow-x: auto;
}
/*-------------------------*/
......@@ -1420,8 +1426,9 @@ span.form-error,
.p3 {
font-family: "Poppins Regular";
font-size: 26px;
line-height: 39px;
/* font-size: 26px; */
font-size: calc(15px + (26 - 15) * (100vw - 320px) / (1920 - 320));
line-height: calc(29px + (39 - 29) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
text-align: center;
color: #000000;
......@@ -1449,7 +1456,9 @@ span.form-error,
color: #ffffff;
border: none;
}
.btnAdd:disabled .image-container .image{
width: 14px !important;
}
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
......@@ -1641,8 +1650,8 @@ span.form-error,
/*--------- orders listing -----------*/
.rightContent h2 {
font-family: "Sofia Pro Bold";
font-size: 32px;
line-height: 40px;
font-size: 1.667vw;
line-height: 2.167vw;
letter-spacing: 0em;
margin-bottom: 0;
}
......@@ -1963,14 +1972,31 @@ span.form-error,
align-items: center;
justify-content: center;
}
.info .rating-wishlist .rating .number{
.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; */
......@@ -3780,13 +3806,14 @@ img:hover {
}
}
@media (max-width: 1023px) {
.swiper-nav, .home_nav {
.swiper-nav,
.home_nav {
margin-left: -33px;
}
}
.top-btn {
margin-bottom: 1rem;
margin-top: 1rem;
}
}
.swiper-nav,
.home_nav {
margin-left: -25px;
......@@ -3834,12 +3861,16 @@ img:hover {
}
@media (max-width: 767px) {
.rightContent h2 {
font-size: 4.172vw;
line-height: 4.172vw;
}
.sub-categories {
margin-bottom: 1rem;
}
}
.header-search .rbt .rbt-input-main {
font-size: 1rem;
}
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
min-width: 40vw;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!