From 9b12bb0bd5bab29eafbe6b76e76281c3b58a7c9f Mon Sep 17 00:00:00 2001
From: "kartikey110813@gmail.com" <kartikey110813@gmail.com>
Date: Fri, 20 Aug 2021 00:21:39 +0530
Subject: [PATCH] Modal confirmation of adding and removing item to/from cart
resp.
---
package-lock.json | 21 +++++++++++++++++++++
package.json | 3 ++-
src/CheckoutProduct.js | 9 +++++++++
src/Orders.js | 9 +++++++++
src/Product.js | 10 ++++++++++
5 files changed, 51 insertions(+), 1 deletion(-)
diff --git a/package-lock.json b/package-lock.json
index f38fe5e8b..7d3584170 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5498,6 +5498,11 @@
"es6-symbol": "^3.1.1"
}
},
+ "es6-object-assign": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+ "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+ },
"es6-symbol": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -13256,6 +13261,22 @@
"util.promisify": "~1.0.0"
}
},
+ "sweetalert": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+ "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+ "requires": {
+ "es6-object-assign": "^1.1.0",
+ "promise-polyfill": "^6.0.2"
+ },
+ "dependencies": {
+ "promise-polyfill": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+ "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+ }
+ }
+ },
"symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index d9fa4acab..6f3492f89 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
"react-currency-format": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
- "react-scripts": "3.4.3"
+ "react-scripts": "3.4.3",
+ "sweetalert": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/CheckoutProduct.js b/src/CheckoutProduct.js
index b8e58dc9c..375cbe7de 100644
--- a/src/CheckoutProduct.js
+++ b/src/CheckoutProduct.js
@@ -1,11 +1,20 @@
import React from 'react';
import './CheckoutProduct.css'
import { useStateValue } from "./StateProvider";
+import swal from 'sweetalert';
+
function CheckoutProduct({ id, image, title, price, rating, hideButton }) {
const [{ basket }, dispatch] = useStateValue();
const removeFromBasket = () => {
+
+ swal({
+ title: "Product has been removed from the cart.",
+ icon: "success",
+ dangerMode: true,
+ })
+
// remove the item from the basket
dispatch({
type: 'REMOVE_FROM_BASKET',
diff --git a/src/Orders.js b/src/Orders.js
index f3fbf2caf..5bbd6c3cf 100644
--- a/src/Orders.js
+++ b/src/Orders.js
@@ -29,6 +29,8 @@ function Orders() {
return (
<div className='orders'>
+ {orders ? (
+ <div>
<h1>Your Orders</h1>
<div className='orders__order'>
@@ -36,6 +38,13 @@ function Orders() {
<Order order={order} />
))}
</div>
+ </div>
+
+ ) : (
+ <h2>No orders</h2>
+ )
+ }
+
</div>
)
}
diff --git a/src/Product.js b/src/Product.js
index cee9e25b7..54610694b 100644
--- a/src/Product.js
+++ b/src/Product.js
@@ -1,11 +1,21 @@
import React from "react";
import "./Product.css";
import { useStateValue } from "./StateProvider";
+import swal from 'sweetalert';
+
function Product({ id, title, image, price, rating }) {
const [{ basket }, dispatch] = useStateValue();
const addToBasket = () => {
+
+ swal({
+ title: "Product Added to cart.",
+ icon: "success",
+ dangerMode: false,
+ })
+
+
// dispatch the item into the data layer
dispatch({
type: "ADD_TO_BASKET",