tf-checkout-react 1.0.106-beta.7 → 1.0.106-beta.8

package/dist/tf-checkout-styles.css

@@ -1 +1 @@
-.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.timer{background-color:#000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-position:15px;background-repeat:no-repeat;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .close-icon{cursor:pointer;display:flex;position:absolute;right:10px;top:10px}.timer .countdown{font-weight:700;margin-top:10px}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{background-color:#000;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.get-tickets-page{width:100%}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message{margin-bottom:15px;text-align:center}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px;margin-bottom:10px}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1400}.order-details .layout-title{font-size:24px;font-weight:400}.order-details .sub-title{font-size:18px;font-weight:400;margin:10px 0}.order-details .order-summary-box{margin-top:30px}.order-details .total-row td,.order-details th{color:#fff;font-weight:700}.order-details .tickets-box{margin-top:30px}.order-details .ticket-add-on-table{background-color:#fcf8e3}.order-details .action-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:14px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:max-content}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}.resale-modal .field-box{display:flex;margin-bottom:10px}.resale-modal .field-box .icon{align-items:center;display:flex;height:56px;justify-content:center;min-width:44px}.resale-modal .field-box .empty-box{min-width:44px}.resale-modal .resale-action-button button{background-color:#212529;color:#fff;cursor:pointer;width:100%}.resale-modal .resale-action-button button[disabled]{opacity:.7}.resale-modal .resale-action-button button:hover{background-color:#505050;border-color:#505050;width:100%}.confirm-modal .footer{border-top:1px solid #c0bfbf;display:flex;gap:10px;justify-content:flex-end}.confirm-modal .footer button,.confirm-modal .footer button:hover{font-size:12px;min-height:unset;padding:12px 8px;text-transform:unset;width:max-content}.confirm-modal .footer button:hover{background:#505050}
+.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}button{margin-top:10px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.signup-modal .signup-container{margin:0 auto;max-width:800px}.signup-modal .title{background-color:#fff;font-family:Inter;font-size:18px;font-weight:700}.signup-modal .signup-container .is-half{width:49%}.signup-modal .signup-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.signup-modal .signup-container__singleField{margin-top:15px}.signup-modal button{margin-top:10px}.signup-modal .signup-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:10px;outline:none;padding:10px;text-transform:uppercase;width:100%}.signup-modal .signup-action-button button:hover:enabled{background-color:#505050;border-color:#505050}.signup-modal .login{margin-top:10px;text-align:center}.signup-modal .login span{cursor:pointer}.signup-modal .login span:hover{text-decoration:underline}.signup-modal button[disabled]{cursor:unset;opacity:.7}.forgot-password-modal .forgot-password-container{margin:0 auto;max-width:800px}.forgot-password-modal .title{background-color:#fff;font-family:Inter;font-size:18px;font-weight:700}.forgot-password-modal .forgot-password-container__singleField{margin-top:15px}.forgot-password-modal .forgot-password-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:10px;outline:none;padding:10px;text-transform:uppercase;width:100%}.forgot-password-modal .forgot-password-action-button button:hover:enabled{background-color:#505050;border-color:#505050}.forgot-password-modal .login{margin-top:10px;text-align:center}.forgot-password-modal .login span{cursor:pointer}.forgot-password-modal .login span:hover{text-decoration:underline}.forgot-password-modal button[disabled]{cursor:unset;opacity:.7}.timer{background-color:#000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-position:15px;background-repeat:no-repeat;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .close-icon{cursor:pointer;display:flex;position:absolute;right:10px;top:10px}.timer .countdown{font-weight:700;margin-top:10px}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{background-color:#000;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.get-tickets-page{width:100%}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message{margin-bottom:15px;text-align:center}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px;margin-bottom:10px}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1400}.order-details .layout-title{font-size:24px;font-weight:400}.order-details .sub-title{font-size:18px;font-weight:400;margin:10px 0}.order-details .order-summary-box{margin-top:30px}.order-details .total-row td,.order-details th{color:#fff;font-weight:700}.order-details .tickets-box{margin-top:30px}.order-details .ticket-add-on-table{background-color:#fcf8e3}.order-details .action-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:14px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:max-content}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}.resale-modal .field-box{display:flex;margin-bottom:10px}.resale-modal .field-box .icon{align-items:center;display:flex;height:56px;justify-content:center;min-width:44px}.resale-modal .field-box .empty-box{min-width:44px}.resale-modal .resale-action-button button{background-color:#212529;color:#fff;cursor:pointer;width:100%}.resale-modal .resale-action-button button[disabled]{opacity:.7}.resale-modal .resale-action-button button:hover{background-color:#505050;border-color:#505050;width:100%}.confirm-modal .footer{border-top:1px solid #c0bfbf;display:flex;gap:10px;justify-content:flex-end}.confirm-modal .footer button,.confirm-modal .footer button:hover{font-size:12px;min-height:unset;padding:12px 8px;text-transform:unset;width:max-content}.confirm-modal .footer button:hover{background:#505050}.reset-password{margin:0 auto;max-width:300px;padding:14px}.reset-password .title{font-size:20px;font-weight:700}.reset-password .field-item{margin-top:14px}.reset-password .action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:14px;outline:none;padding:10px;text-transform:uppercase;width:100%}.reset-password .action-button button:hover:enabled{background-color:#505050;border-color:#505050}.reset-password .action-button button[disabled]{cursor:unset;opacity:.7}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.106-beta.7",
+  "version": "1.0.106-beta.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -288,6 +288,19 @@ export const postReferralVisits = (eventId: string, referralId: string) =>
     referrer: `${referralId}`,
   })
 
