Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 2fb6bccd by jaymehta
Options

.

1 parent eeb7fcd7
Inline Side-by-side
Showing 2 changed files with 158 additions and 33 deletions
components/detail/DetailInfo.js
...@@ -11,8 +11,10 @@ import { useDispatch, useSelector } from "react-redux"; ...@@ -11,8 +11,10 @@ import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { getCurrentEndUser } from "../../redux/actions/userActions.js"; import { getCurrentEndUser } from "../../redux/actions/userActions.js";
import { Loader } from "react-bootstrap-typeahead"; import { Loader } from "react-bootstrap-typeahead";
import { useRouter } from "next/router.js";
const DetailInfo = ({ activityById }) => { const DetailInfo = ({ activityById }) => {
const router = useRouter()
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(getCurrentEndUser()); dispatch(getCurrentEndUser());
...@@ -125,8 +127,10 @@ const DetailInfo = ({ activityById }) => { ...@@ -125,8 +127,10 @@ const DetailInfo = ({ activityById }) => {
> >
{loading ? <Loader /> : "Enquire Now"} {loading ? <Loader /> : "Enquire Now"}
</Button> </Button>
<Button variant="secondary"> <Button onClick={() => {
Gift Now{" "} router.push("/gift-card")
}} variant="secondary">
Gift Now
<span className="image-container btn-gift"> <span className="image-container btn-gift">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" /> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span> </span>
......
components/gift-card/GiftCard.js
...@@ -2,6 +2,13 @@ import Image from "next/image"; ...@@ -2,6 +2,13 @@ import Image from "next/image";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik"; import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
import { useDispatch, useSelector } from "react-redux";
import { getSession } from "next-auth/react";
import axios from "axios";
import { toast } from "react-toastify";
import { Loader } from "react-bootstrap-typeahead";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
// import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
customAmt: Yup.string().required("Full name is required"), customAmt: Yup.string().required("Full name is required"),
...@@ -14,8 +21,26 @@ const validationSchema = Yup.object().shape({ ...@@ -14,8 +21,26 @@ const validationSchema = Yup.object().shape({
let formik1; let formik1;
const GiftCard = () => { const GiftCard = () => {
const dispatch = useDispatch();
// useEffect(() => {
// dispatch(getCurrentEndUser());
// }, []);
const [session, setSession] = useState(null);
const [loading, setloading] = useState(null);
useEffect(() => {
const fetchSession = async () => {
setSession(await getSession());
};
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
// const {loadedUser} = useSelector(state => state.loadedUser)
// const { endUser } = useSelector(state => state.endUser);
console.log("endUser", session);
const [isStep1, setIsStep1] = useState(true); const [isStep1, setIsStep1] = useState(true);
const [amount, setAmount] = useState(0); const [amount, setAmount] = useState(0);
const [custom, setcustom] = useState(0);
const [isStep2, setIsStep2] = useState(false); const [isStep2, setIsStep2] = useState(false);
const [isResult, setIsResult] = useState(false); const [isResult, setIsResult] = useState(false);
...@@ -64,10 +89,6 @@ const GiftCard = () => { ...@@ -64,10 +89,6 @@ const GiftCard = () => {
// validationSchema={validationSchema} // validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => { onSubmit={(values, { setSubmitting }) => {
// Handle form submission here // Handle form submission here
console.log(values);
setSubmitting(false);
setIsStep2(true);
setIsStep1(false);
}} }}
> >
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => ( {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
...@@ -77,52 +98,113 @@ const GiftCard = () => { ...@@ -77,52 +98,113 @@ const GiftCard = () => {
<div className="gift-card-amt"> <div className="gift-card-amt">
<ul> <ul>
<li> <li>
<input name="amt" id="amt-250" type="radio" value="" data-gtm-Form-interact-field-id="1" onChange={e => setAmount(250)} /> <input
name="amt"
id="amt-250"
type="radio"
value=""
data-gtm-Form-interact-field-id="1"
onChange={e => {
setAmount(250);
setcustom(false);
}}
/>
<label for="amt-250">$250</label> <label for="amt-250">$250</label>
</li> </li>
<li> <li>
<input name="amt" id="amt-500" type="radio" value="" data-gtm-form-interact-field-id="1" onChange={e => setAmount(500)} /> <input
name="amt"
id="amt-500"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(500);
setcustom(false);
}}
/>
<label for="amt-500">$500</label> <label for="amt-500">$500</label>
</li> </li>
<li> <li>
<input name="amt" id="amt-750" type="radio" value="" data-gtm-form-interact-field-id="1" onChange={e => setAmount(750)} /> <input
name="amt"
id="amt-750"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(750);
setcustom(false);
}}
/>
<label for="amt-750"> <label for="amt-750">
<span>Most Popular</span> <span>Most Popular</span>
<br /> $750 <br /> $750
</label> </label>
</li> </li>
<li> <li>
<input name="amt" id="amt-1000" type="radio" value="" data-gtm-form-interact-field-id="1" onChange={e => setAmount(1000)} /> <input
name="amt"
id="amt-1000"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(1000);
setcustom(false);
}}
/>
<label for="amt-1000"> $1000</label> <label for="amt-1000"> $1000</label>
</li> </li>
<li> <li>
<input name="amt" id="amt-1500" type="radio" value="" data-gtm-form-interact-field-id="1" onChange={e => setAmount(1500)} /> <input
name="amt"
id="amt-1500"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(1500);
setcustom(false);
}}
/>
<label for="amt-1500"> $1500</label> <label for="amt-1500"> $1500</label>
</li> </li>
<li> <li>
<input name="amt" id="amt-custom" type="radio" value="" data-gtm-form-interact-field-id="1" onChange={e => setAmount(null)} /> <input
name="amt"
id="amt-custom"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setcustom(true);
setAmount(null);
}}
/>
<label for="amt-custom"> $ Custom</label> <label for="amt-custom"> $ Custom</label>
</li> </li>
</ul> </ul>
</div> </div>
<div className="row"> <div className="row">
{amount == null && ( {custom && (
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<label htmlFor="">Custom Amount</label> <label htmlFor="">Custom Amount</label>
<Field <Field
className="form-control" className="form-control"
type="text" type="number"
name="customAmt" name="customAmt"
placeholder="Enter your amount" placeholder="Enter your amount"
onChange={handleChange} onChange={e => {
onBlur={handleBlur} setAmount(e.target.value);
value={values.customAmt} }}
/> onBlur={handleBlur}
{touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>} value={amount}
</div> />
) {touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>}
} </div>
)}
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<label htmlFor="">Email Id</label> <label htmlFor="">Email Id</label>
<Field <Field
...@@ -166,7 +248,6 @@ const GiftCard = () => { ...@@ -166,7 +248,6 @@ const GiftCard = () => {
</span> </span>
</a> </a>
{/* Tooltip */}
{showTooltip2 && <div className="tooltips">{tooltipText2}</div>} {showTooltip2 && <div className="tooltips">{tooltipText2}</div>}
</div> </div>
</div> </div>
...@@ -185,8 +266,35 @@ const GiftCard = () => { ...@@ -185,8 +266,35 @@ const GiftCard = () => {
{touched.message && errors.message && <div className="text-danger">{errors.message}</div>} {touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-12 mb-3">
<button className="btn btn-primary w-100" type="submit" disabled={isSubmitting}> <button
Continue className="btn btn-primary w-100"
onClick={async () => {
setloading(true);
if (!session) {
toast.warning("Please log in to buy a gift card.");
return;
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const data = {
data: {
userId: session.id
}
};
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-user/verify-gift-card-otp`, data, config);
console.log("response", response.data);
setloading(false);
console.log(values);
setIsStep2(true);
setIsStep1(false);
}}
disabled={!amount > 0 || !values.receiverEmail || !values.email}
>
{loading ? <Loader /> : "Continue"}
</button> </button>
</div> </div>
<div className="col-12"> <div className="col-12">
...@@ -249,7 +357,20 @@ const GiftCard = () => { ...@@ -249,7 +357,20 @@ const GiftCard = () => {
</div> </div>
<div className="row"> <div className="row">
<div className="col-md-12 mb-3"> <div className="col-md-12 mb-3">
<button className="btn btn-primary w-100" type="submit" disabled={isSubmitting}> <button
className="btn btn-primary w-100"
onClick={async () => {
const res = await await finishVendorOtpVerification({ email: session.user.email, oneTimePassword: values.code });
console.log("res", res.data);
if (!res.data.ok) {
toast.error(res.data.message);
}
if (res.data.ok) {
toast.success("OTP verified!");
}
}}
disabled={isSubmitting}
>
Confirm Confirm
</button> </button>
</div> </div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!