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"; ...@@ -10,6 +10,7 @@ import { Loader } from "react-bootstrap-typeahead";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions"; import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { postGiftCard } from "../../redux/actions/giftCardAction";
// import { getCurrentEndUser } from "../../redux/actions/userActions"; // import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
...@@ -39,11 +40,12 @@ const GiftCard = () => { ...@@ -39,11 +40,12 @@ const GiftCard = () => {
// dispatch(getLoggedInVendor()); // dispatch(getLoggedInVendor());
}, []); }, []);
// const {loadedUser} = useSelector(state => state.loadedUser) // const {loadedUser} = useSelector(state => state.loadedUser)
// const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
console.log("endUser", session); console.log("endUser", endUser);
const [isStep1, setIsStep1] = useState(true); const [isStep1, setIsStep1] = useState(true);
const [amount, setAmount] = useState(0); const [amount, setAmount] = useState(0);
const [custom, setcustom] = useState(); const [custom, setcustom] = useState();
const [form1Values, setvalues] = useState();
const [isStep2, setIsStep2] = useState(false); const [isStep2, setIsStep2] = useState(false);
const [isResult, setIsResult] = useState(false); const [isResult, setIsResult] = useState(false);
...@@ -301,6 +303,7 @@ const GiftCard = () => { ...@@ -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); 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); console.log("response", response.data);
setloading(false); setloading(false);
console.log(values); console.log(values);
...@@ -350,8 +353,8 @@ const GiftCard = () => { ...@@ -350,8 +353,8 @@ const GiftCard = () => {
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => ( {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<Form action="" className="form-01"> <Form action="" className="form-01">
<div className="title">We emailed you a 4-digit code</div> <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="row mt-4">
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<label htmlFor="">Enter 4-Digit Code</label> <label htmlFor="">Enter 4-Digit Code</label>
...@@ -381,6 +384,19 @@ const GiftCard = () => { ...@@ -381,6 +384,19 @@ const GiftCard = () => {
toast.error(res.data.message); toast.error(res.data.message);
} }
if (res.data.ok) { 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!"); toast.success("OTP verified!");
} }
}} }}
......
components/user/MyGiftCard.js
import Image from "next/image"; import Image from "next/image";
import React, { Fragment } from "react"; import React, { Fragment, useEffect } from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { cleanImage, renderImage } from "../../services/imageHandling"; 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 MyGiftCard = () => {
const { giftCard } = useSelector(state => state.giftCard); const dispatch = useDispatch();
console.log("giftCard >>>>>", giftCard) const { giftCard } = useSelector(state => state.giftCard);
const { endUser } = useSelector(state => state.endUser);
useEffect(() => {
if (endUser) {
dispatch(getGiftCard(endUser.id));
}
}, [endUser]);
return ( console.log("endUser", endUser);
<Fragment> console.log("giftCard", giftCard);
<div className="container">
<div className="row"> return (
<div className="col-12 col-lg-12 form-container content-wraaper"> <Fragment>
<h2 className="px-2 px-lg-0">My Gift Card</h2> <div className="container">
<div className="row"> <div className="row">
{giftCard?.length && giftCard.map((data, index) => ( <div className="col-12 col-lg-12 form-container content-wraaper">
<div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${index}`}> <h2 className="px-2 px-lg-0">My Gift Card</h2>
<div className="card-booking"> <div className="row">
<div className="card-booking-img bgGrey"> {giftCard?.length > 0 &&
<span className="image-container"> giftCard.map((data, index) => (
<Image src="/images/zango-logo.svg" layout="fill" className="image" /> <div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${index}`}>
</span> <div className="card-booking">
</div> <div className="card-booking-img bgGrey">
<div className="card-booking-content details-wrapper"> <span className="image-container">
<p className="details">Details</p> <Image src="/images/zango-logo.svg" layout="fill" className="image" />
<div className="d-flex align-items-start justify-content-between"> </span>
<div className="details-div"> </div>
<p>Sender’s Email Id</p> <div className="card-booking-content details-wrapper">
<p>{data.attributes.senderEmail}</p> <p className="details">Details</p>
</div> <div className="d-flex align-items-start justify-content-between">
<div className="details-div"> <div className="details-div">
<p>Receiver’s Email Id</p> <p>Sender’s Email Id</p>
<p>{data.attributes.receiverEmail}</p> <p>{data.attributes.senderEmail}</p>
</div> </div>
</div> <div className="details-div">
<div className="details-div"> <p>Receiver’s Email Id</p>
<p>Gift Amount</p> <p>{data.attributes.receiverEmail}</p>
<p>${data.attributes.amount}</p> </div>
</div> </div>
</div> <div className="details-div">
</div> <p>Gift Amount</p>
</div> <p>${data.attributes.amount}</p>
))}
</div> </div>
</div>
</div> </div>
</div> </div>
))}
</div> </div>
</Fragment> </div>
) </div>
} </div>
</Fragment>
);
};
export default MyGiftCard;
\ No newline at end of file \ No newline at end of file
export default MyGiftCard;
pages/user/giftcard/index.js
...@@ -16,7 +16,7 @@ export default function UserGiftCardPage () { ...@@ -16,7 +16,7 @@ export default function UserGiftCardPage () {
/** For server side rendering */ /** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try { try {
await store.dispatch(getGiftCard()) // await store.dispatch(getGiftCard())
return { return {
props: {}, props: {},
......
redux/actions/giftCardAction.js
import axios from "axios"; import axios from "axios";
import { getSession } from "next-auth/react";
import qs from "qs"; import qs from "qs";
import { GET_GIFTCARD_FAIL, GET_GIFTCARD_REQUEST, GET_GIFTCARD_SUCCESS } from "../constants/giftCardConstants"; 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 { try {
dispatch({ dispatch({
type: GET_GIFTCARD_REQUEST type: GET_GIFTCARD_REQUEST
}); });
...@@ -15,7 +15,12 @@ export const getGiftCard = () => async dispatch => { ...@@ -15,7 +15,12 @@ export const getGiftCard = () => async dispatch => {
} }
}; };
const query = { const query = {
populate: ["image"] populate: ["image", "endUser"],
filters: {
endUser: {
id: { $eq: id }
}
}
}; };
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
...@@ -38,3 +43,26 @@ export const getGiftCard = () => async dispatch => { ...@@ -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 ...@@ -402,12 +402,12 @@ export const updateActivityStatusAdmin = async ({ status, activityId, rejectionR
export const getCurrentEndUser = () => async dispatch => { export const getCurrentEndUser = () => async dispatch => {
try { try {
console.log("here action"); // console.log("here action");
const session = await getSession(); const session = await getSession();
if (!session) { if (!session) {
return; return;
} }
console.log("session action", session); // console.log("session action", session);
dispatch({ dispatch({
type: GET_END_USER_REQUEST 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!