+// forgot password
+export const forgotPassword = (email: string) =>
+  publicRequest.post(`/v1/oauth/restore-password-rn`, { email })
+
+// reset password
+interface IResetPasswordData {
+  token: string
+  password: string
+  confirmPassword: string
+}
+export const resetPassword = (data: IResetPasswordData) =>
+  publicRequest.post(`/v1/oauth/reset-password-rn`, data)
+
 export const processTicket = (hash: string) => {
   return publicRequest.post(`v1/ticket/${hash}/process/`)
 }

package/src/components/billing-info-container/index.tsx

@@ -30,7 +30,8 @@ import {
   getStates,
 } from '../../api'
 import { LoginModal } from '../loginModal'
-import { RegisterModal } from '../registerModal'
+import { SignupModal } from '../signupModal'
+import { ForgotPasswordModal } from '../forgotPasswordModal'
 import {
   assingUniqueIds,
   createCheckoutDataBody,
@@ -95,9 +96,13 @@ export interface IBillingInfoPage {
   onSkipBillingPage: (data: any) => void;
   skipPage?: boolean;
   canSkipHolderNames?: boolean;
+  onForgotPasswordSuccess?: (res: any) => void;
+  onForgotPasswordError?: (e: AxiosError) => void;
   onCountdownFinish?: () => void;
   enableTimer?: boolean;
   logo?: string;
+  showForgotPasswordButton?: boolean;
+  showSignUpButton?: boolean;
 }
 
 const LogicRunner: FC<{
@@ -213,9 +218,13 @@ export const BillingInfoContainer = ({
   onSkipBillingPage = () => {},
   skipPage = false,
   canSkipHolderNames = false,
+  onForgotPasswordSuccess = () => {},
+  onForgotPasswordError = () => {},
   onCountdownFinish = () => {},
   enableTimer = false,
-  logo
+  logo,
+  showForgotPasswordButton = false,
+  showSignUpButton = false
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -237,7 +246,8 @@ export const BillingInfoContainer = ({
   const [showModalLogin, setShowModalLogin] = useState(false)
   const [alreadyHasUser, setAlreadyHasUser] = useState(false)
   const [userExpired, setUserExpired] = useState(false)
-  const [showModalRegister, setShowModalRegister] = useState(false)
+  const [showModalSignup, setShowModalSignup] = useState(false)
+  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
   const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
   const [userValues, setUserValues] = useState<any>({
     firstName: '',
@@ -792,21 +802,42 @@ export const BillingInfoContainer = ({
             onGetProfileDataSuccess(data)
           }}
           onGetProfileDataError={onGetProfileDataError}
+          showSignUpButton={showSignUpButton}
+          showForgotPasswordButton={showForgotPasswordButton}
+          onForgotPassword={() => {
+            setShowModalLogin(false)
+            setShowModalForgotPassword(true)
+          }}
+          onSignup={() => {
+            setShowModalLogin(false)
+            setShowModalSignup(true)
+          }}
         />
       )}
-      {showModalRegister && (
-        <RegisterModal
+      {showModalSignup && (
+        <SignupModal
           onClose={() => {
-            setShowModalRegister(false)
+            setShowModalSignup(false)
           }}
-          onRegister={() => {
-            setShowModalRegister(false)
+          onLogin={() => {
+            setShowModalSignup(false)
+            setShowModalLogin(true)
           }}
-          onGetProfileDataSuccess={(data: any) => {
-            fetchCart()
-            onGetProfileDataSuccess(data)
+          onRegisterSuccess={onRegisterSuccess}
+          onRegisterError={onRegisterError}
+        />
+      )}
+      {showModalForgotPassword && (
+        <ForgotPasswordModal
+          onClose={() => {
+            setShowModalForgotPassword(false)
           }}
-          onGetProfileDataError={onGetProfileDataError}
+          onLogin={() => {
+            setShowModalForgotPassword(false)
+            setShowModalLogin(true)
+          }}
+          onForgotPasswordSuccess={onForgotPasswordSuccess}
+          onForgotPasswordError={onForgotPasswordError}
         />
       )}
     </ThemeProvider>

package/src/components/forgotPasswordModal/index.tsx

@@ -0,0 +1,107 @@
+import React, { FC, useState } from 'react'
+import { Field, Form, Formik } from 'formik'
+import axios, { AxiosError } from 'axios'
+import { Modal, Box, CircularProgress } from '@mui/material'
+import { CustomField } from '../common/CustomField'
+import * as Yup from 'yup'
+import { forgotPassword } from '../../api'
+import './style.css'
+
+interface IForgotPasswordProps {
+  onClose: () => void
+  onLogin: () => void
+  onForgotPasswordSuccess: (res: any) => void
+  onForgotPasswordError: (e: AxiosError) => void
+}
+
+interface ValuesTypes {
+  email: string
+}
+
+const style: React.CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+}
+
+const Schema = Yup.object().shape({
+  email: Yup.string()
+    .email('Invalid email')
+    .required('Required'),
+})
+
+export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
+  onClose = () => {},
+  onLogin = () => {},
+  onForgotPasswordSuccess = () => {},
+  onForgotPasswordError = () => {},
+}) => {
+  const [loading, setLoading] = useState(false)
+
+  const onForgotPassword = async ({ email }: ValuesTypes) => {
+    try {
+      setLoading(true)
+      const { data } = await forgotPassword(email)
+
+      onForgotPasswordSuccess(data)
+      onClose()
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onForgotPasswordError(e)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const _onClose = loading ? () => {} : onClose
+
+  return (
+    <Modal
+      open={true}
+      onClose={_onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className="forgot-password-modal"
+    >
+      <Box style={style}>
+        <div>
+          <Formik
+            initialValues={{ email: '' }}
+            validationSchema={Schema}
+            onSubmit={onForgotPassword}
+          >
+            {({ isValid, dirty, handleSubmit }) => (
+              <Form onSubmit={handleSubmit}>
+                <div className="forgot-password-container">
+                  <div className="title">Password Reset</div>
+                  <div className="forgot-password-container__singleField">
+                    <Field
+                      name="email"
+                      label="Email"
+                      component={CustomField}
+                    />
+                  </div>
+                </div>
+                <div className="forgot-password-action-button">
+                  <button type="submit" disabled={!(isValid && dirty)}>
+                    {loading ? <CircularProgress size="22px" /> : 'Submit'}
+                  </button>
+                </div>
+                <div className="login">
+                  <span onClick={onLogin}>Back to Log In</span>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/forgotPasswordModal/style.css

@@ -0,0 +1,47 @@
+.forgot-password-modal .forgot-password-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+.forgot-password-modal .title {
+  background-color: #fff;
+  font-family: Inter;
+  font-weight: 700;
+  font-size: 18px;
+}
+.forgot-password-modal .forgot-password-container__singleField {
+  margin-top: 15px;
+}
+.forgot-password-modal .forgot-password-action-button button {
+  padding: 10px;
+  width: 100%;
+  margin-top: 10px;
+  border: none;
+  border-radius: 0;
+  height: 45px;
+  font-weight: 600;
+  font-size: 26px;
+  line-height: 18px;
+  color: white;
+  cursor: pointer;
+  outline: none;
+  background-color: #212529;
+  text-transform: uppercase;
+}
+.forgot-password-modal .forgot-password-action-button button:hover:enabled {
+  background-color: #505050;
+  border-color: #505050;
+}
+.forgot-password-modal .login {
+  text-align: center;
+  margin-top: 10px;
+}
+.forgot-password-modal .login span {
+  cursor: pointer;
+}
+.forgot-password-modal .login span:hover {
+  text-decoration: underline;
+}
+.forgot-password-modal button[disabled] {
+  opacity: .7;
+  cursor: unset;
+}

package/src/components/index.ts

@@ -4,4 +4,5 @@ export { PaymentContainer } from './paymentContainer'
 export { TicketsContainer } from './ticketsContainer'
 export { MyTicketsContainer } from './myTicketsContainer'
 export { OrderDetailsContainer } from './orderDetailsContainer'
+export { ResetPasswordContainer } from './resetPasswordContainer'
 export { TicketResaleContainer } from './ticketResale'

package/src/components/loginModal/index.tsx

@@ -25,8 +25,12 @@ interface Props {
   onAuthorizeError?: (e: AxiosError) => void;
   onGetProfileDataSuccess?: (res: any) => void;
   onGetProfileDataError?: (e: AxiosError) => void;
+  onForgotPassword?: () => void;
+  onSignup?: () => void;
   modalClassname?: string;
   logo?: string;
+  showForgotPasswordButton?: boolean;
+  showSignUpButton?: boolean;
 }
 
 const style: React.CSSProperties = {
@@ -49,15 +53,14 @@ export const LoginModal: FC<Props> = ({
   onAuthorizeError = () => {},
   onGetProfileDataSuccess = () => {},
   onGetProfileDataError = () => {},
+  onForgotPassword = () => {},
+  onSignup = () => {},
   modalClassname = '',
-  logo
+  logo,
+  showForgotPasswordButton = false,
+  showSignUpButton = false,
 }) => {
   const [error, setError] = useState('')
-  const handleForgotPassword = () => {
-    if (typeof window !== 'undefined') {
-      window.open(`${CONFIGS.BASE_URL}/password-restore/`)
-    }
-  }
   return (
     <Modal
       open={true}
@@ -199,9 +202,16 @@ export const LoginModal: FC<Props> = ({
                   <div className="login-action-button">
                     <button type="submit">Login</button>
                   </div>
-                  <div className='forgot-password'>
-                    <span onClick={handleForgotPassword}>Forgot password?</span>
-                  </div>
+                  {showForgotPasswordButton && (
+                    <div className="forgot-password">
+                      <span onClick={onForgotPassword}>Forgot password?</span>
+                    </div>
+                  )}
+                  {showSignUpButton && (
+                    <div className="forgot-password">
+                      <span onClick={onSignup}>Sign up</span>
+                    </div>
+                  )}
                 </div>
               </Form>
             )}

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -61,19 +61,17 @@ const TicketsTable = ({
                 <TableCell>{ticket.ticket_type}</TableCell>
                 <TableCell>{ticket.holder_name}</TableCell>
                 <TableCell>{ticket.status}</TableCell>
-                <TableCell>
-                  {
-                    ticket.status !== "Sold" && (
-                      <span
-                        aria-hidden={true}
-                        className="action-button"
-                        onClick={() => downloadPDF(ticket.pdf_link)}
-                      >
-                        Download
-                      </span>
-                    )
-                  }
-                </TableCell>
+                {ticket.pdf_link && ticket.status !== "Sold" ? (
+                  <TableCell>
+                    <span
+                      aria-hidden={true}
+                      className="action-button"
+                      onClick={() => downloadPDF(ticket.pdf_link)}
+                    >
+                      Download
+                    </span>
+                  </TableCell>
+                ) : null}
                 <TableCell>
                   {ticket.is_sellable && (
                     <span

package/src/components/resetPasswordContainer/index.tsx

@@ -0,0 +1,96 @@
+import React, { FC, useState } from 'react'
+import { Field, Form, Formik } from 'formik'
+import { CircularProgress } from '@mui/material'
+import { CustomField } from '../common/CustomField'
+import axios, { AxiosError } from 'axios'
+import * as Yup from 'yup'
+import { resetPassword } from '../../api'
+import './style.css'
+
+interface IResetPasswordProps {
+  token?: string
+  onResetPasswordSuccess?: (res: any) => void
+  onResetPasswordError?: (e: AxiosError) => void
+}
+
+const Schema = Yup.object().shape({
+  password: Yup.string()
+    .min(6, 'Password must have 5+ characters')
+    .required('Required'),
+    password_confirmation: Yup.string()
+    .required('Required')
+    .oneOf([Yup.ref('password'), null], 'Passwords must match'),
+})
+
+export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
+  token: tokenProps = '',
+  onResetPasswordSuccess = () => {},
+  onResetPasswordError = () => {},
+}) => {
+  const [loading, setLoading] = useState(false)
+  return (
+    <div className="reset-password">
+      <div className="title">Change Password</div>
+      <Formik
+        initialValues={{ password: '', password_confirmation: '' }}
+        validationSchema={Schema}
+        onSubmit={async (values: any) => {
+          try {
+            setLoading(true)
+            let token
+            if (tokenProps) {
+              token = tokenProps
+            } else {
+              if (typeof window !== 'undefined') {
+                const params: URLSearchParams = new URL(`${window.location}`)
+                  .searchParams
+                token = params.get('token')
+              }
+            }
+
+            const payload = {
+              token,
+              ...values,
+            }
+            const res = await resetPassword(payload)
+            onResetPasswordSuccess(res)
+          } catch (e) {
+            if (axios.isAxiosError(e)) {
+              onResetPasswordError(e)
+            }
+          } finally {
+            setLoading(false)
+          }
+        }}
+      >
+        {({ isValid, dirty }) => (
+          <Form>
+            <div className="body">
+              <div className="field-item">
+                <Field
+                  name="password"
+                  label="New Password"
+                  type="password"
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="password_confirmation"
+                  label="Confirm Password"
+                  type="password"
+                  component={CustomField}
+                />
+              </div>
+            </div>
+            <div className="action-button">
+              <button type="submit" disabled={!(isValid && dirty)}>
+                {loading ? <CircularProgress size="22px" /> : 'Submit'}
+              </button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}

package/src/components/resetPasswordContainer/style.css

@@ -0,0 +1,36 @@
+.reset-password {
+  padding: 14px;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.reset-password .title {
+  font-size: 20px;
+  font-weight: bold;
+}
+.reset-password .field-item {
+  margin-top: 14px;
+}
+.reset-password .action-button button {
+  padding: 10px;
+  width: 100%;
+  margin-top: 14px;
+  border: none;
+  border-radius: 0;
+  height: 45px;
+  font-weight: 600;
+  font-size: 26px;
+  line-height: 18px;
+  color: white;
+  cursor: pointer;
+  outline: none;
+  background-color: #212529;
+  text-transform: uppercase;
+}
+.reset-password .action-button button:hover:enabled {
+  background-color: #505050;
+  border-color: #505050;
+}
+.reset-password .action-button button[disabled] {
+  opacity: .7;
+  cursor: unset;
+}