Skip to content

Commit 7b80b2b

Browse files
Queen-esther01Queen-esther01
committed
Complete Payment
1 parent 53e3469 commit 7b80b2b

14 files changed

+88
-116
lines changed

Diff for: ‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@tippyjs/react": "^4.2.6",
1212
"axios": "^0.24.0",
1313
"bootstrap": "^5.1.3",
14+
"dayjs": "^1.10.7",
1415
"feather-icons-react": "^0.5.0",
1516
"react": "^17.0.2",
1617
"react-bootstrap": "^2.0.4",

Diff for: ‎src/assets/css/styles.css

+3
Original file line numberDiff line numberDiff line change
@@ -468,4 +468,7 @@ h1,h2,h3,h4,h5,h6{
468468
}
469469
.completed{
470470
background: var(--color-success) !important;
471+
}
472+
.paid{
473+
background: var(--color-success) !important;
471474
}

Diff for: ‎src/components/cart/CartDetails.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ function CartDetails() {
5353
{
5454
state: {
5555
cart: bouquetsInCart,
56-
id: cartID
56+
id: cartID,
57+
amount: cartTotal
5758
},
5859
replace: false
5960
},

Diff for: ‎src/components/medical/MedicalAddons.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ function MedicalAddons({ medicalAddons }) {
1717

1818
const token = cookie.load('dreg')
1919

20+
console.log(medicalAddons)
21+
2022
const addServiceToCart = (service) => {
2123
const data = {
2224
cartItems: {
@@ -41,7 +43,7 @@ function MedicalAddons({ medicalAddons }) {
4143
useEffect(() => {
4244
if(addonsToCartSucceeded.error === false){
4345

44-
toast.success(`${addonsToCartSucceeded.data[0].subbouquet.description[0]} has been added to cart.`, {
46+
toast.success(`${addonsToCartSucceeded.data[0].subbouquet.name} has been added to cart.`, {
4547
id: 'addon-cart-success'
4648
})
4749

@@ -70,7 +72,7 @@ function MedicalAddons({ medicalAddons }) {
7072
return <Col key={addons._id} xs={12} sm={6} md={4} className=''>
7173
<div className="text-center rounded-img my-3 mx-2 py-5 shadow-lg">
7274
<div className="text-center my-3">
73-
<p>{addons.description[0]}</p>
75+
<p>{addons.name}</p>
7476
<h5 className='text-pink my-3'>&#8358;{addons.price.toLocaleString('en')}</h5>
7577
</div>
7678
<div className="m-auto d-block">

Diff for: ‎src/components/orders/OrderDetails.jsx

+11-25
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import cookie from 'react-cookies'
55
import Clipboard from '../../assets/images/clipboard.png'
66
import { Link, useNavigate } from 'react-router-dom'
77
import { useDispatch } from 'react-redux'
8-
import { makePayment } from '../../store/actions/orderActions'
9-
import { useSelector } from 'react-redux'
10-
import { useEffect } from 'react'
8+
import dayjs from 'dayjs'
9+
import LocalizedFormat from 'dayjs/plugin/localizedFormat'
1110

1211
function OrderDetails({ orders, loading}) {
1312
console.log(orders)
@@ -17,18 +16,7 @@ function OrderDetails({ orders, loading}) {
1716

1817
const cookies = cookie.load('dreg')
1918

20-
const startPaymentProcess = () =>{
21-
dispatch(makePayment())
22-
}
23-
24-
const paymentResponse = useSelector(state => state.order)
25-
const { payment, paymentLoading } = paymentResponse
26-
27-
// useEffect(() => {
28-
// if(payment){
29-
// navigate(`${ }`)
30-
// }
31-
// }, [payment])
19+
dayjs.extend(LocalizedFormat)
3220

3321
return (
3422
<>
@@ -50,10 +38,12 @@ function OrderDetails({ orders, loading}) {
5038
<Table responsive className='mt-3'>
5139
<thead className=''>
5240
<tr>
41+
<th>Date</th>
5342
<th>Bouquet</th>
5443
<th>Service(s)</th>
5544
<th>Price</th>
56-
<th>Status</th>
45+
<th>Payment Status</th>
46+
<th>Order Status</th>
5747
<th></th>
5848
</tr>
5949
</thead>
@@ -62,6 +52,7 @@ function OrderDetails({ orders, loading}) {
6252
orders && orders.map(item => {
6353
return (
6454
<tr key={item._id}>
55+
<td className="py-3">{dayjs(item.created_at).format('l')}</td>
6556
<td className='py-3'>{item.bouquet[0]}</td>
6657
<td className='py-3'>
6758
{
@@ -74,16 +65,11 @@ function OrderDetails({ orders, loading}) {
7465
</td>
7566
<td className='py-3 font-bold'>{item.total.toLocaleString('en')}</td>
7667
<td className={`py-3`}>
77-
<span className={` ${item.status} text-white py-2 px-2`} style={{ borderRadius: '20px'}}>{item.status}</span>
68+
<span className={` ${item.payment_status} text-white py-2 px-3`} style={{ borderRadius: '20px'}}>{item.payment_status}</span>
69+
</td>
70+
<td className={`py-3`}>
71+
<span className={` ${item.status} text-white py-2 px-3`} style={{ borderRadius: '20px'}}>{item.status}</span>
7872
</td>
79-
{
80-
item.status === 'pending' &&
81-
<td className="py-3">
82-
<button onClick={startPaymentProcess} className='px-2 py-2 border-0 rounded text-center bg-blue text-white' >
83-
{ paymentLoading ? <Loader/> : 'Make Payment' }
84-
</button>
85-
</td>
86-
}
8773
</tr>
8874
)
8975
})

Diff for: ‎src/components/reusable/Header.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ function Header() {
8787
}
8888
</NavDropdown>
8989
<Nav.Link href="/contact-us">Contact us</Nav.Link>
90+
<Nav.Link href="/orders">Orders</Nav.Link>
9091
</Nav>
9192
<div className='d-flex justify-content-between'>
9293
{

Diff for: ‎src/pages/AdditionalEmployeeForm.jsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
1212
import Loader from '../components/reusable/Loader'
1313
import { createOrder, resetState } from '../store/actions/orderActions';
1414
import toast from 'react-hot-toast';
15+
import { redirectUrl } from '../utils/redirectUrl';
1516

1617
const breadcrumbs = {
1718
previous: 'Employee Info',
@@ -62,9 +63,12 @@ function AdditionalEmployeeForm() {
6263
console.log(allData)
6364
const submitData = {
6465
cart_id : location.state.cart_id,
66+
amount: location.state.amount,
67+
redirect_url: redirectUrl,
6568
domestic : allData
6669
}
6770
dispatch(createOrder(submitData))
71+
console.log(submitData)
6872
}
6973

7074
const orderResponse = useSelector(state => state.order)
@@ -75,10 +79,10 @@ function AdditionalEmployeeForm() {
7579
toast.success('Your order has been created successfully')
7680
dispatch(resetState())
7781
setTimeout(() => {
78-
navigate('/orders')
82+
window.open(orderSucceeded.data.checkout)
7983
}, 2000);
8084
}
81-
else if(orderFailed.status_code === 400){
85+
else if(orderFailed.status_code === 400 || orderSucceeded.error === true){
8286
toast.error('Your order failed')
8387
dispatch(resetState())
8488
}
@@ -230,7 +234,6 @@ function AdditionalEmployeeForm() {
230234
<Form.Text className="text-red mb-3">
231235
{errors.reference_address?.message}
232236
</Form.Text>
233-
<Divider styles={{ width: '100%', margin: '30px 0 ' }} />
234237
<button className='my-3 border-0 w-100 rounded bg-pink text-white py-3'>
235238
{ loading ? <Loader/> : 'Submit' }
236239
</button>

Diff for: ‎src/pages/DomesticEmployeeForm.jsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useState } from 'react'
1313
import { useDispatch, useSelector } from 'react-redux'
1414
import { createOrder, resetState, uploadImage } from '../store/actions/orderActions'
1515
import toast from 'react-hot-toast'
16+
import { redirectUrl } from '../utils/redirectUrl'
1617

1718

1819
const breadcrumbs = {
@@ -61,6 +62,7 @@ function DomesticEmployeeForm() {
6162
state: {
6263
data: data,
6364
cart_id : location.state.id[0],
65+
amount: location.state.amount
6466
}
6567
})
6668
}
@@ -73,6 +75,8 @@ function DomesticEmployeeForm() {
7375
data.image = employeeImage
7476
const submitData = {
7577
cart_id : location.state.id[0],
78+
amount: location.state.amount,
79+
redirect_url: redirectUrl,
7680
domestic : data
7781
}
7882
dispatch(createOrder(submitData))
@@ -83,7 +87,7 @@ function DomesticEmployeeForm() {
8387
//console.log(location.state)
8488

8589
const checks = location.state && location.state.cart
86-
90+
console.log(location)
8791

8892
const onUploadImage = () =>{
8993

@@ -126,7 +130,7 @@ function DomesticEmployeeForm() {
126130
toast.success('Your order has been created successfully')
127131
dispatch(resetState())
128132
setTimeout(() => {
129-
navigate('/orders')
133+
window.open(orderSucceeded.data.checkout)
130134
}, 2000);
131135
}
132136
else if(orderFailed.status_code === 400){

Diff for: ‎src/pages/SubBouquets.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ function SubBouquets() {
4444
dispatch(getSubBouquets(id))
4545
}, [dispatch, id])
4646

47-
const subBouquetListData = subBouquets.data && subBouquets.data.filter(subBouquet => subBouquet.name !== 'Medical Add-ons')
48-
49-
const medicalAddons = subBouquets.data && subBouquets.data.filter(subBouquet => subBouquet.name === 'Medical Add-ons')
47+
const subBouquetListData = subBouquets.data && subBouquets.data.filter(subBouquet => (subBouquet.description[0] !== 'Medical Add-ons') && (subBouquet.description[0] !== 'Medical Add-ons '))
48+
//console.log(subBouquetListData)
49+
const medicalAddons = subBouquets.data && subBouquets.data.filter(subBouquet => subBouquet.description[0] === 'Medical Add-ons')
5050
//console.log(location.state.data )
5151
if(location.state === null) return <Navigate to='/' />
5252
return (

Diff for: ‎src/pages/TransactionConfirmation.jsx

+33-23
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from 'react'
22
import { useEffect } from 'react'
3-
import { useSelector } from 'react-redux'
4-
import { useDispatch } from 'react-redux'
5-
import { Link } from 'react-router-dom'
3+
import { Link, Navigate, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
64
import Footer from '../components/reusable/Footer'
75
import Header from '../components/reusable/Header'
86
import Hero from '../components/reusable/Hero'
9-
import Loader from '../components/reusable/Loader'
10-
import { verifyPayment } from '../store/actions/orderActions'
117
import Successful from '../assets/images/successful.gif'
128
import Failed from '../assets/images/failed.gif'
139

@@ -19,36 +15,50 @@ const breadcrumbs = {
1915
}
2016

2117
function TransactionConfirmation() {
18+
const [searchParams, setsearchParams] = useSearchParams()
2219

23-
const dispatch = useDispatch()
20+
const location = useLocation()
21+
const navigate = useNavigate()
2422

25-
// useEffect(() => {
26-
// dispatch(verifyPayment())
27-
// }, [dispatch])
23+
const status = searchParams.get('status')
2824

29-
const order = useSelector(state => state.order)
30-
const { payment, loading } = order
25+
useEffect(() => {
26+
if(status === 'successful'){
27+
setTimeout(() => {
28+
navigate('/orders')
29+
}, 2000);
30+
}
31+
}, [searchParams])
3132

33+
console.log(location)
34+
console.log(searchParams.get('status'))
35+
console.log(status)
36+
37+
if(!location.search) return <Navigate to='/' />
3238
return (
3339
<>
3440
<Header/>
3541
<Hero breadcrumb={breadcrumbs} extraStyle='cart-hero text-white'/>
3642
{
37-
loading
38-
? <div className='text-center d-flex align-items-center justify-content-center' style={{ height: '300px'}}>
39-
<Loader/>
40-
</div>
41-
: <div className='text-center mt-5 pt-5'>
42-
<div className="m-auto" style={{ width: '100px'}}>
43-
<img src={Successful} alt="" className='w-100 h-100 object-fit-cover' />
44-
</div>
45-
<div className="m-auto" style={{ width: '100px'}}>
46-
<img src={Failed} alt="" className='w-100 h-100 object-fit-cover' />
47-
</div>
43+
<div className='text-center mt-5 pt-5'>
44+
{ status === 'successful' && <div className="m-auto" style={{ width: '100px'}}>
45+
<img src={Successful} alt="" className='w-100 h-100 object-fit-cover' />
46+
</div>
47+
}
48+
{ status !== 'successful' && <div className="m-auto" style={{ width: '100px'}}>
49+
<img src={Failed} alt="" className='w-100 h-100 object-fit-cover' />
50+
</div>
51+
}
4852
<p className='font-md mt-4'>Payment Successful</p>
49-
<button className='border-0 rounded text-white bg-pink px-3 py-2'>
53+
{/* <button className='border-0 rounded text-white bg-pink px-3 py-2'>
5054
<Link to='/orders' className='remove-link-color text-decoration-none'>See orders </Link>
55+
</button> */}
56+
{
57+
status !== 'successful'
58+
&& <button className='border-0 rounded text-white bg-pink px-3 py-2'>
59+
<Link to='/cart' className='remove-link-color text-decoration-none'>Try again </Link>
5160
</button>
61+
}
5262
</div>
5363
}
5464
<Footer/>

Diff for: ‎src/store/actions/cartActions.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,18 @@ const cartSlice = createSlice({
4242
status.fetchCartLoading = false
4343
},
4444
addItemToCartSucceeded: (status, action) =>{
45-
if(action.payload.data && action.payload.data[0].subbouquet.name === 'Medical Add-ons'){
45+
if(action.payload.data && action.payload.data[0].subbouquet.description[0] === 'Medical Add-ons'){
46+
status.cartItems.push(action.payload.data[0])
4647
status.addonsToCartSucceeded = action.payload
4748
}
48-
else if(action.payload.error === true && action.payload.data && action.payload.data[0].subbouquet.name === 'Medical Add-ons'){
49+
else if(action.payload.error === true && action.payload.data && action.payload.data[0].subbouquet.description[0] === 'Medical Add-ons'){
4950
status.addonsToCartFailed = action.payload
5051
}
5152
if(action.payload.error === true && action.payload.code === 400){
5253
status.addToCartFailed = action.payload
5354
//status.addToCartSucceeded = action.payload
5455
}
55-
else if(action.payload.error === false && action.payload.data && action.payload.data[0].subbouquet.name !== 'Medical Add-ons'){
56+
else if(action.payload.error === false && action.payload.data && action.payload.data[0].subbouquet.description[0] !== 'Medical Add-ons'){
5657
status.cartItems.push(action.payload.data[0])
5758
status.addToCartSucceeded = action.payload
5859
}
@@ -65,8 +66,8 @@ const cartSlice = createSlice({
6566
status.addToCartLoading = false
6667
},
6768
deleteItemFromCartSucceeded: (status, action) =>{
68-
if(action.payload.data[0].subbouquet.name === 'Medical Add-ons'){
69-
status.cartItems = status.cartItems.filter(item => item.subbouquet.description !== action.payload.data[0].subbouquet.description[0])
69+
if(action.payload.data[0].subbouquet.description[0] === 'Medical Add-ons'){
70+
status.cartItems = status.cartItems.filter(item => item.subbouquet.name !== action.payload.data[0].subbouquet.name)
7071
}
7172
else{
7273
status.cartItems = status.cartItems.filter(item => item.subbouquet.name !== action.payload.data[0].subbouquet.name)

0 commit comments

Comments
 (0)