tf-checkout-react 1.3.50 → 1.4.0

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}.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover,.login-register-button{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%}.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}.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover,.login-register-button{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}.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%}.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/dist/types/order-data.d.ts

@@ -1,10 +1,13 @@
 import { IAddOn } from './add_on';
 export interface IOrderData {
+    id: string;
     product_name: string;
     ticketType: string;
     quantity: string;
     price: string;
     total: string;
     currency: string;
+    guest_count: string;
+    pay_now: string;
     add_ons: IAddOn[];
 }

package/dist/utils/createCheckoutDataBodyWithDefaultHolder.d.ts

@@ -1,12 +1,19 @@
+declare type Type1 = string | number | null | undefined;
 interface ICheckoutBody {
     attributes: {
-        [key: string]: any;
+        [key: string]: Type1 | Record<string | number, Type1> | Array<Type1 | IticketHolder>;
     };
 }
+interface IticketHolder {
+    first_name?: string;
+    last_name?: string;
+    phone?: string;
+    email?: string;
+}
 interface IUserCredentialsValues {
     emailLogged?: string;
     firstNameLogged?: string;
     lastNameLogged?: string;
 }
-export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: {}, includeDob?: boolean, userCredentials?: IUserCredentialsValues) => ICheckoutBody;
+export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: Record<string, string | undefined>, includeDob?: boolean, userCredentials?: IUserCredentialsValues) => ICheckoutBody;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.50",
+  "version": "1.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -20,7 +20,8 @@
     "analyze": "size-limit --why",
     "release:beta": "npm version $(semver $(npm info $(npm info . name) version) -i prerelease --preid beta)",
     "release:patch": "npm version $(semver $(npm info $(npm info . name) version) -i patch)",
-    "release:minor": "npm version $(semver $(npm info $(npm info . name) version) -i minor)"
+    "release:minor": "npm version $(semver $(npm info $(npm info . name) version) -i minor)",
+    "start-example": "PORT=3002 parcel example/index.html --dist-dir example-dist --no-cache"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -67,6 +68,8 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "eslint-webpack-plugin": "^3.2.0",
     "husky": "^7.0.4",
+    "parcel": "^2.8.2",
+    "process": "^0.11.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rollup-plugin-postcss": "^4.0.1",
@@ -79,7 +82,9 @@
   "dependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@mui/material": "^5.2.2",
+    "@mui/private-theming": "^5.11.1",
     "@mui/styles": "^5.2.2",
     "@mui/x-date-pickers": "^5.0.1",
     "@stripe/react-stripe-js": "^1.6.0",
@@ -98,7 +103,10 @@
     "react-countdown": "^2.3.2",
     "react-inlinesvg": "^2.3.0",
     "react-share": "^4.4.0",
-    "rollup-plugin-svg": "^2.0.0",
-    "yup": "^0.32.11"
+    "tf-seat-map-view": "9.4.7-beta.20",
+    "yup": "^0.32.11",
+    "react-app-polyfill": "^1.0.0",
+    "react-router-dom": "^6.0.2",
+    "rollup-plugin-svg": "^2.0.0"
   }
 }

package/src/.d.ts

@@ -1,3 +1,4 @@
-declare module '*.css';
-declare module '*.png';
-declare module '*.svg';
+declare module '*.css'
+declare module '*.png'
+declare module '*.svg';
+declare module 'tf-seat-map-view'

package/src/api/index.ts

@@ -87,7 +87,7 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
     config.headers = updatedHeaders
   }
 
