tf-checkout-react 1.2.0 → 1.2.3

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}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}
+.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}.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}.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}.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}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.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}.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}.order-details .total-referrer{padding:0 0 20px}.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.2.0",
+  "version": "1.2.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -161,13 +161,14 @@ export const handleSetAccessToken = (token: string) => {
 }
 
 export function getEvent(id: string | number) {
-  let referralValue = ""
+  let referralValue = ''
   if (isWindowDefined) {
     const params = new URL(`${window.location}`)
     const referralId = params.searchParams.get('ttf_r') || ''
     const referral_key = window.localStorage.getItem('referral_key')
-    let referralIdlocal = ""
+    let referralIdlocal = ''
     if (referral_key) {
+      // eslint-disable-next-line prefer-destructuring
       referralIdlocal = referral_key.split('.')[1]
     }
     referralValue = referralId || referralIdlocal
@@ -175,10 +176,12 @@ export function getEvent(id: string | number) {
 
   const response = publicRequest
     .get(`v1/event/${id}`, {
-      headers: { ...ttfHeaders,
-      "Referer-Url": isDocumentDefined ? document.referrer : '',
-      "Referrer-Id": isWindowDefined ? referralValue : ''
-    } })
+      headers: {
+        ...ttfHeaders,
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+        'Referrer-Id': isWindowDefined ? referralValue : '',
+      },
+    })
     .catch(error => {
       throw error
     })
@@ -203,12 +206,15 @@ export function getTickets(id: string | number, promoCode: string) {
 }
 
 export const addToCart = (id: string | number, data: any) => {
-  const res = publicRequest.post(`v1/event/${id}/add-to-cart/`, {
-    data,
-    headers: {
-      "Referer-Url": isDocumentDefined ? document.referrer : '',
+  const res = publicRequest.post(
+    `v1/event/${id}/add-to-cart/`,
+    { data },
+    {
+      headers: {
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     }
-  })
+  )
   return res
 }
 
@@ -247,8 +253,8 @@ export const getPaymentData = (hash: string) => {
   const response = publicRequest
     .get(`v1/order/${hash}/review/`, {
       headers: {
-        "Referer-Url": isDocumentDefined ? document.referrer : '' ,
-      }
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     })
     .catch(error => {
       throw error
@@ -269,10 +275,10 @@ export const handlePaymentData = (orderHash: string, data: any) => {
 
 export const handlePaymentSuccess = (orderHash: string) => {
   const res = publicRequest
-    .post(`v1/order/${orderHash}/success`, {
+    .post(`v1/order/${orderHash}/success`, undefined, {
       headers: {
-        "Referer-Url": isDocumentDefined ? document.referrer : ''
-      }
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     })
     .catch(error => {
       throw error
@@ -282,10 +288,10 @@ export const handlePaymentSuccess = (orderHash: string) => {
 
 export const handleFreeSuccess = (orderHash: string) => {
   const res = publicRequest
-    .post(`v1/order/${orderHash}/complete_free_registration`, {
+    .post(`v1/order/${orderHash}/complete_free_registration`, undefined, {
       headers: {
-        "Referer-Url": isDocumentDefined ? document.referrer : ''
-      }
+        'Referer-Url': isDocumentDefined ? document.referrer : '',
+      },
     })
     .catch(error => {
       throw error

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

@@ -1,5 +1,11 @@
-import React, { FC, useEffect, useState, useRef } from 'react'
-import { AxiosError } from 'axios'
+import './style.css'
+
+import { CircularProgress, ThemeOptions } from '@mui/material'
+import Backdrop from '@mui/material/Backdrop'
+import Button from '@mui/material/Button'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
+import axios, { AxiosError } from 'axios'
 import {
   Field,
   Form,
@@ -8,29 +14,44 @@ import {
   FormikProps,
   FormikValues,
 } from 'formik'
-import Button from '@mui/material/Button'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
 import _get from 'lodash/get'
+import _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
-import _isEqual from 'lodash/isEqual'
 import _isEmpty from 'lodash/isEmpty'
+import _isEqual from 'lodash/isEqual'
+import _map from 'lodash/map'
+import { nanoid } from 'nanoid'
+import React, { FC, useEffect, useRef, useState } from 'react'
 
-import './style.css'
-import { combineValidators, requiredValidator } from '../../validators'
-import { IBillingInfoData } from '../../types'
 import {
   getCart,
   getCountries,
   getProfileData,
+  getStates,
   postOnCheckout,
   register,
   setCustomHeader,
-  getStates,
 } from '../../api'
+import { IBillingInfoData } from '../../types'
+import {
+  createCheckoutDataBodyWithDefaultHolder,
+  getCookieByName,
+} from '../../utils'
+import { ErrorFocus } from '../../utils/formikErrorFocus'
+import { getQueryVariable } from '../../utils/getQueryVariable'
+import { combineValidators, requiredValidator } from '../../validators'
+import { DatePickerField } from '../common/DatePickerField'
+import {
+  CheckboxField,
+  CustomField,
+  PhoneNumberField,
+  SelectField,
+} from '../common/index'
+import SnackbarAlert from '../common/SnackbarAlert'
+import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { LoginModal } from '../loginModal'
 import { SignupModal } from '../signupModal'
-import { ForgotPasswordModal } from '../forgotPasswordModal'
+import TimerWidget from '../timerWidget'
 import {
   assingUniqueIds,
   createCheckoutDataBody,
@@ -39,19 +60,6 @@ import {
   getValidateFunctions,
   setLoggedUserData,
 } from './utils'
-import { createCheckoutDataBodyWithDefaultHolder, getCookieByName } from '../../utils'
-import axios from 'axios'
-import { CustomField, CheckboxField, SelectField, PhoneNumberField } from '../common/index'
-import { CircularProgress, ThemeOptions } from '@mui/material'
-import { nanoid } from 'nanoid'
-import { getQueryVariable } from '../../utils/getQueryVariable'
-import { ErrorFocus } from '../../utils/formikErrorFocus'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styles'
-import Backdrop from '@mui/material/Backdrop'
-import TimerWidget from '../timerWidget'
-import SnackbarAlert from '../common/SnackbarAlert'
-import { DatePickerField } from '../common/DatePickerField'
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -169,8 +177,10 @@ const LogicRunner: FC<{
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
-              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
-              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
+              'holderFirstName-0':
+                parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0':
+                parsedData?.last_name || parsedData?.lastName || '',
               'holderEmail-0': parsedData?.email || '',
             }
             setValues({ ...values, ...mappedValues })
@@ -225,7 +235,7 @@ export const BillingInfoContainer = ({
   enableTimer = false,
   logo,
   showForgotPasswordButton = false,
-  showSignUpButton = false
+  showSignUpButton = false,
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -278,7 +288,7 @@ export const BillingInfoContainer = ({
   const showTicketHolders = getQueryVariable('names_required') === 'true'
   const eventId = getQueryVariable('event_id')
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
-  const ttfOptIn: boolean = Boolean(_get(cartInfoData, 'ttfOptIn', false))
+  const ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
   const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
   const expirationTime = _get(cartInfoData, 'expiresAt')
   const flagRequirePhone = getQueryVariable('phone_required') === 'true'
@@ -306,7 +316,7 @@ export const BillingInfoContainer = ({
   }
 
   useEffect(() => {
-    if ((pIsLoggedIn !== isLoggedIn) || xtfCookie) {
+    if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
       setIsLoggedIn(!!(pIsLoggedIn || xtfCookie))
     }
   }, [pIsLoggedIn, isLoggedIn, xtfCookie])
@@ -363,10 +373,7 @@ export const BillingInfoContainer = ({
           firstName: profileDataObj.first_name,
           lastName: profileDataObj.last_name,
         })
-        window.localStorage.setItem(
-          'user_data',
-          JSON.stringify(profileDataObj)
-        )
+        window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
         onGetProfileDataSuccess(userDataResponse.data)
       }
     } catch (e) {
@@ -403,8 +410,10 @@ export const BillingInfoContainer = ({
     collectPaymentData()
   }, [skipPage, ticketsQuantity])
 
-
-  const collectCheckoutBody = (values: object, profileData?: any): object => {
+  const collectCheckoutBody = (
+    values: Record<string, unknown>,
+    profileData?: any
+  ): Record<string, unknown> => {
     let checkoutBody = {}
 
     // Auto collect ticket holders name when it was skipped optionally
@@ -413,7 +422,7 @@ export const BillingInfoContainer = ({
         ticketsQuantity.length,
         values,
         true,
-        { emailLogged, firstNameLogged, lastNameLogged },
+        { emailLogged, firstNameLogged, lastNameLogged }
       )
     } else {
       checkoutBody = createCheckoutDataBody(
@@ -421,8 +430,10 @@ export const BillingInfoContainer = ({
         values,
         {
           emailLogged: emailLogged || profileData.email,
-          firstNameLogged: firstNameLogged || profileData.first_name  || profileData.firstName,
-          lastNameLogged: lastNameLogged || profileData.last_name  || profileData.lastName,
+          firstNameLogged:
+            firstNameLogged || profileData.first_name || profileData.firstName,
+          lastNameLogged:
+            lastNameLogged || profileData.last_name || profileData.lastName,
         },
         showDOB
       )
@@ -435,7 +446,10 @@ export const BillingInfoContainer = ({
     localStorage.removeItem('referral_key')
   }
 
-  if (loading || (enableTimer && !expirationTime && typeof window !== 'undefined')) {
+  if (
+    loading ||
+    (enableTimer && !expirationTime && typeof window !== 'undefined')
+  ) {
     if (expirationTime === 0) {
       // Redirect to homepage (countdown finished and browser reloaded case)
       window.location.href = '/'
@@ -511,15 +525,24 @@ export const BillingInfoContainer = ({
               setLoading(true)
               const resRegister = await register(bodyFormData)
               const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
-              const accessToken = _get(resRegister, 'data.data.attributes.access_token')
-              const refreshToken = _get(resRegister, 'data.data.attributes.refresh_token')
-              const userProfile = _get(resRegister, 'data.data.attributes.user_profile')
+              const accessToken = _get(
+                resRegister,
+                'data.data.attributes.access_token'
+              )
+              const refreshToken = _get(
+                resRegister,
+                'data.data.attributes.refresh_token'
+              )
+              const userProfile = _get(
+                resRegister,
+                'data.data.attributes.user_profile'
+              )
 
               onRegisterSuccess({
                 xtfCookie,
                 accessToken,
                 refreshToken,
-                userProfile
+                userProfile,
               })
             } catch (e) {
               setLoading(false)
@@ -530,10 +553,7 @@ export const BillingInfoContainer = ({
                 }
                 if (error?.password) {
                   formikHelpers.setFieldError('password', error.password)
-                  formikHelpers.setFieldError(
-                    'confirmPassword',
-                    error.password
-                  )
+                  formikHelpers.setFieldError('confirmPassword', error.password)
                 }
                 if (error?.email && !onLogin) {
                   // False will stand for outside controll
@@ -541,7 +561,10 @@ export const BillingInfoContainer = ({
                   setShowModalLogin(true)
                 }
 
-                if (_includes(error, 'The cart is expired') && !hideErrorsAlertSection) {
+                if (
+                  _includes(error, 'The cart is expired') &&
+                  !hideErrorsAlertSection
+                ) {
                   setError(error)
                 }
 
@@ -657,7 +680,6 @@ export const BillingInfoContainer = ({
                       const { groupClassname, groupItems } = group
                       return (
                         <React.Fragment key={group.uniqueId}>
-
                           <div className={groupClassname}>
                             {_map(
                               groupItems.filter(el => {
@@ -678,7 +700,7 @@ export const BillingInfoContainer = ({
                                   'confirmPassword',
                                   'password-info',
                                 ].includes(element.name) &&
-                                  isLoggedIn ? null : (
+                                isLoggedIn ? null : (
                                   <React.Fragment key={element.uniqueId}>
                                     <div className={element.className}>
                                       {element.component ? (
@@ -686,9 +708,15 @@ export const BillingInfoContainer = ({
                                       ) : (
                                         <Field
                                           name={element.name}
-                                          label={element.name === 'phone'
-                                            ? `${element.label}${flagRequirePhone ? '' : ' (optional)'} `
-                                            : element.label}
+                                          label={
+                                            element.name === 'phone'
+                                              ? `${element.label}${
+                                                  flagRequirePhone
+                                                    ? ''
+                                                    : ' (optional)'
+                                                } `
+                                              : element.label
+                                          }
                                           type={element.type}
                                           validate={getValidateFunctions(
                                             element,
@@ -712,10 +740,13 @@ export const BillingInfoContainer = ({
                                             element.name === 'country'
                                               ? countries
                                               : element.name === 'state'
-                                                ? states
-                                                : []
+                                              ? states
+                                              : []
                                           }
                                           theme={theme}
+                                          disableDropdown={
+                                            element.disableDropdown
+                                          }
                                         />
                                       )}
                                     </div>
@@ -753,16 +784,25 @@ export const BillingInfoContainer = ({
                                     component={
                                       element.type === 'checkbox'
                                         ? CheckboxField
+                                        : element.type === 'phone'
+                                        ? PhoneNumberField
                                         : CustomField
                                     }
                                     validate={combineValidators(
                                       element.required
                                         ? requiredValidator
-                                        : () => {},
+                                        : () =>
+                                            props.errors[
+                                              `${element.name}-${index}`
+                                            ],
                                       element.onValidate
                                         ? element.onValidate
-                                        : () => {}
+                                        : () =>
+                                            props.errors[
+                                              `${element.name}-${index}`
+                                            ]
                                     )}
+                                    disableDropdown={element.disableDropdown}
                                   />
                                 </div>
                               ))}

package/src/components/common/CheckboxField.tsx

@@ -21,6 +21,7 @@ export const CheckboxField = ({
   selectOptions,
   theme,
   setFieldValue,
+  disableDropdown,
   ...rest
 }: ICheckboxField & IOtherProps) => {
   const customTheme: any = useTheme()

package/src/components/common/PhoneNumberField.tsx

@@ -1,10 +1,11 @@
-import TextField from '@mui/material/TextField'
 import { FieldInputProps, FormikProps } from 'formik'
 import _debounce from 'lodash/debounce'
 import _get from 'lodash/get'
+import MuiPhoneNumber from 'material-ui-phone-number'
 import React, { useCallback, useEffect } from 'react'
 
 import { validatePhoneNumber } from '../../api'
+import { removePlusSign } from '../../normalizers'
 
 export interface IPhoneNumberField {
   label: string;
@@ -13,15 +14,17 @@ export interface IPhoneNumberField {
 
   // optional
   type: string;
+  disableDropdown: boolean;
 }
 
 export const PhoneNumberField = ({
   label,
-  type = 'text',
   field,
-  form: { errors, setFieldError, setStatus },
+  form: { errors,touched, setFieldError, setStatus, initialValues, setFieldValue },
+  disableDropdown = true
 }: IPhoneNumberField) => {
   const error = _get(errors, field.name)
+  const isTouched = Boolean(_get(touched, field.name))
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debounceCb = useCallback(
@@ -54,15 +57,18 @@ export const PhoneNumberField = ({
   }, [field.value])
 
   return (
-    <TextField
-      {...field}
-      id={field.name}
+    <MuiPhoneNumber
+      name={field.name}
+      value={initialValues.phone}
+      onChange={(e: any) => setFieldValue(field.name, removePlusSign(e))}
+      variant="outlined"
+      defaultCountry='us'
+      disableDropdown={disableDropdown}
       label={label}
-      type={type}
-      fullWidth={true}
-      error={!!error}
-      helperText={error}
-      value={field.value || ''}
+      error={!!error && isTouched}
+      helperText={isTouched && error}
+      fullWidth
+      autoFormat={false}
     />
   )
 }

package/src/components/common/RadioField.tsx

@@ -18,6 +18,7 @@ export const RadioField = ({
   label,
   field,
   theme,
+  disableDropdown,
   ...rest
 }: IRadioField & IOtherProps) => {
   const customTheme: any = useTheme()

package/src/components/orderDetailsContainer/index.tsx

@@ -219,6 +219,11 @@ export const OrderDetailsContainer = ({
                 <p>{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
               </div>
             </div>
+            {data?.sales_referred ? (
+              <div className="total-referrer">
+                <b>So far, you've referred {data.sales_referred} tickets.</b>
+              </div>
+            ) : null}
             <TableContainer component={Paper}>
               <Table className="tt-type" aria-label="collapsible table">
                 <TableHead>

package/src/components/orderDetailsContainer/style.css

@@ -71,3 +71,7 @@
 .order-details .personal-link {
   padding: 20px 0;
 }
+
+.order-details .total-referrer {
+  padding: 0px 0px 20px 0px;
+}

package/src/components/paymentContainer/index.tsx

@@ -71,6 +71,7 @@ export interface IPaymentPage {
   onCountdownFinish?: () => void;
   enableTimer?: boolean;
   enablePaymentPlan?: boolean;
+  paymentButtonText?: string;
 }
 
 const initialOrderValues: IOrderData = {
@@ -98,16 +99,17 @@ export const PaymentContainer = ({
   errorText,
   checkoutData,
   onErrorClose = _identity,
-  onGetPaymentDataSuccess = () => {},
-  onGetPaymentDataError = () => {},
-  onPaymentError = () => {},
+  onGetPaymentDataSuccess = () => { },
+  onGetPaymentDataError = () => { },
+  onPaymentError = () => { },
   stripeCardOptions = {},
   disableZipSection = false,
   themeOptions,
   elementsOptions,
-  onCountdownFinish = () => {},
+  onCountdownFinish = () => { },
   enableTimer = false,
   enablePaymentPlan = false,
+  paymentButtonText
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -166,10 +168,10 @@ export const PaymentContainer = ({
         setConditions(
           conditionsInfo
             ? conditionsInfo.map((item: string) => ({
-                id: nanoid(),
-                text: item,
-                checked: false,
-              }))
+              id: nanoid(),
+              text: item,
+              checked: false,
+            }))
             : []
         )
       }
@@ -316,15 +318,15 @@ export const PaymentContainer = ({
                       conditions={conditions}
                       stripeCardOptions={stripeCardOptions}
                       disableZipSection={disableZipSection}
+                      paymentButtonText={paymentButtonText}
                     />
                   </Elements>
                 </div>
               </div>
             ) : (
               <div
-                className={`payment_button ${
-                  paymentIsLoading ? 'disabled-payment-button' : ''
-                }`}
+                className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''
+                  }`}
               >
                 <button
                   disabled={paymentIsLoading}