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";
import { toast } from "react-toastify";
import { getCurrentEndUser } from "../../redux/actions/userActions.js";
import { Loader } from "react-bootstrap-typeahead";
import { useRouter } from "next/router.js";
const DetailInfo = ({ activityById }) => {
const router = useRouter()
const dispatch = useDispatch();
useEffect(() => {
dispatch(getCurrentEndUser());
......@@ -125,8 +127,10 @@ const DetailInfo = ({ activityById }) => {
>
{loading ? <Loader /> : "Enquire Now"}
</Button>
<Button variant="secondary">
Gift Now{" "}
<Button onClick={() => {
router.push("/gift-card")
}} variant="secondary">
Gift Now
<span className="image-container btn-gift">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span>
......
components/gift-card/GiftCard.js
......@@ -2,6 +2,13 @@ import Image from "next/image";
import React, { useEffect, useState } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
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({
customAmt: Yup.string().required("Full name is required"),
......@@ -14,8 +21,26 @@ const validationSchema = Yup.object().shape({
let formik1;
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 [amount, setAmount] = useState(0);
const [custom, setcustom] = useState(0);
const [isStep2, setIsStep2] = useState(false);
const [isResult, setIsResult] = useState(false);
......@@ -64,10 +89,6 @@ const GiftCard = () => {
// validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// Handle form submission here
console.log(values);
setSubmitting(false);
setIsStep2(true);
setIsStep1(false);
}}
>
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
......@@ -77,52 +98,113 @@ const GiftCard = () => {
<div className="gift-card-amt">
<ul>
<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>
</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>
</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">
<span>Most Popular</span>
<br /> $750
</label>
</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>
</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>
</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>
</li>
</ul>
</div>
<div className="row">
{amount == null && (
<div className="col-md-12 mb-4">
<label htmlFor="">Custom Amount</label>
<Field
className="form-control"
type="text"
name="customAmt"
placeholder="Enter your amount"
onChange={handleChange}
onBlur={handleBlur}
value={values.customAmt}
/>
{touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>}
</div>
)
}
{custom && (
<div className="col-md-12 mb-4">
<label htmlFor="">Custom Amount</label>
<Field
className="form-control"
type="number"
name="customAmt"
placeholder="Enter your amount"
onChange={e => {
setAmount(e.target.value);
}}
onBlur={handleBlur}
value={amount}
/>
{touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>}
</div>
)}
<div className="col-md-12 mb-4">
<label htmlFor="">Email Id</label>
<Field
......@@ -166,7 +248,6 @@ const GiftCard = () => {
</span>
</a>
{/* Tooltip */}
{showTooltip2 && <div className="tooltips">{tooltipText2}</div>}
</div>
</div>
......@@ -185,8 +266,35 @@ const GiftCard = () => {
{touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
</div>
<div className="col-md-12 mb-3">
<button className="btn btn-primary w-100" type="submit" disabled={isSubmitting}>
Continue
<button
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>
</div>
<div className="col-12">
......@@ -249,7 +357,20 @@ const GiftCard = () => {
</div>
<div className="row">
<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
</button>
</div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!