-  const additionalCookiesHeaderValue = '' //document.cookie ?? ''
+  const additionalCookiesHeaderValue = document.cookie ?? ''
   if (additionalCookiesHeaderValue !== '') {
     const updatedHeaders = {
       ...config.headers,
@@ -189,7 +189,7 @@ export function getEvent(id: string | number, pk?: string) {
 
 export function getTickets(
   id: string | number,
-  promoCode: string,
+  promoCode?: string,
   pk?: string
 ) {
   const invitationHash = getQueryVariable('invitation-hash')
@@ -204,10 +204,10 @@ export function getTickets(
       params,
       headers: promoCode
         ? {
-            ...ttfHeaders,
-            'Promotion-Event': String(id),
-            'Promotion-Code': promoCode,
-          }
+          ...ttfHeaders,
+          'Promotion-Event': String(id),
+          'Promotion-Code': promoCode,
+        }
         : { ...ttfHeaders },
     })
     .catch(error => {
@@ -414,6 +414,80 @@ export const getCheckoutPageConfigs = async () => {
   return response.data
 }
 
+// seat map <--start-->
+
+// const makeId = (length = 20) => {
+//   let result = ''
+//   const characters =
+//     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+//   const charactersLength = characters.length
+//   for (let i = 0; i < length; i++) {
+//     result += characters.charAt(Math.floor(Math.random() * charactersLength))
+//   }
+//   return result
+// }
+
+export const getSeatMapData = async (
+  eventId: string | number
+): Promise<SeatMapDataResponse> => {
+  localStorage.setItem('tierId', '')
+  const reservedSeatsHash = getQueryVariable('reserved_seats_hash')
+  const params = {} as any
+  if (reservedSeatsHash) {
+    params.reserved_seats_hash = reservedSeatsHash
+  }
+
+  const response: AxiosResponse<
+    SeatMapDataResponse,
+    AxiosRequestConfig
+  > = await publicRequest.get(`v1/event/${eventId}/seat-map-data`, { params })
+  return response.data
+}
+
+export const getSeatMapStatuses = async (
+  eventId: string | number
+): Promise<SeatMapStatusesResponse> => {
+  const response = await publicRequest.get(`v1/event/${eventId}/seats/status`)
+  return response.data
+}
+
+export const reserveSeat = async (
+  eventId: string | number,
+  tierId: string,
+  seatId: string
+) => {
+  const response = await publicRequest.post(
+    `v1/event/${eventId}/seats/reserve`,
+    {
+      data: {
+        tierId,
+        seatId,
+        ttl: 10,
+      },
+    }
+  )
+  return response.data
+}
+
+export const removeSeatReserve = async (
+  eventId: string | number,
+  tierId: string,
+  seatIds: string[]
+) => {
+  const response = await publicRequest.delete(
+    `v1/event/${eventId}/seats/delete-reserved`,
+    {
+      data: {
+        tierId,
+        seatIds,
+      },
+    }
+  )
+
+  return response.data
+}
+
+// seat map <--end-->
 export function getPixelScript(id: string | number, pageOptions: pageOptions) {
   const response = publicRequest.get(`v1/event/${id}/track`, {
     params: {
@@ -459,3 +533,12 @@ export const updateVerificationStatus = async (): Promise<{
   })
   return response.data
 }
+
+export const checkCustomerOrder = async (orderHash: string): Promise<any> => {
+  const response: AxiosResponse<
+    any,
+    AxiosRequestConfig
+  > = await publicRequest.get(`v1/order/${orderHash}/verify-customer-order`)
+
+  return response.data
+}

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

@@ -300,6 +300,7 @@ export const BillingInfoContainer = React.memo(
       zip: '',
     })
     const [loading, setLoading] = useState(true)
+    const [cardLoading, setCardLoading] = useState(false)
     const [isCountriesLoading, setIsCountriesLoading] = useState(true)
     const [error, setError] = useState(null)
     const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(
@@ -318,6 +319,7 @@ export const BillingInfoContainer = React.memo(
       ? brandOptIn
       : _get(cartInfoData, 'optedIn', false)
     const ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
+    const isTable = Boolean(_get(cartInfoData, 'is_table', false))
     const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
     const expirationTime = _get(cartInfoData, 'expiresAt')
     const flagRequirePhone = getQueryVariable('phone_required') === 'true'
@@ -390,6 +392,7 @@ export const BillingInfoContainer = React.memo(
     // fetch cart data
     const fetchCart = async () => {
       try {
+        setCardLoading(true)
         const res = await getCart()
         setCustomHeader(res)
         const cartInfo = _get(res, 'data.data.attributes')
@@ -403,6 +406,8 @@ export const BillingInfoContainer = React.memo(
         if (axios.isAxiosError(e)) {
           onGetCartError(e)
         }
+      } finally {
+        setCardLoading(false)
       }
     }
     // fetch user data
@@ -530,10 +535,12 @@ export const BillingInfoContainer = React.memo(
 
     const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
     usePixel(eventId, { page: 'billing', pageUrl })
-
+    if (isTable) {
+      dataWithUniqueIds[0].label = 'Get Your Tables'
+    }
     return (
       <ThemeProvider theme={themeMui}>
-        {(loading || isCountriesLoading) && (
+        {(loading || cardLoading || isCountriesLoading) && (
           <Backdrop
             sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
             open={true}
@@ -789,117 +796,122 @@ export const BillingInfoContainer = React.memo(
                       </div>
                     </div>
                   )}
-                  {_map(dataWithUniqueIds, item => {
-                    const { label, labelClassName, fields } = item
-                    return (
-                      <React.Fragment key={item.uniqueId}>
-                        <p className={labelClassName}>{label}</p>
-                        {_map(fields, group => {
-                          const { groupClassname, groupItems } = group
-                          return (
-                            <React.Fragment key={group.uniqueId}>
-                              <div className={groupClassname}>
-                                {_map(
-                                  groupItems.filter(el => {
-                                    if (el.name === 'holderAge' && !showDOB) {
-                                      return false
-                                    }
-                                    if (
-                                      el.name === 'ttf_opt_in' &&
-                                      hideTtfOptIn
-                                    ) {
-                                      return false
-                                    }
-                                    if (el.name === 'phone') {
-                                      if (!hidePhoneField) {
-                                        el.required = flagRequirePhone
-                                      } else {
+                  {!cardLoading &&
+                    _map(dataWithUniqueIds, item => {
+                      const { label, labelClassName, fields } = item
+                      return (
+                        <React.Fragment key={item.uniqueId}>
+                          <p className={labelClassName}>{label}</p>
+                          {_map(fields, group => {
+                            const { groupClassname, groupItems } = group
+                            return (
+                              <React.Fragment key={group.uniqueId}>
+                                <div className={groupClassname}>
+                                  {_map(
+                                    groupItems.filter(el => {
+                                      if (el.name === 'holderAge' && !showDOB) {
                                         return false
                                       }
-                                    }
-                                    if (
-                                      el.name === 'data_capture[wallet_address]'
-                                    ) {
-                                      if (collectMandatoryWalletAddress) {
-                                        el.required = true
+                                      if (
+                                        el.name === 'ttf_opt_in' &&
+                                        hideTtfOptIn
+                                      ) {
+                                        return false
                                       }
-                                    }
-                                    if (
-                                      [
-                                        'street_address',
-                                        'country',
-                                        'state',
-                                        'city',
-                                        'zip',
-                                      ].includes(el.name)
-                                    ) {
-                                      if (flagFreeTicket) {
-                                        el.required = false
+                                      if (el.name === 'phone') {
+                                        if (!hidePhoneField) {
+                                          el.required = flagRequirePhone
+                                        } else {
+                                          return false
+                                        }
+                                      }
+                                      if (
+                                        el.name ===
+                                        'data_capture[wallet_address]'
+                                      ) {
+                                        if (collectMandatoryWalletAddress) {
+                                          el.required = true
+                                        }
+                                      }
+                                      if (
+                                        [
+                                          'street_address',
+                                          'country',
+                                          'state',
+                                          'city',
+                                          'zip',
+                                        ].includes(el.name)
+                                      ) {
+                                        if (flagFreeTicket) {
+                                          el.required = false
+                                          return false
+                                        }
+                                      }
+                                      if (
+                                        hideWalletAddressField &&
+                                        el.name === 'wallet-address-info'
+                                      ) {
                                         return false
                                       }
-                                    }
-                                    if (
-                                      hideWalletAddressField &&
-                                      el.name === 'wallet-address-info'
-                                    ) {
-                                      return false
-                                    }
-                                    return true
-                                  }),
-                                  element =>
-                                    [
-                                      'password',
-                                      'confirmPassword',
-                                      'password-info',
-                                    ].includes(element.name) &&
-                                    isLoggedIn ? null : [
-                                        'data_capture[wallet_address]',
+                                      return true
+                                    }),
+                                    element =>
+                                      [
+                                        'password',
+                                        'confirmPassword',
+                                        'password-info',
                                       ].includes(element.name) &&
-                                      hideWalletAddressField ? null : (
-                                      <React.Fragment key={element.uniqueId}>
-                                        <div
-                                          className={`${
-                                            element.className
-                                          } ${props?.errors[element.name] ||
-                                            ''}`}
-                                        >
-                                          {element.component ? (
-                                            element.component
-                                          ) : (
-                                            <Field
-                                              {...element}
-                                              type={
-                                                element.type === 'radio'
-                                                  ? undefined
-                                                  : element.type
-                                              }
-                                              setPhoneValidationIsLoading={
-                                                element.type === 'phone'
-                                                  ? setPhoneValidationIsLoading
-                                                  : undefined
-                                              }
-                                              label={getFieldLabel(element)}
-                                              validate={getValidateFunctions(
-                                                element,
-                                                states,
-                                                props.values,
-                                                props.errors
-                                              )}
-                                              setFieldValue={
-                                                props.setFieldValue
-                                              }
-                                              onBlur={props.handleBlur}
-                                              component={getFieldComponent(
-                                                element
-                                              )}
-                                              selectOptions={
-                                                element.name === 'country'
-                                                  ? _map(countries, item => ({
+                                      isLoggedIn ? null : [
+                                          'data_capture[wallet_address]',
+                                        ].includes(element.name) &&
+                                        hideWalletAddressField ? null : (
+                                        <React.Fragment key={element.uniqueId}>
+                                          <div
+                                            className={`${
+                                              element.className
+                                            } ${props?.errors[element.name] ||
+                                              ''}`}
+                                          >
+                                            {element.component ? (
+                                              element.component
+                                            ) : (
+                                              <Field
+                                                {...element}
+                                                type={
+                                                  element.type === 'radio'
+                                                    ? undefined
+                                                    : element.type
+                                                }
+                                                setPhoneValidationIsLoading={
+                                                  element.type === 'phone'
+                                                    ? setPhoneValidationIsLoading
+                                                    : undefined
+                                                }
+                                                label={getFieldLabel(element)}
+                                                validate={getValidateFunctions(
+                                                  element,
+                                                  states,
+                                                  props.values,
+                                                  props.errors
+                                                )}
+                                                setFieldValue={
+                                                  props.setFieldValue
+                                                }
+                                                onBlur={props.handleBlur}
+                                                component={getFieldComponent(
+                                                  element
+                                                )}
+                                                selectOptions={
+                                                  element.name === 'country'
+                                                    ? _map(countries, item => ({
                                                       value: item.id,
                                                       label: item.name,
                                                     }))
                                                   : element.name === 'state'
-                                                  ? states
+                                                  ? [
+                                                    { label: element.label, value: '', disabled: true },
+                                                    ...states,
+                                                  ]
                                                   : element.selectOptions || []
                                               }
                                               theme={theme}

package/src/components/billing-info-container/utils.ts

@@ -15,7 +15,6 @@ import {
   CheckboxField,
   CustomField,
   DatePickerField,
-  NativeSelectField,
   PhoneNumberField,
   RadioGroupField,
   SelectField,
@@ -301,7 +300,7 @@ export const getFieldComponent = (element: IGroupItem) => {
 
   const fieldComponentConfigs = {
     checkbox: CheckboxField,
-    select: NativeSelectField,
+    select: CustomField, // Temp change untill refactoring
     select_multi: SelectField,
     phone: PhoneNumberField,
     date: DatePickerField,

package/src/components/common/Loader.tsx

@@ -1,10 +1,8 @@
-import React from 'react'
 import CircularProgress from '@mui/material/CircularProgress'
+import React from 'react'
 
-export function Loader() {
-  return (
-    <div className="loader-container">
-      <CircularProgress />
-    </div>
-  )
-}
+export const Loader = () => (
+  <div className="loader-container">
+    <CircularProgress />
+  </div>
+)