diff --git a/.gitignore b/.gitignore
index 5fa2566..6c16610 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,23 @@
-/public
+
/vendor
.env
-/writable
\ No newline at end of file
+/writable
+
+# Ignore vendor folder
+public/vendor/
+
+# Include assets folder and its files
+!public/assets/
+!public/square-js/
+!public/square-stylesheets/
+
+public/assets/css
+public/assets/data
+public/assets/fonts
+public/assets/images
+public/assets/js
+public/assets/libs
+public/assets/member_images
+
+!public/assets/member_css
+!public/assets/member_js
diff --git a/app/Views/credits_pack_form.php b/app/Views/credits_pack_form.php
index 59d0b40..5b52dd4 100644
--- a/app/Views/credits_pack_form.php
+++ b/app/Views/credits_pack_form.php
@@ -67,14 +67,14 @@
diff --git a/public/assets/member_css/front-style.css b/public/assets/member_css/front-style.css
new file mode 100644
index 0000000..f1c984d
--- /dev/null
+++ b/public/assets/member_css/front-style.css
@@ -0,0 +1,1534 @@
+:root{
+ --primary-color:#002b60;
+ --secondary-color:#001d41;
+ --blue-color:#00B4D5;
+ --pink-color:#ec407a;
+}
+*{
+ font-family: 'DM Sans', sans-serif; font-size:15px; line-height:29px;
+}
+input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea{
+ font-family: 'DM Sans', sans-serif;
+}
+img{
+ max-width:100%;
+ height:auto;
+}
+.alert{
+ width:100%;
+}
+#already_err{
+ color: #ff0000;
+}
+.parsley-errors-list {
+ list-style-type: none;
+ padding-left: 0;
+ padding-top: 8px;
+ margin-bottom: 0;
+ color: #ff0000;
+}
+.custom-btn{
+ display: inline-block;
+ background-color: var(--blue-color);
+ color:#ffffff;
+ width:200px;
+ padding:10px;
+ text-align:center;
+ text-transform:uppercase;
+ border-radius:5px;
+ margin-top:15px;
+ cursor: pointer;
+}
+.success-message{
+ background: #cfeecf;
+ border: 1px solid green;
+ color: #000;
+ padding: 5px 10px;
+ display: block;
+ margin-top: 20px;
+}
+.custom-btn:hover{
+ background-color:var(--pink-color);
+ color:#ffffff;
+}
+.secondary-btn{
+ background-color:var(--pink-color);
+}
+.secondary-btn:hover{
+ background-color: var(--blue-color);
+}
+@media (min-width: 1200px){
+ .container, .container-lg, .container-md, .container-sm, .container-xl {
+ max-width: 1200px!important;
+}}
+.font-bold{
+ font-weight: 700;
+}
+a{
+ text-decoration:none!important;
+}
+.heading-font{
+ font-size:30px;
+}
+/* ----------------header---------------- */
+.cart-menu img{ margin-right:5px; }
+.header{
+ background-color:#ffffff;
+ height:105px;
+}
+.header ul{
+ display: flex;
+ align-items: baseline;
+ list-style-type:none;
+ margin-bottom:0;
+ padding-left:0;
+}
+.header ul li{
+ margin:0 10px;
+}
+.header ul li a{
+ color: #000000;
+ text-transform:uppercase;
+ font-weight:500;
+ padding:0 5px;
+}
+.header ul li a:hover{
+ color:var(--blue-color);
+}
+.header1 ul{
+ justify-content: flex-end;
+ margin-right:30px;
+}
+.header2 ul{
+ justify-content: flex-start;
+ margin-left:30px;
+}
+.header .nav-button{
+ background: var(--blue-color);
+ color: #ffffff;
+ display: inline-block;
+ border-radius: 50px;
+ padding:3px 12px;
+ text-transform: uppercase;
+ font-weight: 500;
+}
+.header .nav-button:hover{
+ color:#fff;
+ background:var(--pink-color)
+}
+.header .nav-button img{
+ margin-right: 5px;
+ margin-bottom:2px;
+}
+.custom-logo-link{
+ padding:6px 15px;
+ display:inline-block;
+}
+.nav{
+ background-color: transparent;
+ padding:6px;
+}
+.nav-main{
+ display: flex;
+ justify-content: space-between;
+}
+.nav button{
+ height: 35px;
+ width:35px;
+ margin-top: 30px;
+ border: 1px solid var(--blue-color);
+ background-color: transparent;
+ color: var(--blue-color);
+}
+.nav-hidden ul{
+ list-style-type: none;
+ line-height: 50px;
+ padding-left:0;
+ margin:0;
+}
+.nav-hidden ul li{
+ border-bottom:1px solid #eee;
+}
+.nav-hidden li:last-child{
+ background: #e2e8f0;
+ border-bottom-width:0;
+}
+.nav-hidden ul li a{
+ color: #334155;
+ padding:10px 10px;
+ display:block;
+}
+
+#id section{
+ display: none;
+}
+@media only screen and (min-width: 992px) {
+ .nav{
+ display: none !important;
+ }
+ .nav-hidden{
+ display: none;
+ }
+}
+@media (max-width: 992px){
+.header, #demo {
+ display: none;
+}
+}
+#demo{
+ position: absolute;
+ width:100%;
+ background:#ffffff;
+ z-index:99;
+ margin-top:15px;
+}
+/* ----------------footer---------------- */
+.footer{
+ background-color: var(--primary-color);
+ padding-top:45px;
+}
+.footer .footer1, .footer .footer2, .footer .footer3{
+ padding:15px 35px 20px;
+}
+.footer ul{
+ list-style-type: none;
+}
+.footer ul li a{
+ color: #fff;
+ text-decoration: none;
+}
+.footer1 .footer-title{
+ font-size: 18px;
+}
+.footer1 .footer-title, .footer1 p{
+ color:#fff;
+}
+.footer1 p{
+ font-size:14px;
+}
+.footer1 .col-2{
+ width: 50px !important;
+ margin-top:6px!important
+}
+.footer1 img{
+ margin-top:5px;
+}
+.footer2, .footer3{
+ border-left: 1px solid #fff;
+}
+.footer2{
+ text-align: center;
+}
+.footer2 ul{
+ display: flex;
+ justify-content:space-between;
+ margin:25px auto;
+ max-width:150px;
+ padding-left:0;
+}
+.footer2 ul li a{
+ display:inline-block;
+ width: 35px;
+ height: 35px;
+ line-height: 35px;
+ font-size:18px;
+ text-align: center;
+ border-radius: 6px;
+ background-color: #fff;
+ color:#002B60;
+}
+.footer2 ul li a:hover{
+ background:var(--pink-color);
+ color:#ffffff;
+}
+.footer2 ul li img{
+ height:20px;
+}
+.footer2 p{
+ color: #fff;
+ line-height: 30px;
+ margin-top: 30px;
+}
+.footer3 .col-lg-6{
+ line-height: 40px;
+}
+.footer3 ul{
+ padding-left:0;
+}
+.footer3 a:hover{
+ color: var(--blue-color);
+}
+.footer-copy{
+ border-top: 1px solid #fff;
+ text-align: center;
+ color:#ffffff;
+ padding:15px 0;
+}
+/*Cart*/
+@media (min-width: 1100px){
+.cart .cart-inner .container{
+ max-width:900px!important;
+}
+}
+.cart .quantity{ display:flex; align-items:center; font-weight: 600;}
+.cart .quantity span:last-child{ margin-right:10px; }
+.cart .quantity .price{ margin-right:10px; }
+.heading-border{
+ font-size:30px;
+ text-align:center;
+ position: relative;
+ margin-bottom:55px;
+}
+.heading-border::before{
+ content:"";
+ position:absolute;
+ background:#000;
+ width:40px;
+ height:2px;
+ left:48.5%;
+ bottom:-15px;
+}
+.cart, .cart .header{
+ background:#F9FAFB;
+}
+.cart .product-name{
+ font-weight:700;
+ font-size:23px;
+}
+.cart .product-price{
+ font-weight:700;
+ font-size:23px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+.quantity{
+ position: relative;
+ margin:0 auto;
+}
+.quantity, .quantity input{
+ width:80px;
+}
+.quantity .plus, .quantity .minus{
+ position:absolute;
+ right:0;
+ background-color: transparent;
+ border-width:0;
+}
+.quantity .plus{
+ top:0;
+}
+.quantity input{
+ height:45px;
+ border:2px solid #A1A1A1;
+ background-color:transparent;
+ border-radius:5px;
+ padding:10px;
+}
+.quantity .minus{
+ bottom:0;
+}
+.remove-product a{
+ color:var(--pink-color);
+ text-transform:uppercase;
+ font-weight: 500;
+ font-size:13px;
+ margin-top:15px;
+ text-decoration:none;
+}
+.text-right-price{
+ text-align:right;
+}
+.credit-point{
+ font-size:14px;
+ margin:-3px 0 3px;
+}
+.credits-number{
+ font-weight:500;
+ font-size:17px;
+}
+.credit-price{
+ font-size:15px;
+}
+.subtotal-label{
+ font-weight:500;
+ text-transform: uppercase;
+}
+.subtotal-price{
+ font-weight:700;
+ font-size:18px;
+}
+#card-button{
+ background: var(--blue-color);
+ color: #fff;
+ border-width: 0;
+ padding: 10px 20px;
+ border-radius: 5px;
+}
+#card-button:hover{
+ background: var(--pink-color);
+}
+.checkout-btn{
+ text-align: right;
+}
+body.checkout .select2-container, body.checkout span.selection{
+ padding:0!important;
+}
+body.checkout .select2-container--default .select2-selection--single{
+ border: 2px solid #E5E7EB;
+ height:40px;
+}
+body.checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
+ line-height: 35px!important;
+ font-weight:400;
+}
+body.checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
+ top: 6px!important;
+}
+.checkout-btn button{
+ background: var(--blue-color);
+ color:#fff;
+ border-width:0;
+ padding:10px 20px;
+ border-radius:5px;
+}
+.checkout-btn button:hover{
+ background:var(--pink-color);
+}
+.coupon-input{
+ padding:5px 15px;
+ border-radius:5px;
+}
+.coupon-field button{
+ background:transparent;
+ border-width:0;
+ margin-left:5px;
+}
+.shopping-btn{
+ color: #000000;
+ border-width: 0;
+ padding: 10px 20px;
+ border-radius: 5px;
+ display:inline-block;
+ text-align:center;
+ border:2px solid var(--primary-color);
+}
+.shopping-btn:hover{
+ color:#ffffff;
+ background:var(--primary-color);
+}
+/*Membership*/
+.membership .mem-icontitle{
+ font-size: 22px;
+}
+.evo-membership .row{
+ text-align:center;
+}
+.membership-img .mem-icontitle{
+ max-width:200px;
+ margin:5px auto 10px;
+}
+.membership-img>div{
+ border-right:1px solid #000;
+ padding-top:30px;
+ padding-bottom:15px;
+}
+.membership-img>div:last-child{
+ border-right-width:0;
+}
+.presale-offer-section{
+ background:#f8f8f4;
+ padding: 80px 0 80px 0;
+}
+@media (min-width: 768px){
+ .membership-img{
+ margin-top:30px!important;
+ }
+}
+@media (max-width: 768px){
+.membership-img>div{
+ border-right-width:0;
+ border-bottom:1px solid #000;
+}
+}
+.credit-offer-box{
+ background-color:#ffffff;
+ border-radius:5px;
+ text-align:center;
+ padding:50px 15px 30px 15px;
+ position: relative;
+}
+.credit-offer-box .offer-tag{
+ position:absolute;
+ top:-23px;
+ right:20px;
+}
+.credit-offer-box .pack-title{
+ font-size: 20px;
+ margin-top: 18px;
+}
+.credit-offer-box .pack-price{
+ font-size:45px;
+ display:flex;
+ justify-content:center;
+ margin:15px 0 5px;
+}
+.credit-offer-box .pack-credit-number{
+ margin-top:10px;
+ font-size:17px;
+ margin-bottom:5px;
+}
+.credit-offer-box .pack-credit-point{
+ font-size: 14px;
+ margin-top:-10px;
+ margin-bottom:8px;
+}
+.credit-offer-box .pack-submit, .work-submit{
+ color: #fff!important;
+ padding:5px 20px 5px 20px;
+ border-radius:10px;
+ font-size: 16px;
+ display:inline-block;
+ margin-top:20px;
+ cursor: pointer;
+}
+.credit-offer-box .pack-submit.blue, .credit-offer-box .pack-submit.pink:hover, .work-submit.pink:hover{
+ background-color: var(--blue-color);
+}
+.credit-offer-box .pack-submit.blue:hover, .credit-offer-box .pack-submit.pink, .work-submit.pink{
+ background-color: var(--pink-color);
+}
+.second-pack .credit-offer-box{
+ margin-top:60px;
+}
+.how-works{
+ position: relative;
+ background-repeat:no-repeat;
+ background-size:auto;
+ background-position:right top;
+}
+@media (max-width: 1300px){
+ .how-works{
+ background-position:140% 0%;
+ }
+}
+.work-section {
+ counter-reset: my-sec-counter;
+}
+.work-section>div{
+ position: relative;
+ padding-left:50px;
+}
+.work-section ul{
+ margin-top:20px;
+}
+.work-section li{
+ position: relative;
+ list-style-type:none;
+ margin-left: 50px;
+ margin-bottom: 25px;
+ counter-increment: my-sec-counter;
+ font-size:17px;
+}
+.work-section li::before{
+ content: counter(my-sec-counter);
+ position: absolute;
+ background: #4a515a;
+ color: #fff;
+ width: 33px;
+ height: 33px;
+ line-height: 33px;
+ text-align: center;
+ left: -52px;
+ top:0;
+ border-radius: 50px;
+ z-index: 2;
+}
+.work-section li::after{
+ content: "";
+ position: absolute;
+ background: #adadad;
+ width: 2px;
+ height: 110%;
+ top: 23px;
+ left: -36px;
+}
+.work-section li:last-child::after{
+ height: 17%;
+}
+.work-section>div::before{
+ content: "";
+ position: absolute;
+ border: 1px solid var(--primary-color);
+ background: #fff;
+ border-radius: 50px;
+ width: 20px;
+ height: 20px;
+ top: 4px;
+ left: 10px;
+ z-index: 1;
+}
+.work-section>div::after{
+ content: "";
+ position: absolute;
+ background: #6E6D68;
+ width: 2px;
+ height: 110%;
+ top: 23px;
+ left:20px;
+}
+.work-section>div:last-child:after {
+ height: 60%;
+}
+.contact-section{
+ background:var( --secondary-color);
+}
+.question-title h6{
+ color:#ffffff;
+ font-size:18px;
+}
+.contact-btn{
+ color: #fff;
+
+ background-image: none;
+ margin: 0 0 0 0;
+ padding: 12px 25px 12px 25px;
+ border-style: solid;
+ border-width: 1px 1px 1px 1px;
+ border-color: #00b4d5;
+ border-radius:10px;
+ font-size: 16px;
+}
+.contact-btn:hover{
+ background-color: var(--blue-color);
+ color:#ffffff;
+}
+@media (max-width: 999px){
+ .question-title{
+ margin-bottom:30px;
+}
+}
+/*-----------------------------Checkout Start------------------------- */
+.checkout input[type=radio]{
+ width: 18px;
+ height: 18px;
+}
+.back-card a{
+ color: var(--blue-color);
+ padding-top: 10px;
+ padding-left: 5px;
+}
+.back-card a:hover{
+ color:var(--pink-color);
+}
+.back-card a:hover i{
+ border-color:var(--pink-color);
+}
+.back-card h4{
+ margin-top:10px;
+ font-size:22px;
+}
+ .back-card .arrow-left {
+ transform: rotate(135deg);
+ -webkit-transform: rotate(135deg);
+ border: solid #00B4D5;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 3px;
+}
+.edit-address{
+ background: #FFFFFF;
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ margin: 0 !important;
+ padding: 13px;
+ height: 60px;
+ align-items: center;
+}
+.edit-address a{
+ color: #D81B60;
+ font-weight: 500;
+}
+.edit-address p{
+ margin-bottom: 0;
+ color: #6B7280;
+ font-size: 15px;
+ font-weight: 500;
+}
+.edit-address span{
+ padding-left: 20px !important;
+ font-weight: 500;
+}
+.address-form{
+ background: #FFFFFF;
+ border: 2px solid #00B4D5;
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ padding:20px 30px 30px 30px;
+}
+.address-form label{
+ font-weight: 500;
+ color: #6B7280;
+}
+.address-form span, .credit-card span, .google-pay span {
+ padding-left: 10px;
+ font-weight: 600;
+ font-size: 15px;
+}
+.checkout input[type="text"]{
+ width:100%;
+ background: #FFFFFF;
+ border: 2px solid #E5E7EB;
+ border-radius: 5px;
+ height: 40px;
+ padding:5px 10px;
+}
+.checkout select{
+ width:100%;
+ height: 40px;
+ border: 2px solid #E5E7EB;
+ border-radius: 5px;
+ color: #6B7280;
+ padding:5px 10px;
+}
+.checkout input[type="text"]:focus, .checkout input[type="text"]:hover, .checkout select:focus, .checkout select:hover{
+ border-color:#00B4D5;
+}
+.address-form button{
+ border: 2px solid #E5E7EB;
+ background-color: #fff;
+ height: 40px;
+ width:100px;
+ text-align:center;
+ font-weight:500;
+ color: #374151;
+ margin-top: 15px;
+ border-radius:5px;
+ text-transform:uppercase;
+}
+.address-form button:hover{
+ background-color:var(--blue-color);
+ border-color:var(--blue-color);
+ color:#ffffff;
+}
+.address-form input[type=submit]{
+ width:100px;
+ background-color: var(--blue-color);
+ font-weight: 500;
+ font-size: 14px;
+ border-radius:5px;
+ text-align: center;
+ color: #FFFFFF;
+ border: none;
+ height: 40px;
+ margin-top: 15px;
+ text-transform:uppercase;
+}
+.address-form input[type=submit]:hover{
+ background-color:var(--pink-color);
+}
+.payment-title{
+ margin-top:40px;
+ font-size:22px;
+}
+.payment-method{
+ padding: 40px 0px;
+}
+.credit-card{
+ background: #FFFFFF;
+ border: 2px solid #00B4D5;
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ padding:25px 30px 25px 30px;
+ margin-top:25px;
+ margin-bottom: 30px;
+}
+.google-pay{
+ padding:0 10px;
+ margin-bottom:35px;
+}
+.google-pay-content{
+ background: #FFFFFF;
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ margin-top: 40px !important;
+ margin-bottom: 40px;
+ padding:10px;
+}
+.order-summary{
+ background: #FFFFFF;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ padding: 30px;
+ margin-bottom:50px;
+}
+.order-summary h4{
+ font-size: 22px;
+}
+.order-summary .order1{
+ padding-bottom: 20px;
+}
+.order-summary .order2{
+ border-top: 1px solid #6B7280;
+ padding:20px 0 10px;
+}
+.order-summary .evo{
+ padding-bottom: 10px;
+}
+.order-summary .item1{
+ padding-top: 20px;
+ border-top: 1px solid #6B7280;
+}
+.order-summary .item1 p, .order-summary .item2 p, .order-summary .item3 p{
+ line-height: 15px;
+ color: #6B7280;
+ font-weight: 500;
+}
+.order-summary .order-button p{
+ color: #6B7280;
+}
+.order-summary input[type="submit"]{
+ width: 100%;
+ background-color: #00B4D5;
+ font-weight: 500;
+ font-size: 14px;
+ text-align: center;
+ color: #FFFFFF;
+ border: none;
+ height: 40px;
+ border-radius: 5px;
+ text-transform:uppercase;
+}
+.checkout .product-name{
+ font-weight:500;
+ font-size:18px;
+}
+.checkout .product-price, .checkout .product-total{
+ font-weight:500;
+}
+.checkout-inner .order-summary-main{
+ position: sticky;
+ top: 0;
+ height: 100%;
+}
+/*----------------------------- Checkout End------------------------- */
+
+/*--------------Payment Sucessful Start ----------*/
+.payment-box{
+ border: 2px solid #AEBCCD;
+ border-radius: 10px;
+ padding: 30px;
+ margin: 50px 0px;
+}
+.payment-head{
+ text-align: center;
+}
+.payment-head img{
+ background-color: rgba(35, 162, 109, 0.12);
+ padding: 12px;
+ border-radius:50%;
+}
+.payment-head.alert img{
+ background-color: rgb(255 213 210);
+}
+.payment-head .sucessful-heading{
+ font-weight: 500;
+ font-size: 30px;
+ color: #11C8B0;
+ margin:30px 0 0;
+}
+.payment-head p{
+ color: #475569;
+}
+.aside{
+ padding-top: 20px;
+}
+.aside-content{
+ border-top: 2px dashed #E6F1FF;
+ border-bottom: 2px dashed #E6F1FF;
+ padding: 20px 0px;
+ text-align: left;
+}
+@media (max-width: 999px){
+ .aside-content{
+ border-bottom-width: 0;
+ }
+ .aside-content-last{
+ border-bottom-width:2px;
+ }
+}
+.payment .label{
+ font-weight: 500;
+ color: #475569;
+}
+.order{
+ padding: 20px 0px;
+ border-bottom: 2px dashed #E6F1FF;
+}
+.total-list{
+ padding: 20px 0px;
+ border-bottom: 2px dashed #E6F1FF;
+}
+.sub-total-main{
+ padding: 20px 0px;
+}
+.dashboard button{
+ width: 100%;
+ background-color: var(--blue-color);
+ font-weight: 500;
+ font-size: 14px;
+ text-align: center;
+ color: #FFFFFF;
+ border: none;
+ height: 40px;
+ border-radius: 5px;
+ text-transform:uppercase;
+ margin-top:30px;
+}
+.dashboard button:hover{
+ background-color:var(--pink-color);
+}
+.payment .order-heading{
+ font-size:18px;
+ margin-bottom:20px;
+}
+.payment .product-name{
+ font-size:20px;
+ font-weight: 500;
+}
+.payment .credit-point{
+ margin-bottom:-5px;
+}
+.payment .order-total{
+ font-weight:600;
+ font-size:19px;
+}
+/*--------------Payment Sucessful End ----------*/
+
+/*-------------------Login---------------------*/
+.account-width {
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 14px 28px rgba(0,0,0,0.15);
+ position: relative;
+ overflow: hidden;
+ width: 768px;
+ max-width: 100%;
+ min-height: 510px;
+ margin:0 auto;
+}
+.account-width h1{
+ text-align: center;
+ font-size: 28px;
+}
+
+.account-width form{
+ background:#ffffff;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+
+.account-width input[type="text"], .account-width input[type="email"], .account-width input[type="password"], .account-width input[type="tel"], .forgetpassword input[type="email"], .forgetpassword input[type="number"], .forgetpassword input[type="text"], .forgetpassword input[type="password"]{
+ width: 100%;
+ height:50px;
+ border:2px solid #BEBEBF;
+ padding:5px 10px;
+ border-radius:5px;
+}
+.account-width label{
+ display: block;
+}
+.forget-pwd{
+ color:var(--primary-color);
+}
+.forget-pwd:hover{
+ color:var(--pink-color);
+}
+.account-width .signin-btn, .account-width .signup-btn, .forgetpassword button{
+ width:100%;
+ border-width:0;
+ background-color:var(--blue-color);
+ color:#ffffff;
+ padding:7px 10px;
+ border-radius:5px;
+ text-transform:uppercase;
+}
+.account-width .signin-btn:hover, .account-width .signup-btn:hover, .forgetpassword button:hover{
+ background-color: var(--pink-color);
+}
+.account-width .login-btn{
+ width:100%;
+ border:2px solid #ffffff;
+ background-color: transparent;
+ border-radius: 5px;
+ padding:7px 15px;
+ color:#ffffff;
+ margin-top:15px;
+ text-transform:uppercase;
+}
+.account-width .login-btn:hover{
+ background-color:var(--pink-color);
+ color:#ffffff;
+ border-color:var(--pink-color);
+}
+
+.form-container {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ transition: all 0.6s ease-in-out;
+}
+
+.sign-in-container {
+ left: 0;
+ width: 50%;
+ z-index: 2;
+ padding:30px 30px;
+}
+
+.account-width.right-panel-active .sign-in-container {
+ transform: translateX(100%);
+}
+
+.sign-up-container {
+ left: 0;
+ width: 50%;
+ opacity: 0;
+ z-index: 1;
+ padding:30px 30px;
+}
+
+.account-width.right-panel-active .sign-up-container {
+ transform: translateX(100%);
+ opacity: 1;
+ z-index: 5;
+ animation: show 0.6s;
+}
+
+@keyframes show {
+ 0%, 49.99% {
+ opacity: 0;
+ z-index: 1;
+ }
+
+ 50%, 100% {
+ opacity: 1;
+ z-index: 5;
+ }
+}
+
+.overlay-container {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ transition: transform 0.6s ease-in-out;
+ z-index: 100;
+}
+
+.account-width.right-panel-active .overlay-container{
+ transform: translateX(-100%);
+}
+
+.login-overlay {
+ background: #002B60;
+ background: -webkit-linear-gradient(180deg, #00B4D5 0%, #002B60 100%);
+ background: linear-gradient(180deg, #00B4D5 0%, #002B60 100%);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 0 0;
+ color: #FFFFFF;
+ position: relative;
+ left: -100%;
+ height: 100%;
+ width: 200%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.account-width.right-panel-active .login-overlay {
+ transform: translateX(50%);
+}
+
+.overlay-panel {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 40px;
+ text-align: center;
+ top: 0;
+ height: 100%;
+ width: 50%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+ transform: translateX(-20%);
+}
+
+.account-width.right-panel-active .overlay-left {
+ transform: translateX(0);
+}
+
+.overlay-right {
+ right: 0;
+ transform: translateX(0);
+}
+
+.account-width.right-panel-active .overlay-right {
+ transform: translateX(20%);
+}
+
+/*-----Recovery Account-----*/
+.recovery-account {
+ box-shadow: 0 14px 28px rgba(0,0,0,0.15);
+ border-radius:5px;
+ max-width:500px;
+ margin:0 auto 30px auto;
+ padding:30px 30px 45px;
+}
+.forgetpassword h1{
+ text-align:center;
+ font-size: 28px;
+ margin-bottom:30px;
+}
+
+/*Dashboard*/
+/* Style the tab */
+.tab {
+ float: left;
+ border: 1px solid #ccc;
+ background-color: #f1f1f1;
+ width:20%;
+
+ }
+
+ /* Style the buttons that are used to open the tab content */
+ .tab .tablinks {
+ display: block;
+ background-color: inherit;
+ color: black;
+ padding: 22px 16px;
+ width: 100%;
+ border: none;
+ outline: none;
+ text-align: left;
+ cursor: pointer;
+ transition: 0.3s;
+ font-weight:500;
+ }
+ .tab button svg{
+ margin-right:8px;
+ }
+ .tab button svg path{
+ fill:#000000;
+ }
+
+ /* Create an active/current "tab button" class */
+ .tab button.active, .tab button:hover {
+ color:#EB008B;
+ }
+ .tab button.active svg path, .tab button:hover svg path{
+ fill:#EB008B;
+ }
+
+ /* Style the tab content */
+ .tabcontent {
+ float: left;
+ border: 1px solid #ccc;
+ width: 80%;
+ border-left: none;
+ padding:30px 30px 20px;
+ }
+
+ /*-----------------dashboard- start--------------*/
+.dash-head{
+ background: #FFFFFF;
+ border: 1px solid #71D6E9;
+ box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(9, 30, 66, 0.31);
+ border-radius: 5px;
+ width: 100% !important;
+ display: flex;
+ align-items: center;
+}
+.dash-head h1{
+ color: #00B4D5;
+ font-size: 50px;
+}
+.dash-head p{
+ font-weight: 500;
+ font-size: 20px;
+ color: #475569;
+
+}
+.dash-table-head{
+ font-weight: 600;
+ font-size:22px;
+ color: #475569;
+ margin-bottom:0;
+}
+.table-design, .table-design tr{
+
+ border: 2px solid #EEF0F4;
+ text-align: center;
+ }
+.table-design th{
+ line-height: 50px;
+ font-weight: 500;
+ font-size: 17px;
+ color: #475569;
+}
+.table-design td:nth-child(1){
+ font-weight: 500;
+ font-size: 17px;
+ color: #475569;
+ }
+ .table-design td:nth-child(3), .table-design td:nth-child(4){
+ font-weight: 500;
+ font-size: 22px;
+ color: #21BB5E;
+ }
+ .table-design tr:nth-child(1){
+ background: #F9FBFC;
+ border-radius: 10px 10px 0px 0px;
+ line-height: 5;
+}
+
+.table-design p:nth-child(1){
+ font-weight: 500;
+ font-size: 17px;
+ color: #475569;
+ margin-bottom: 0;
+ padding-top: 20px;
+}
+.table-design p:nth-child(2){
+ font-weight: 400;
+ font-size: 15px;
+ color: #475569;
+}
+.table-white .order-total div{
+ line-height: 40px;
+}
+.table-white .custom-font td{
+ font-size: 15px!important;
+ line-height: 40px!important;
+}
+.table-design .credit-trans .red-content {
+ background: #FFE9EB;
+ color: #EC4C5B;
+}
+
+.table-design .credit-trans{
+ font-size: 15px;
+ width: 65px;
+ height: 32px;
+ line-height:30px;
+ background: #EAFFF2;
+ border-radius: 20px;
+ font-weight: 500;
+ display:block;
+ margin:0 auto;
+}
+.table-design .fa-caret-up:before, .table-design .fa-sort-desc:before{
+ font-size: 19px;
+}
+.table-design button:first-child{
+ border: 2px solid #E5E7EB;
+ border-radius: 5px;
+ font-size: 17px;
+ background-color: white;
+ color: #374151;
+ margin-right: 20px;
+ line-height: 32px;
+ width: 100px;
+ font-weight: 500;
+}
+.table-design button:nth-child(2){
+ background: #00B4D5;
+ border: 2px solid #00B4D5;
+ border-radius: 5px;
+ font-weight: 500;
+ font-size: 18px;
+ color: #FFFFFF;
+ line-height: 30px;
+ width: 95px;
+}
+.table-design .table-foot{
+ font-size: 14px !important;
+ letter-spacing: 0.1px;
+ color: #94A3B8 !important;
+ line-height: 80px;
+}
+
+.dash-foot{
+ background: #F9FBFC;
+ border-radius: 10px;
+ height: 40px;
+}
+.dash-foot div{
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 45px;
+ color: #4F545E;
+ text-align: center;
+}
+.dashboard-maintitle{
+ font-weight: 600;
+ font-size: 22px;
+ color: #475569;
+ margin-bottom:20px;
+}
+
+/*-----------------dashboard- end--------------*/
+
+/*----------------dashboard-order-start--------------*/
+
+.table-white{
+ width: 100%;
+ text-align: center;
+ border: 2px solid #EEF0F4;
+ border-radius: 10px
+}
+.table-white img,.table-grey img{
+ vertical-align: text-top;
+}
+.table-white th{
+ padding-top: 20px;
+ padding-bottom: 10px;
+ font-weight: 500;
+ font-size: 18px;
+ color: #4F545E;
+}
+.table-white td{
+ line-height: 50px;
+ font-weight: 500;
+ font-size: 18px;
+ color: #475569;
+}
+.table-white tr:first-of-type{
+
+ background: #F9FBFC;
+ border-radius: 10px 10px 0px 0px;
+}
+.table-white i{
+ border: 2px solid #EB008B;
+ border-radius: 290px;
+ color: #EB008B;
+ width: 18px;
+ height: 18px;
+ line-height: 17px;
+ font-size: 12px;
+}
+
+
+.table-grey{
+ background-color: #7A7A7A;
+ color: #fff;
+ border-bottom: 2px dashed #B1B1B1;
+ vertical-align:top;
+}
+.table-grey p:first-child{
+ font-size: 15px;
+ font-weight: 100;
+ margin-top: 10px;
+ margin-bottom: 0;
+
+}
+.table-grey p:nth-child(2){
+ font-size: 15px;
+ font-weight: 100;
+ margin-bottom:0;
+}
+.table-grey p:nth-child(3){
+ font-size: 14px;
+ font-weight: 100;
+}
+.table-grey td{
+ line-height:50px;
+ color: #fff;
+}
+
+.table-grey i{
+ color: white;
+ border: 2px solid #fff;
+}
+.table-grey li::marker{
+ padding:0;
+}
+.table-bottom{
+ border-bottom: none;
+}
+
+
+
+@media only screen and (min-width: 992px) {
+ .table-grey{
+ display: none
+ }
+}
+
+.memberaccess .dash-icon{
+ display:inline-block;
+ width:35px;
+}
+
+/*----------------dashboard-order-end-------------*/
+
+/*----------------dashboard-information-start--------------*/
+.information h4{
+ font-weight: 500;
+ font-size: 25px;
+ color: #475569;
+}
+.information label{
+ font-weight: 500;
+ font-size:18px;
+ color: #6B7280;
+}
+
+.information input[type=text], .information input[type=tel], .information input[type=password], .information select{
+ border: 3px solid #E5E7EB;
+ border-radius: 8px;
+ width: 100%;
+ height: 60px;
+ padding:10px;
+}
+.information .select2-container{
+ width: 100%!important;
+}
+.information .select2-selection__arrow{
+ top: 15px!important;
+ right: 10px!important;
+}
+.information .select2-selection__rendered{
+ line-height: 34px!important;
+}
+.information .select2-selection--single{
+ border: 3px solid #E5E7EB!important;
+ border-radius: 8px;
+ width: 100%!important;
+ height: 60px!important;
+ padding:10px;
+ display:block!important;
+}
+.information input[type=radio]{
+ width: 45px;
+ height: 20px;
+}
+.information button{
+ width: 198px;
+ height: 50px;
+ left: 534px;
+ background: #00B4D5;
+ border: none;
+ color: white;
+ border-radius: 5px;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 20px;
+}
+
+.password h3{
+ margin-top:50px;
+ margin-bottom:20px;
+ font-weight: 600;
+ font-size: 26px;
+ color: #475569;
+}
+
+
+#pswd_info {
+ background:#ffffff;
+ box-shadow: 0 14px 28px rgba(0,0,0,0.15);
+ color: #000;
+ right: -300px;
+ position: absolute;
+ top:-59px;
+ z-index: 99;
+ border-radius:5px;
+ padding-bottom:10px;
+}
+#pswd_info h4{
+ display: block;
+ font-size: 16px;
+ letter-spacing: 0;
+ padding: 10px 0;
+ text-align: center;
+ border-bottom:1px solid #ddd;
+}
+#pswd_info ul {
+ margin:0;
+}
+#pswd_info ul li {
+ padding: 5px 5px 0;
+}
+
+.valid {
+ /* background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px; */
+ color: green;
+ line-height: 21px;
+ padding-left: 22px;
+}
+
+.invalid {
+ /* background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px; */
+ color: red;
+ line-height: 21px;
+ padding-left: 22px;
+}
+
+#pswd_info::before {
+ background: #ffffff;
+ content: "";
+ height: 25px;
+ left: -13px;
+ margin-top: -12.5px;
+ position: absolute;
+ top: 50%;
+ transform: rotate(45deg);
+ width: 25px;
+}
+#pswd_info {
+ display:none;
+}
+.show-password1{ position: relative;}
+.show-password1 #pswd_info{
+ top:-55px;
+ right:-310px;
+}
+.credit-table-heading{
+ margin:30px 0 20px;
+}
+.credit-table{
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+ max-width:500px;
+}
+.credit-table table{
+ border-collapse: collapse;
+ width:100%;
+}
+.credit-table table, .credit-table table th, .credit-table table td{
+ border:1px solid #ddd;
+}
+.credit-table table th, .credit-table table td{
+ padding:8px;
+}
+.credit-table table th:last-child, .credit-table table td:last-child{
+ text-align: center;
+}
+.credit-table thead th{
+ background:#03a5c3;
+ color:#ffffff;
+ font-weight:600;
+}
+.credit-table tbody tr:nth-child(even) td{
+ background:#dff2f5;
+}
\ No newline at end of file
diff --git a/public/assets/member_js/ajax.js b/public/assets/member_js/ajax.js
new file mode 100644
index 0000000..82b4235
--- /dev/null
+++ b/public/assets/member_js/ajax.js
@@ -0,0 +1,315 @@
+$(document).ready(function(){
+ $(".pack-submit").click(function(){
+ id = $(this).attr("id");
+ console.log(id);
+ url = $('#url').val();
+ $.ajax({
+ type: "post",
+ url: ''+url+'add_package_cartdata',
+ data: { 'id' : id , 'c_token' : $('#c_token').val() },
+ json: true,
+ success: function(res) {
+ res = JSON.parse(res);
+ window.location = ''+url+'view_cart/'+res.token+'';
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+ });
+});
+
+
+$(document).ready(function(){
+$(".input-text").change(function(){
+ id = $(this).attr("id");
+ url = $('#url').val();
+ var cost = $('#cost_'+id+'').val();
+ $('.'+id+'').html('$'+$('#'+id+'').val() * cost+'');
+ // console.log($('.0').text().replace("$", ""));
+ subtotal = Number($('.0').text().replace("$", "")) + Number($('.1').text().replace("$", ""));
+ $('.subtotal').html('$'+subtotal+'');
+ pst = subtotal * $('#pst').val() / 100;
+ $('.pst').html('$'+pst+'');
+ gst = subtotal * $('#gst').val() / 100;
+ $('.gst').html('$'+gst+'');
+ total = subtotal + pst + gst;
+ $('.total').html('$'+total+'')
+
+
+ $.ajax({
+ type: "post",
+ url: ''+url+'change_count_onclick',
+ data: { 'id' : $('#cart_token_id_'+id+'').val() , 'count' : $('#'+id+'').val() },
+ json: true,
+ success: function(res) {
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+});
+});
+
+
+$(document).ready(function(){
+ $(".editAddress").click(function(){
+ id = $(this).attr("id");
+ alert(id);
+ url = $('#url').val();
+ $.ajax({
+ type: "post",
+ url: ''+url+'member_address_form',
+ data: { 'id' : id },
+ json: true,
+ success: function(res) {
+ $('.address-form').css('display','block');
+ $('.address-form').append(res);
+ // window.location = ''+url+'view_cart/'+res.token+'';
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+ });
+});
+
+$(document).ready(function(){
+ $(".submit").click(function(){
+ var formData = $('#member_address').serialize();
+ alert(formData);
+ url = $('#url').val();
+ $.ajax({
+ type: "post",
+ url: ''+url+'member_address_edit_or_add',
+ data: formData,
+ json: true,
+ success: function(res) {
+ if(res == true){
+ $('.address-form').css('display','none');
+ // $("#address_list").load(window.location + "#address_list");
+ }
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+ });
+});
+
+$(document).ready(function(){
+ $("#card-button").click(function(){
+ // $('#loading-spinner-overlay').css('visibility', 'visible');
+
+ });
+
+ $(".select-address").click(function(){
+
+ var value = $(this).attr("value");
+ $('#address_id').val(value);
+
+ });
+
+ var val = $('.checked').val();
+ $('#address_id').val(val);
+});
+
+$(document).ready(function(e){
+ $("#address-btn").click(function(){
+ // var formData = $('#member-address-save').serialize();
+ url = $('#url').val();
+ $.ajax({
+ type: "post",
+ url: ''+url+'member_address_edit',
+ data: {
+ id : $('#id').val(),
+ name : $('#first_name').val(),
+ last_name : $('#last_name').val(),
+ address : $('#street_address').val(),
+ gender : $("input[name='gender']:checked").val(),
+ city : $('#city').val(),
+ state : $('#state').val(),
+ pincode : $('#pincode').val()
+ },
+ json: true,
+ success: function(res) {
+ if(res == true){
+ // $("#member-address").load(location.href + " #member-address");
+ console.log((res));
+ $('.success-message').show();
+ $('.success-message').delay(3000).fadeOut('slow');
+ }
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+ });
+});
+
+
+$(document).ready(function(e){
+ $("#pass-btn").click(function(){
+ const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}/;
+ if ($('#old_password').val() != '' && $('#new_password').val() != "" && $('#confirm_password').val() != "" )
+ {
+ if ($('#old_password').val() != $('#new_password').val())
+ {
+ if (passwordPattern.test($('#new_password').val()))
+ {
+ $('#error_np').html("");
+ old_password = $('#old_password').val();
+ new_password = $('#new_password').val();
+ confirm_password = $('#confirm_password').val();
+ var formData = $('#member-pass-save').serialize();
+ url = $('#url').val();
+ if (new_password == confirm_password)
+ {
+ $.ajax({
+ type: "post",
+ url: ''+url+'member_password_edit',
+ data: formData,
+ json: true,
+ success: function(res) {
+ if(res == 1){
+ window.location.href = url+"member_logout";
+ }
+ else{
+ $('#error_op_after_check').html("Please check your old password").css('color' , 'red');
+ $('#old_password').val(old_password);
+ $('#new_password').val(new_password);
+ $('#old_password').val(old_password);
+ $('#confirm_password').val('');
+ }
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+ }
+ else
+ {
+ $('#error_op_after_check').html("Please check your old password").css('color' , 'red');
+ }
+ }
+ else
+ {
+ $('#error_np').html("Must contain at least one number
and one uppercase
and one special character like !@#$%^&*()
and lowercase letter,
and at least 8 or more characters").css('color' , 'red');
+ }
+ }
+ else
+ {
+ $('#error_np').html("Old password and new passowrd is same").css('color' , 'red');
+ }
+ }
+ else
+ {
+ if ($('#old_password').val() == "" )
+ {
+ $('#error_op_after_check').html("Input required").css('color' , 'red');
+ }
+ if ($('#new_password').val() == "")
+ {
+ $('#error_np').html("Input required").css('color' , 'red');
+ }
+ if ($('#confirm_password').val() == "" )
+ {
+ $('#error_cp').html("Input required").css('color' , 'red');
+ }
+ }
+
+ });
+});
+
+$(document).ready(function(e){
+$('#old_password').on('keyup', function () {
+ $('#error_op_after_check').html("");
+ url = $('#url').val();
+ $.ajax({
+ type: "post",
+ url: ''+url+'check_old_password',
+ data: { id : $('#id').val() ,old_password : $('#old_password').val() },
+ json: true,
+ success: function(res) {
+ console.log(res);
+ if(res == 1){
+ $('#error_op').html("Matching").css('color' , 'green')
+ }
+ else{
+ if ($('#old_password').val().length == 0) {
+ $('#error_op').html("");
+ } else {
+ $('#error_op').html("Not matching").css('color' , 'red');
+ }
+
+ }
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+});
+});
+
+
+$(document).ready(function(){
+$('#new_password, #confirm_password').on('keyup', function () {
+ if ($('#confirm_password').val() == "" )
+ {
+ $('#error_cp').html('');
+ }
+ if ($('#new_password').val() == "" )
+ {
+ $('#error_np').html("");
+ }
+ if($('#confirm_password').val() != $('#new_password').val())
+ {
+ $('#error_cp').html("Password and confirm password doesn't match").css('color', 'red');
+ }
+ else
+ {
+ $('#error_cp').html("");
+ }
+ if ($('#new_password').val() == $('#confirm_password').val() && $('#confirm_password').val().length > 0 ) {
+ // $('#error_cp').html('Matching').css('color', 'green');
+ }
+ else if($('#new_password').val().length == 0 || $('#confirm_password').val().length == 0){
+ if ($('#confirm_password').val() == "" )
+ $('#error_cp').html('');
+ if ($('#new_password').val() != "" )
+ $('#error_np').html("");
+ }
+
+});
+});
+
+$(document).ready(function(e){
+ $("#pincode").change(function(){
+ zip_id = $("#pincode").val();
+ url = $('#url').val();
+ $.ajax({
+ type: "post",
+ url: ''+url+'zipcode_data',
+ data: { 'id' : zip_id },
+ json: true,
+ success: function(res) {
+ res = JSON.parse(res);
+ if(res != 0){
+ $('#city').val(res[0].city);
+ $('#state').val(res[0].state);
+ }
+ },
+ error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+ });
+ });
+});
+
+
+
+// $(document).ready(function(){
+// $(".pack-submit").click(function(){
+// id = $(this).attr("id");
+// url = $('#url').val();
+// console.log($('#c_token').val())
+// $.ajax({
+// type: "post",
+// url: ''+url+'add_package_cartdata',
+// data: { 'id' : id , 'c_token' : $('#c_token').val() },
+// json: true,
+// success: function(res) {
+// res = JSON.parse(res);
+// console.log(res);
+// $('#c_token').val(res.token);
+// $('#'+id+'').html('View Cart');
+// $('#'+id+'').attr('href', ''+url+'view_cart/'+res.token+'')
+// },
+// error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
+// });
+// });
+// });
\ No newline at end of file
diff --git a/public/square-js/sq-ach.js b/public/square-js/sq-ach.js
new file mode 100644
index 0000000..800749a
--- /dev/null
+++ b/public/square-js/sq-ach.js
@@ -0,0 +1,50 @@
+async function ACHPay(buttonEl) {
+ const accountHolderNameEl = document.getElementById('ach-account-holder-name');
+ const achMessageEl = document.getElementById('ach-message');
+ const achWrapperEl = document.getElementById('ach-wrapper');
+
+ let ach;
+ try {
+ ach = await window.payments.ach();
+ achWrapperEl.style.display = 'block';
+ } catch (e) {
+ // If the ACH payment method is not supported by your account then
+ // do not enable the #ach-account-holder-name input field
+ if (e.name === 'PaymentMethodUnsupportedError') {
+ achMessageEl.innerText = 'ACH payment is not supported by your account';
+ accountHolderNameEl.disabled = true;
+ }
+
+ // if we can't load ACH, we shouldn't bind events for the button
+ return;
+ }
+
+ async function eventHandler(event) {
+ const accountHolderName = accountHolderNameEl.value.trim()
+ if (accountHolderName === '') {
+ achMessageEl.innerText = 'Please input full name';
+ return;
+ }
+
+ // Clear any existing messages
+ window.paymentFlowMessageEl.innerText = '';
+
+ try {
+ const result = await ach.tokenize({
+ accountHolderName,
+ });
+ if (result.status === 'OK') {
+ // Use global method from sq-payment-flow.js
+ window.createPayment(result.token);
+ }
+ } catch (e) {
+ if (e.message) {
+ window.showError(`Error: ${e.message}`);
+ } else {
+ window.showError('Something went wrong');
+ }
+ }
+ }
+
+ buttonEl.addEventListener('click', eventHandler);
+}
diff --git a/public/square-js/sq-apple-pay.js b/public/square-js/sq-apple-pay.js
new file mode 100644
index 0000000..06a29f1
--- /dev/null
+++ b/public/square-js/sq-apple-pay.js
@@ -0,0 +1,35 @@
+async function ApplePay(buttonEl) {
+ const paymentRequest = window.payments.paymentRequest(
+ // Use global method from sq-payment-flow.js
+ window.getPaymentRequest()
+ );
+
+ let applePay;
+ try {
+ applePay = await window.payments.applePay(paymentRequest);
+ } catch (e) {
+ console.error(e)
+ return;
+ }
+
+ async function eventHandler(event) {
+ // Clear any existing messages
+ window.paymentFlowMessageEl.innerText = '';
+
+ try {
+ const result = await applePay.tokenize();
+ if (result.status === 'OK') {
+ // Use global method from sq-payment-flow.js
+ window.createPayment(result.token);
+ }
+ } catch (e) {
+ if (e.message) {
+ window.showError(`Error: ${e.message}`);
+ } else {
+ window.showError('Something went wrong');
+ }
+ }
+ }
+
+ buttonEl.addEventListener('click', eventHandler);
+}
diff --git a/public/square-js/sq-card-pay.js b/public/square-js/sq-card-pay.js
new file mode 100644
index 0000000..0918b20
--- /dev/null
+++ b/public/square-js/sq-card-pay.js
@@ -0,0 +1,35 @@
+async function CardPay(fieldEl, buttonEl) {
+ // Create a card payment object and attach to page
+ const card = await window.payments.card({
+ style: {
+ '.input-container.is-focus': {
+ borderColor: '#006AFF'
+ },
+ '.message-text.is-error': {
+ color: '#BF0020'
+ }
+ }
+ });
+ await card.attach(fieldEl);
+
+ async function eventHandler(event) {
+ // Clear any existing messages
+ window.paymentFlowMessageEl.innerText = '';
+
+ try {
+ const result = await card.tokenize();
+ if (result.status === 'OK') {
+ // Use global method from sq-payment-flow.js
+ window.createPayment(result.token);
+ }
+ } catch (e) {
+ if (e.message) {
+ window.showError(`Error: ${e.message}`);
+ } else {
+ window.showError('Something went wrong');
+ }
+ }
+ }
+
+ buttonEl.addEventListener('click', eventHandler);
+}
diff --git a/public/square-js/sq-google-pay.js b/public/square-js/sq-google-pay.js
new file mode 100644
index 0000000..533b214
--- /dev/null
+++ b/public/square-js/sq-google-pay.js
@@ -0,0 +1,29 @@
+async function GooglePay(buttonEl) {
+ const paymentRequest = window.payments.paymentRequest(
+ // Use global method from sq-payment-flow.js
+ window.getPaymentRequest()
+ );
+ const googlePay = await payments.googlePay(paymentRequest);
+ await googlePay.attach(buttonEl);
+
+ async function eventHandler(event) {
+ // Clear any existing messages
+ window.paymentFlowMessageEl.innerText = '';
+
+ try {
+ const result = await googlePay.tokenize();
+ if (result.status === 'OK') {
+ // Use global method from sq-payment-flow.js
+ window.createPayment(result.token);
+ }
+ } catch (e) {
+ if (e.message) {
+ window.showError(`Error: ${e.message}`);
+ } else {
+ window.showError('Something went wrong');
+ }
+ }
+ }
+
+ buttonEl.addEventListener('click', eventHandler);
+}
diff --git a/public/square-js/sq-payment-flow.js b/public/square-js/sq-payment-flow.js
new file mode 100644
index 0000000..50263f1
--- /dev/null
+++ b/public/square-js/sq-payment-flow.js
@@ -0,0 +1,220 @@
+async function SquarePaymentFlow() {
+
+
+
+ // Create card payment object and attach to page
+
+ CardPay(document.getElementById('card-container'), document.getElementById('card-button'));
+
+
+
+ //Create Apple pay instance
+
+ // ApplePay(document.getElementById('apple-pay-button'));
+
+
+
+ // Create Google pay instance
+
+ // GooglePay(document.getElementById('google-pay-button'));
+
+
+
+ //Create ACH payment
+
+ // ACHPay(document.getElementById('ach-button'));
+
+}
+
+
+
+window.payments = Square.payments(window.applicationId, window.locationId);
+
+
+
+window.paymentFlowMessageEl = document.getElementById('payment-flow-message');
+
+
+
+window.showSuccess = function(message) {
+
+ window.paymentFlowMessageEl.classList.add('success');
+
+ window.paymentFlowMessageEl.classList.remove('error');
+
+ window.paymentFlowMessageEl.innerText = message;
+
+}
+
+
+
+window.showError = function(message) {
+
+ window.paymentFlowMessageEl.classList.add('error');
+
+ window.paymentFlowMessageEl.classList.remove('success');
+
+ window.paymentFlowMessageEl.innerText = message;
+
+}
+
+
+
+window.createPayment = async function(token) {
+
+ $('#loading-spinner-overlay').css('visibility', 'visible');
+
+ var address = $('#member_address').serialize();
+
+ const dataJsonString = JSON.stringify({
+
+ token,
+
+ idempotencyKey: window.idempotencyKey,
+
+ amount : document.getElementById('amount').value,
+
+ order_id : document.getElementById('order_id').value,
+
+ address : address
+
+ });
+
+
+
+ try {
+
+ var getUrl = window.location;
+
+ path_name = "/"+getUrl.pathname.split('/')[1];
+
+
+
+
+ const response = await fetch(window.location.origin+path_name+"/processPayment", {
+
+ method: 'POST',
+
+ headers: {
+
+ 'Content-Type': 'application/json'
+
+ },
+
+ body: dataJsonString
+
+ });
+
+
+
+
+
+ const data = await response.json();
+
+
+
+
+
+ if (data.errors && data.errors.length > 0) {
+
+ if (data.errors[0].detail) {
+
+ console.log(data);
+
+ //window.showError(data.errors[0].detail);
+
+ var getUrl = window.location;
+
+ path_name = "/"+getUrl.pathname.split('/')[1];
+
+ window.location.href = window.location.origin+path_name+"/payment_failed/"+document.getElementById('order_id').value;
+
+ } else {
+
+ window.showError('Payment Failed.');
+
+ }
+
+ } else {
+
+ var getUrl = window.location;
+
+ path_name = "/"+getUrl.pathname.split('/')[1];
+
+ window.location.href = window.location.origin+path_name+"/payment_success/"+document.getElementById('order_id').value;
+
+ // window.showSuccess('Payment Successful!');
+
+ }
+
+ } catch (error) {
+
+ console.error('Error:', error);
+
+ }
+
+}
+
+
+
+// Hardcoded for testing purpose, only used for Apple Pay and Google Pay
+
+window.getPaymentRequest = function() {
+
+ return {
+
+ countryCode: window.country,
+
+ currencyCode: window.currency,
+
+ lineItems: [
+
+ { amount: '1.23', label: 'Cat', pending: false },
+
+ { amount: '4.56', label: 'Dog', pending: false },
+
+ ],
+
+ requestBillingContact: false,
+
+ requestShippingContact: true,
+
+ shippingContact: {
+
+ addressLines: ['123 Test St', ''],
+
+ city: 'San Francisco',
+
+ countryCode: 'US',
+
+ email: 'test@test.com',
+
+ familyName: 'Last Name',
+
+ givenName: 'First Name',
+
+ phone: '1111111111',
+
+ postalCode: '94109',
+
+ state: 'CA',
+
+ },
+
+ shippingOptions: [
+
+ { amount: '0.00', id: 'FREE', label: 'Free' },
+
+ { amount: '9.99', id: 'XP', label: 'Express' },
+
+ ],
+
+ total: { amount: '1.00', label: 'Total', pending: false },
+
+ };
+
+};
+
+
+
+SquarePaymentFlow();
\ No newline at end of file
diff --git a/public/square-stylesheets/sq-payment.css b/public/square-stylesheets/sq-payment.css
new file mode 100644
index 0000000..669ee46
--- /dev/null
+++ b/public/square-stylesheets/sq-payment.css
@@ -0,0 +1,125 @@
+.payment-form {
+ padding: 50px 0px 50px 0px;
+ width: 100%;
+ max-width: 1000px;
+ margin: 40px auto;
+ display: flex;
+ justify-content: center;
+ border-radius: 20px;
+}
+
+.payment-form {
+ align-items: center;
+}
+
+@media (max-width: 1050px) {
+ .payment-form {
+ border-radius: 0;
+ margin: 0;
+ height: 110vh;
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ .payment-form {
+ padding: 30px;
+ box-sizing: border-box;
+ }
+}
+
+#apple-pay-button {
+ height: 48px;
+ width: 100%;
+ display: inline-block;
+ -webkit-appearance: -apple-pay-button;
+ -apple-pay-button-type: plain;
+ -apple-pay-button-style: black;
+}
+
+#fast-checkout {
+ background: #fafafa;
+ color: black;
+}
+
+#fast-checkout input {
+ border-radius: 6px;
+ position: relative;
+}
+
+#fast-checkout .wrapper {
+ max-width: 343px;
+ position: relative;
+}
+
+#fast-checkout button {
+ width: 100%;
+}
+
+#fast-checkout button#apple-pay-button {
+ background: white;
+ color: black;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ justify-content: center;
+ line-height: 18px;
+ padding: 13px;
+}
+
+#fast-checkout .border {
+ color: rgba(0, 0, 0, 0.55);
+ background: rgba(0, 0, 0, 0.1);
+ height: 1px;
+ width: 100%;
+ margin: 30px 0;
+ font-size: 12px;
+ line-height: 20px;
+ text-transform: uppercase;
+ position: relative;
+}
+
+#fast-checkout .border span {
+ position: absolute;
+ top: -10px;
+ background: #fafafa;
+ padding: 0 10px;
+ left: calc(50% - 1em - 5px);
+}
+
+#ach-wrapper {
+ display: none;
+}
+
+#ach-wrapper input:first-of-type {
+ margin-bottom: 10px;
+}
+
+#ach-message {
+ width: 100%;
+ margin-top: 11px;
+ margin-bottom: 11px;
+ font-size: 14px;
+ display: inline-block;
+ color: #bf0020;
+}
+
+#ach-message:empty:before, #message:empty:before {
+ content: "\200b";
+}
+
+#payment-flow-message {
+ width: 100%;
+ margin-top: 11px;
+ margin-bottom: 11px;
+ height: 100px;
+ display: block;
+}
+
+#payment-flow-message.error {
+ color: #bf0020;
+ font-size: 12px;
+ line-height: 14px;
+}
+
+#payment-flow-message.success {
+ color: #3374ff;
+}
diff --git a/public/square-stylesheets/style.css b/public/square-stylesheets/style.css
new file mode 100644
index 0000000..f82fe40
--- /dev/null
+++ b/public/square-stylesheets/style.css
@@ -0,0 +1,68 @@
+@import url(https://square-fonts-production-f.squarecdn.com/square-sans.min.css);
+
+html {
+ color: #151c1f;
+ font-family: var(--square-sans-text);
+ font-size: 16px;
+ line-height: 24px;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+
+ background: #ffffff;
+ color: rgba(0, 0, 0, 0.55);
+ font-family: var(--square-sans-text);
+}
+
+h1 {
+ text-align: center;
+}
+
+form {
+ width: 100%;
+ max-width: 700px;
+ margin: 0 auto;
+}
+
+button {
+ font-family: var(--square-sans-text);
+ margin: 0 auto 20px auto;
+ background-color: #3374ff;
+ padding: 12px 16px;
+ color: #fff;
+ border-radius: 8px;
+ border: none;
+}
+
+button:focus {
+ outline: none;
+}
+
+button:hover {
+ cursor: pointer;
+ filter: brightness(90%);
+ -webkit-transition: all 30ms ease-in-out;
+ -moz-transition: all 30ms ease-in-out;
+ -ms-transition: all 30ms ease-in-out;
+ -o-transition: all 30ms ease-in-out;
+ transition: all 30ms ease-in-out;
+}
+
+input:focus {
+ border: none;
+ outline: none;
+}
+
+input {
+ width: 100%;
+ height: 48px;
+ padding-left: 16px;
+ background-color: #fff;
+ font-size: 16px;
+ border: 1px solid #d9d9d9;
+ box-sizing: border-box;
+}