Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 4e0139fe by jaymehta
Options

gift card

1 parent 9db09d5b
Inline Side-by-side
Showing 5 changed files with 109 additions and 54 deletions
components/gift-card/GiftCard.js
......@@ -10,6 +10,7 @@ import { Loader } from "react-bootstrap-typeahead";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { useRouter } from "next/router";
import { Button } from "react-bootstrap";
import { postGiftCard } from "../../redux/actions/giftCardAction";
// import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({
......@@ -39,11 +40,12 @@ const GiftCard = () => {
// dispatch(getLoggedInVendor());
}, []);
// const {loadedUser} = useSelector(state => state.loadedUser)
// const { endUser } = useSelector(state => state.endUser);
console.log("endUser", session);
const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser);
const [isStep1, setIsStep1] = useState(true);
const [amount, setAmount] = useState(0);
const [custom, setcustom] = useState();
const [form1Values, setvalues] = useState();
const [isStep2, setIsStep2] = useState(false);
const [isResult, setIsResult] = useState(false);
......@@ -301,6 +303,7 @@ const GiftCard = () => {
}
};
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-user/verify-gift-card-otp`, data, config);
setvalues({ ...values, amount });
console.log("response", response.data);
setloading(false);
console.log(values);
......@@ -350,8 +353,8 @@ const GiftCard = () => {
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<Form action="" className="form-01">
<div className="title">We emailed you a 4-digit code</div>
<div className="cl-gry">Please enter it below to create or login into your account:</div>
{/* <div className="cl-gry">Please enter it below to create or login into your account:</div> */}
{console.log("values", form1Values)}
<div className="row mt-4">
<div className="col-md-12 mb-4">
<label htmlFor="">Enter 4-Digit Code</label>
......@@ -381,6 +384,19 @@ const GiftCard = () => {
toast.error(res.data.message);
}
if (res.data.ok) {
const response = await postGiftCard({
data: {
senderEmail: form1Values.email,
senderName: form1Values.email,
receiverEmail: form1Values.receiverEmail,
receiverName: form1Values.receiverEmail,
amount: form1Values.amount,
note: form1Values.message,
endUser: endUser.id,
status: "new"
}
});
console.log("response", response);
toast.success("OTP verified!");
}
}}
......
components/user/MyGiftCard.js
import Image from "next/image";
import React, { Fragment } from "react";
import React, { Fragment, useEffect } from "react";
import { Button } from "react-bootstrap";
import { cleanImage, renderImage } from "../../services/imageHandling";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { getGiftCard } from "../../redux/actions/giftCardAction";
const MyGiftCard = () => {
const { giftCard } = useSelector(state => state.giftCard);
console.log("giftCard >>>>>", giftCard)
const dispatch = useDispatch();
const { giftCard } = useSelector(state => state.giftCard);
const { endUser } = useSelector(state => state.endUser);
useEffect(() => {
if (endUser) {
dispatch(getGiftCard(endUser.id));
}
}, [endUser]);
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Gift Card</h2>
<div className="row">
{giftCard?.length && giftCard.map((data, index) => (
<div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img bgGrey">
<span className="image-container">
<Image src="/images/zango-logo.svg" layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content details-wrapper">
<p className="details">Details</p>
<div className="d-flex align-items-start justify-content-between">
<div className="details-div">
<p>Sender’s Email Id</p>
<p>{data.attributes.senderEmail}</p>
</div>
<div className="details-div">
<p>Receiver’s Email Id</p>
<p>{data.attributes.receiverEmail}</p>
</div>
</div>
<div className="details-div">
<p>Gift Amount</p>
<p>${data.attributes.amount}</p>
</div>
</div>
</div>
</div>
))}
console.log("endUser", endUser);
console.log("giftCard", giftCard);
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Gift Card</h2>
<div className="row">
{giftCard?.length > 0 &&
giftCard.map((data, index) => (
<div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img bgGrey">
<span className="image-container">
<Image src="/images/zango-logo.svg" layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content details-wrapper">
<p className="details">Details</p>
<div className="d-flex align-items-start justify-content-between">
<div className="details-div">
<p>Sender’s Email Id</p>
<p>{data.attributes.senderEmail}</p>
</div>
<div className="details-div">
<p>Receiver’s Email Id</p>
<p>{data.attributes.receiverEmail}</p>
</div>
</div>
<div className="details-div">
<p>Gift Amount</p>
<p>${data.attributes.amount}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</Fragment>
)
}
</div>
</div>
</div>
</Fragment>
);
};
export default MyGiftCard;
\ No newline at end of file
export default MyGiftCard;
pages/user/giftcard/index.js
......@@ -16,7 +16,7 @@ export default function UserGiftCardPage () {
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try {
await store.dispatch(getGiftCard())
// await store.dispatch(getGiftCard())
return {
props: {},
......
redux/actions/giftCardAction.js
import axios from "axios";
import { getSession } from "next-auth/react";
import qs from "qs";
import { GET_GIFTCARD_FAIL, GET_GIFTCARD_REQUEST, GET_GIFTCARD_SUCCESS } from "../constants/giftCardConstants";
export const getGiftCard = () => async dispatch => {
export const getGiftCard = id => async dispatch => {
try {
dispatch({
type: GET_GIFTCARD_REQUEST
});
......@@ -15,7 +15,12 @@ export const getGiftCard = () => async dispatch => {
}
};
const query = {
populate: ["image"]
populate: ["image", "endUser"],
filters: {
endUser: {
id: { $eq: id }
}
}
};
const queryString = qs.stringify(query, {
......@@ -38,3 +43,26 @@ export const getGiftCard = () => async dispatch => {
});
}
};
export const postGiftCard = async ({ data }) => {
try {
const session = await getSession();
if (!session) {
return;
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
// const data = {
// data
// };
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`, { data }, config);
return response.data;
} catch (error) {
console.log("error while posting gift card");
}
};
redux/actions/userActions.js
......@@ -402,12 +402,12 @@ export const updateActivityStatusAdmin = async ({ status, activityId, rejectionR
export const getCurrentEndUser = () => async dispatch => {
try {
console.log("here action");
// console.log("here action");
const session = await getSession();
if (!session) {
return;
}
console.log("session action", session);
// console.log("session action", session);
dispatch({
type: GET_END_USER_REQUEST
});
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!