Call Back Finished

src/App.js

@@ -27,6 +27,7 @@ import store from './redux/store';
 import ContactUs from './view/contact';
 import ENTER_EXAM from './view/Exam/EnterExam/index'
 import EXAM from './view/Exam'
+import CallBack from './view/CallBack';
 
 
 let data = [
@@ -689,6 +690,8 @@ function App() {
                 showUserFullInfo={showUserFullInfo}
                 hideUserFullInfo={hideUserFullInfo}
               />} /> */}
+
+          <Route path='/callBack' element={<CallBack />} />    
           <Route path='/contacts' element={<ContactUs />} />
           <Route exact path="/azmoon_list/enter_exam/:id" element={<ENTER_EXAM />}/>
           <Route exact path="/dashboard/azmoon_list/exam/:id" element={<EXAM />} />

src/components/CallBackForm/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CallBackForm = ({
+    status,
+    price,
+    trackingCode
+}) => {
+    return (
+        <div className="w-1/5 flex flex-col items-center rounded-lg border  border-gray-200">
+
+            {
+                status ?
+                    <div className="flex flex-col items-center py-4 border-b border-gray-200 w-full">
+                        <div className="w-40 h-40 rounded-full flex items-center justify-center bg-greenE9 my-4">
+                            <svg width="250" height="250" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#039b2b" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                            </svg>
+                        </div>
+
+                        <h1 className="text-lg text-red26 font-black">پرداخت شما با موفقیت انجام شد</h1>
+                    </div> :
+                    <div className="flex flex-col items-center py-4 border-b border-gray-200 w-full">
+                        <div className="w-40 h-40 rounded-full flex items-center justify-center bg-pinkD6 my-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 15.044 15.044">
+                                <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                                    <g id="card-remove" transform="translate(253.309 512.31)">
+                                        <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#f51616" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
+                                        <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#f51616" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
+                                    </g>
+                                </g>
+                            </svg>
+
+                        </div>
+
+                        <h1 className="text-lg text-red26 font-black">متاسفانه پرداخت شما انجام نشد</h1>
+                    </div>
+            }
+            <div className="w-full py-3 border-b border-gray-200 text-red26 font-bold">
+                مبلغ : {price} تومان
+            </div>
+            <div className="w-full py-3 border-b border-gray-200 text-red26 font-bold">
+                کد پیگیری : {trackingCode}
+            </div>
+
+
+            {
+                status ? 
+                <div className="py-8">
+                    <Link to={'/myServices'} 
+                    className="py-3 px-6 border rounded-md bg-red82OP border-red52 font-bold text-red52 text-sm hover:text-white hover:bg-red52 hover:shadow-md"
+                    >
+                       لیست خدمات من
+                    </Link>
+                </div>
+                    :
+                    <div className="py-6 flex w-full justify-center">
+                    <Link to={'/services'} 
+                    className="w-2/5 py-3 border rounded mr-2 bg-red82OP border-red52 font-bold text-red52 text-sm hover:text-white hover:bg-red52 hover:shadow-md"
+                    >
+                       بازگست به سبد خرید
+                    </Link>
+                    <Link to={'/services'} 
+                    className="w-2/5 py-3 border ml-2 rounded bg-green13 border-green13 font-bold text-white text-sm  hover:shadow-md"
+                    >
+                       پرداخت مجدد
+                    </Link>
+                </div>
+            }
+        </div>
+    )
+}
+
+export default CallBackForm;

src/utils/filter.js

@@ -0,0 +1,61 @@
+const grades = [
+  "پیش دبستان",
+  "اول",
+  "دوم",
+  "سوم",
+  "چهارم",
+  "پنجم",
+  "ششم",
+  "هفتم",
+  "هشتم",
+  "نهم",
+  "دهم",
+  "یازدهم",
+  "دوازدهم",
+];
+class filter {
+  productsPage = (products, options) => {
+    const { grade, subject, sort } = options;
+
+    if (grade.length > 0 || subject.length > 0 || sort) {
+      localStorage.setItem("filter", "ON");
+    }
+    let finalSort;
+    let byGradeFilter = [];
+    if (grade.length > 0) {
+      grade.map((item1) => {
+        for (let i = 0; i < products.length; i++) {
+          if (grades[products[i].gradeId] === item1) {
+            byGradeFilter.push(products[i]);
+          }
+        }
+      });
+    } else {
+      byGradeFilter = products;
+    }
+    let bySubjectFilter = [];
+    if (subject.length > 0) {
+      subject.map((item1) => {
+        for (let i = 0; i < byGradeFilter.length; i++) {
+          if (byGradeFilter[i].name === item1) {
+            bySubjectFilter.push(byGradeFilter[i]);
+          }
+        }
+      });
+    } else {
+      bySubjectFilter = byGradeFilter;
+    }
+
+    if (sort === "گران ترین") {
+      finalSort = bySubjectFilter.sort((item1, item2) => {
+        return item1.product[0].price - item2.product[0].price;
+      });
+    } else {
+      finalSort = bySubjectFilter;
+    }
+  };
+}
+
+const _filter = new filter();
+
+export default _filter;

src/view/CallBack/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import CallBackForm from '../../components/CallBackForm';
+
+const CallBack = () => {
+    return(
+        <div className='flex items-center justify-center h-screen ' style={{width: '93.5%', marginTop: '8.5%;'}}>
+            <CallBackForm status={true}  price={144000} trackingCode={133522485656326295}/>
+        </div>
+    );
+
+};
+
+export default CallBack;

tailwind.config.js

@@ -30,8 +30,11 @@ module.exports = {
         grayEC: '#ececec',
         red82OP: 'rgba(223, 20, 82, 0.08)',
         pinkF5: '#fff1f5',
+        pinkD6 : '#ffd6d6',
         black40: '#404040',
         green17 : '#8daf17',
+        greenE9 : '#dcffe9',
+        green13: '#00ba13',
         blue5F : '#05335f',
         blue7E : '#15517e',
         blueFF : '#f2f9ff',