tf-checkout-react 1.0.76 → 1.0.80

package/dist/tf-checkout-styles.css

@@ -1 +1 @@
-.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.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}.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}.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 h3{margin:10px 0}.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}.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%}.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 .download-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:16px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px 0;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:100%}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}
+.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.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}.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%}.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 .download-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:16px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px 0;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:100%}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}

package/dist/utils/downloadPDF.d.ts

@@ -0,0 +1 @@
+export declare const downloadPDF: (pdfUrl: string) => void;

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { setConfigs, CONFIGS } from './setConfigs';
 export { getQueryVariable } from './getQueryVariable';
 export { ErrorFocus } from './formikErrorFocus';
+export { downloadPDF } from './downloadPDF';
 export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBodyWithDefaultHolder';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.76",
+  "version": "1.0.80",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -77,6 +77,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "material-ui-phone-number": "^3.0.0",
+    "moment-timezone": "^0.5.34",
     "nanoid": "^3.1.30",
     "prop-types": "^15.7.2",
     "react-bootstrap": "^2.0.2",

package/src/api/index.ts

@@ -123,6 +123,15 @@ export const handleSetAccessToken = (token: any) => {
   }
 }
 
+export function getEvent(id: string | number) {
+  const response = publicRequest
+    .get(`v1/event/${id}`, { headers: ttfHeaders })
+    .catch(error => {
+      throw error
+    })
+  return response
+}
+
 export function getTickets(id: string | number, promoCode: string) {
   const response = publicRequest
     .get(`v1/event/${id}/tickets/`, {

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

@@ -47,7 +47,7 @@ import { SelectField } from '../common/SelectField'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { FormikPhoneNumberField } from '../common/FormikPhoneNumberField'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styled-engine'
+import { CSSProperties } from '@mui/styles'
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];

package/src/components/common/CheckboxField.tsx

@@ -4,6 +4,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import Checkbox from '@mui/material/Checkbox'
 import { FieldInputProps } from 'formik'
 import { useTheme } from '@mui/styles'
+import { FormControl, FormHelperText } from '@mui/material'
 
 export interface ICheckboxField {
   label: string | number | JSX.Element;
@@ -24,14 +25,17 @@ export const CheckboxField = ({
 }: ICheckboxField & IOtherProps) => {
   const customTheme: any = useTheme()
   return (
-    <FormGroup>
-      <FormControlLabel
-        control={<Checkbox {...field} {...rest} />}
-        label={label}
-        componentsProps={{
-          typography: customTheme.checkbox
-        }}
-      />
-    </FormGroup>
+    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""])}>
+      <FormGroup>
+        <FormControlLabel
+          control={<Checkbox {...field} {...rest} />}
+          label={label}
+          componentsProps={{
+            typography: customTheme?.checkbox
+          }}
+        />
+      </FormGroup>
+      {!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""]) ? <FormHelperText>Required</FormHelperText> : null}
+    </FormControl>
   )
 }

package/src/components/common/CustomField.tsx

@@ -59,9 +59,9 @@ export const CustomField = ({
         className: theme,
         MenuProps: { className: theme },
       }}
-      InputLabelProps={{ sx: customTheme.input }}
+      InputLabelProps={{ sx: customTheme?.input }}
       inputProps={{
-        sx: customTheme.input
+        sx: customTheme?.input
       }}
       {...field}
     >

package/src/components/common/FormikPhoneNumberField.tsx

@@ -17,7 +17,7 @@ interface IOtherProps {
 export const FormikPhoneNumberField = ({
   label,
   field,
-  form: { touched, errors },
+  form: { touched, errors, initialValues },
   setFieldValue,
   selectOptions,
   ...rest
@@ -30,6 +30,7 @@ export const FormikPhoneNumberField = ({
   return (
     <MuiPhoneNumber
       name='phone'
+      value={initialValues.phone}
       onChange={(e: any) => setFieldValue("phone", removePlusSign(e))}
       variant="outlined" 
       defaultCountry='us'
@@ -39,10 +40,10 @@ export const FormikPhoneNumberField = ({
       helperText={isTouched && error}
       fullWidth
       InputLabelProps={{
-        sx: customTheme.input
+        sx: customTheme?.input
       }}
       InputProps={{
-        sx: customTheme.input
+        sx: customTheme?.input
       }}
       autoFormat={false}
       {...rest} 

package/src/components/common/SelectField.tsx

@@ -44,7 +44,7 @@ export const SelectField = ({
 
   return (
     <FormControl fullWidth={true}>
-      <InputLabel style={customTheme.input} htmlFor={field.name} error={!!error && isTouched} shrink={true}>
+      <InputLabel style={customTheme?.input} htmlFor={field.name} error={!!error && isTouched} shrink={true}>
         {label}
       </InputLabel>
       <Select
@@ -60,7 +60,7 @@ export const SelectField = ({
         className={theme}
         MenuProps={{ className: theme }}
         {...field}
-        style={customTheme.input}
+        style={customTheme?.input}
       >
         {_map(selectOptions, option => (
           <option

package/src/components/countdown/index.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import moment from 'moment-timezone'
+import './style.css'
+
+interface CountdownTypes {
+  startDate: string;
+  timezone?: string;
+  title?: string;
+  message?: string;
+  callback?: () => void;
+}
+
+const isTimeExpired = (startDate: string, timezone: string) => {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'))
+}
+
+function Countdown({
+  startDate,
+  timezone = moment.tz.guess(),
+  title = '',
+  message = '',
+  callback = () => {}
+}: CountdownTypes) {
+  const [duration, setDuration] = useState('')
+  const [timeExpired, setTimeExpired] = useState(false)
+
+  useEffect(() => {
+    setTimeExpired(isTimeExpired(startDate, timezone))
+  }, [])
+
+  useEffect(() => {
+    let timer: any;
+
+    if(!timeExpired) {
+      timer = setInterval(() => {
+        if(isTimeExpired(startDate, timezone)) {
+          clearInterval(timer)
+          setTimeExpired(true)
+          callback()
+        }
+
+        const currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss')
+        const diffTime = moment(startDate).diff(currentDate)
+        const duration = moment.duration(diffTime)
+        const dateArr: any = {
+          year: duration.years(),
+          month: duration.months(),
+          day: duration.days(),
+          hour: duration.hours(),
+          minute: duration.minutes(),
+          second: duration.seconds(),
+        }
+  
+        let timeLeft = ''
+  
+        for(let date in dateArr) {
+          const unit = dateArr[date] === 1 ? date : date + 's'
+          const val = String(dateArr[date]).length === 1 ? '0' + dateArr[date] : dateArr[date] 
+          if(timeLeft) {
+            timeLeft += `, ${val} ${unit}`
+          } else if(dateArr[date]) {
+            timeLeft += `${val} ${unit}`
+          }
+        }
+        
+        setDuration(timeLeft)
+      }, 1000)
+    }
+    return () => {
+      clearInterval(timer)
+    }
+  }, [timeExpired])
+
+  return (
+    <>
+     {!timeExpired && duration && (
+      <div className='countdown'>
+        <div>
+          <p className='title'>{title}</p>
+          <p>{duration}</p>
+        </div>
+        <p className='message'>{message}</p>
+      </div>
+     )}
+    </>
+  )
+}
+
+export default Countdown

package/src/components/countdown/style.css

@@ -0,0 +1,10 @@
+.countdown p {
+  margin: 0;
+}
+.countdown .title {
+  font-weight: bold;
+}
+.countdown .message {
+  margin-top: 20px;
+  font-weight: bold;
+}

package/src/components/loginModal/index.tsx

@@ -124,6 +124,8 @@ export const LoginModal: FC<Props> = ({
                     JSON.stringify(profileDataObj)
                   )
                   window.localStorage.setItem('access_token', accessToken)
+                  const event = new window.CustomEvent('tf-login')
+                  window.document.dispatchEvent(event)
                 }
                 onLogin()
               } catch (e) {

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -6,13 +6,14 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import Paper from '@mui/material/Paper'
+import { downloadPDF } from '../../utils'
 
-interface TicketsTableTypes {
-  tickets: any[];
+interface IAddOnTypes {
+  name: string;
+  status: string;
 }
-
-interface TicketTypes {
-  add_ons: any[];
+interface ITicketTypes {
+  add_ons?: IAddOnTypes[];
   hash: string;
   ticket_type: string;
   holder_name: string;
@@ -20,67 +21,72 @@ interface TicketTypes {
   pdf_link: string;
 }
 
-interface AddOnTypes {
-  name: string;
-  status: string;
+interface TicketsTableTypes {
+  tickets: ITicketTypes[];
 }
 
-const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => {
-  return (
-    <div className='tickets-box'>
-      <h4 className='sub-title'>Your Tickets</h4>
-      <TableContainer component={Paper}>
-        <Table aria-label="collapsible table">
-          <TableHead>
-            <TableRow>
-              <TableCell>Ticket ID</TableCell>
-              <TableCell>Ticket Type</TableCell>
-              <TableCell>Ticket Holder Name</TableCell>
-              <TableCell>Status</TableCell>
-              <TableCell>Download</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {tickets.map((ticket: TicketTypes, index: number) => (
-              <Fragment key={index}>
+const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => (
+  <div className="tickets-box">
+    <h4 className="sub-title">Your Tickets</h4>
+    <TableContainer component={Paper}>
+      <Table aria-label="collapsible table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Ticket ID</TableCell>
+            <TableCell>Ticket Type</TableCell>
+            <TableCell>Ticket Holder Name</TableCell>
+            <TableCell>Status</TableCell>
+            <TableCell>Download</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {tickets.map((ticket: ITicketTypes, index: number) => (
+            <Fragment key={index}>
+              <TableRow>
+                <TableCell>{ticket.hash}</TableCell>
+                <TableCell>{ticket.ticket_type}</TableCell>
+                <TableCell>{ticket.holder_name}</TableCell>
+                <TableCell>{ticket.status}</TableCell>
+                <TableCell>
+                  <span
+                    aria-hidden={true}
+                    className="download-button"
+                    onClick={() => downloadPDF(ticket.pdf_link)}
+                  >
+                    Download
+                  </span>
+                </TableCell>
+              </TableRow>
+              {!!ticket.add_ons?.length && (
                 <TableRow>
-                  <TableCell>{ticket.hash}</TableCell>
-                  <TableCell>{ticket.ticket_type}</TableCell>
-                  <TableCell>{ticket.holder_name}</TableCell>
-                  <TableCell>{ticket.status}</TableCell>
-                  <TableCell>
-                    <a className='download-button' href={ticket.pdf_link} download>Download</a>
-                  </TableCell>
-                </TableRow>
-                {!!ticket.add_ons?.length && (
-                  <TableRow>
-                    <TableCell colSpan={5}>
-                      <Table className='ticket-add-on-table'>
-                        <TableHead>
-                          <TableRow>
-                            <TableCell>Add-On</TableCell>
-                            <TableCell>Status</TableCell>
-                          </TableRow>
-                        </TableHead>
-                        <TableBody>
-                          {ticket.add_ons.map((add_on: AddOnTypes, index: number) => (
+                  <TableCell colSpan={5}>
+                    <Table className="ticket-add-on-table">
+                      <TableHead>
+                        <TableRow>
+                          <TableCell>Add-On</TableCell>
+                          <TableCell>Status</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {ticket.add_ons.map(
+                          (add_on: IAddOnTypes, index: number) => (
                             <TableRow key={index}>
                               <TableCell>{add_on.name}</TableCell>
                               <TableCell>{add_on.status}</TableCell>
                             </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    </TableCell>
-                  </TableRow>
-                )}
-              </Fragment>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  )
-}
+                          )
+                        )}
+                      </TableBody>
+                    </Table>
+                  </TableCell>
+                </TableRow>
+              )}
+            </Fragment>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </div>
+)
 
 export default TicketsTable

package/src/components/paymentContainer/index.tsx

@@ -1,10 +1,10 @@
-import React, { CSSProperties, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { AxiosError } from 'axios'
 import Container from '@mui/material/Container'
 import CircularProgress from '@mui/material/CircularProgress'
 import Alert from '@mui/material/Alert'
 import { Elements } from '@stripe/react-stripe-js'
-import { loadStripe, StripeConstructorOptions } from '@stripe/stripe-js'
+import { loadStripe, StripeConstructorOptions, StripeElementsOptions } from '@stripe/stripe-js'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
@@ -20,6 +20,7 @@ import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { ThemeOptions } from '@mui/material'
+import { CSSProperties } from "@mui/styles"
 
 const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
 
@@ -61,6 +62,7 @@ export interface IPaymentPage {
   stripeCardOptions?: StripeCardNumberElementOptions;
   disableZipSection: boolean;
   themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties };
+  elementsOptions?: StripeElementsOptions; 
 }
 
 const initialOrderValues: IOrderData = {
@@ -94,6 +96,7 @@ export const PaymentContainer = ({
   stripeCardOptions = {},
   disableZipSection = false,
   themeOptions,
+  elementsOptions
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -226,7 +229,7 @@ export const PaymentContainer = ({
                 <p className="payment_info__error">{errorText}</p>
               )}
               <div>
-                <Elements stripe={getStripePromise(reviewData)}>
+                <Elements stripe={getStripePromise(reviewData)} options={elementsOptions}>
                   <StripePayment
                     stripe_client_secret={_get(
                       reviewData,

package/src/components/stripePayment/index.tsx

@@ -191,7 +191,7 @@ const CheckoutForm = ({
           <label className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
-              options={{ ...options.style, ...stripeCardOptions }}
+              options={{ ...options, ...stripeCardOptions, }}
               onReady={_identity}
               onChange={_identity}
               onBlur={_identity}
@@ -200,11 +200,11 @@ const CheckoutForm = ({
           </label>
           <label className="expiration_element">
             <span className="card_label_text">Expiration date</span>
-            <CardExpiryElement options={{ ...options.style, ...stripeCardOptions }} />
+            <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
           </label>
           <label className="cvc_element">
             <span className="card_label_text">CVC</span>
-            <CardCvcElement options={{ ...options.style, ...stripeCardOptions }} />
+            <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
           </label>
           {!disableZipSection && (
             <label className="zip_element">

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -9,7 +9,7 @@ export interface IPromoCodeSectionProps {
   showPromoInput: boolean;
   isPromotionsEnabled: boolean;
   isAllTicketsSoldOut: boolean;
-
+  isAccessCodeEnabled?: boolean;
   setPromoCode: (value: string) => void;
   setPromoCodeUpdated: (value: string) => void;
   setShowPromoInput: (value: boolean) => void;
@@ -20,12 +20,45 @@ export const PromoCodeSection = ({
   promoCodeIsApplied,
   showPromoInput,
   isPromotionsEnabled,
-  isAllTicketsSoldOut,
   setPromoCode,
   setPromoCodeUpdated,
   setShowPromoInput,
+  isAccessCodeEnabled,
 }: IPromoCodeSectionProps) => {
 
+  const renderInputField = () => {
+      return (
+        <div className="promo-code-block">
+          <div className="promo-code-block">
+            <p className="promo-code-text">
+           { isAccessCodeEnabled ? 'Access code required' : 'Promo code'}
+            </p>
+            
+          </div>
+              <input
+                className="promo-code-input"
+                placeholder=""
+                onChange={e => {
+                  setPromoCode(e.target.value)
+                }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    setPromoCodeUpdated(promoCode)
+                  }
+                }}
+              />
+              <Button
+                className="promo-submit-button"
+                onClick={() => {
+                  setPromoCodeUpdated(promoCode)
+                }}
+              >
+                {isAccessCodeEnabled ? 'ENTER' : 'APPLY'}
+              </Button>
+            </div>
+      )
+  }
+
   return (
     <div >
       {promoCodeIsApplied ? (
@@ -34,39 +67,13 @@ export const PromoCodeSection = ({
             src={getImage('done.svg')}
             preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
           />
-          <p>PROMO CODE APPLIED SUCCESSFULLY</p>
+          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
-      {showPromoInput && (
-        <div className="promo-code-block">
-          <input
-            placeholder="Promo Code"
-            onChange={e => {
-              setPromoCode(e.target.value)
-            }}
-            onKeyPress={event => {
-              if (event.key === 'Enter') {
-                setPromoCodeUpdated(promoCode)
-              }
-            }}
-          />
-          <Button
-            className="promo-apply-button"
-            placeholder="Promo Code"
-            onClick={() => {
-              setPromoCodeUpdated(promoCode)
-            }}
-          >
-            Apply
-          </Button>
-        </div>
+      {showPromoInput && !promoCodeIsApplied && (
+        renderInputField()
       )}
-      {isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && (
-        <p className="promo-code-text">
-          Access code needed
-        </p>
-      )}
-      {isPromotionsEnabled && !showPromoInput ? (
+      {isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? (
         <Button
           className="promo-code-button"
           placeholder="Promo Codes"
@@ -76,7 +83,9 @@ export const PromoCodeSection = ({
         >
           Got a promo code? Click here
         </Button>
-      ) : null}
+      ) : !isPromotionsEnabled && !showPromoInput && isAccessCodeEnabled && !promoCodeIsApplied ? renderInputField() :
+          null
+      }
     </div>
   )
 }