tf-checkout-react 1.0.87 → 1.0.91

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}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message{margin-bottom:15px;text-align:center}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px;margin-bottom:10px}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.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}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.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{border:none;font-size:18px;margin-top:5px;outline:none;width:100%}.timer,.zip_element input{background-color:#000;color:#fff}.timer{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;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .countdown{font-weight:700;margin-top:10px}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.get-tickets-page{width:100%}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message{margin-bottom:15px;text-align:center}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px;margin-bottom:10px}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.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/createCheckoutDataBodyWithDefaultHolder.d.ts

@@ -3,5 +3,5 @@ interface ICheckoutBody {
         [key: string]: any;
     };
 }
-export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: {}) => ICheckoutBody;
+export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: {}, includeDob?: boolean) => ICheckoutBody;
 export {};

package/dist/utils/showZero.d.ts

@@ -0,0 +1 @@
+export declare const showZero: (value?: number) => string | number | null;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.87",
+  "version": "1.0.91",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -81,6 +81,7 @@
     "nanoid": "^3.1.30",
     "prop-types": "^15.7.2",
     "react-bootstrap": "^2.0.2",
+    "react-countdown": "^2.3.2",
     "react-inlinesvg": "^2.3.0",
     "react-share": "^4.4.0"
   }

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

@@ -40,6 +40,7 @@ import {
   getValidateFunctions,
   setLoggedUserData,
 } from './utils'
+import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
 import { CustomField } from '../common/CustomField'
 import axios from 'axios'
 import { CheckboxField } from '../common/CheckboxField'
@@ -51,6 +52,7 @@ import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { FormikPhoneNumberField } from '../common/FormikPhoneNumberField'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
+import Backdrop from '@mui/material/Backdrop'
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -90,7 +92,10 @@ export interface IBillingInfoPage {
     input?: CSSProperties;
     checkbox?: CSSProperties;
   };
-  hideErrorsAlertSection?: boolean
+  hideErrorsAlertSection?: boolean;
+  onSkipBillingPage: (data: any) => void;
+  skipPage?: boolean;
+  canSkipHolderNames?: boolean;
 }
 
 const LogicRunner: FC<{
@@ -202,7 +207,10 @@ export const BillingInfoContainer = ({
   hideLogo,
   themeOptions,
   onErrorClose = () => {},
-  hideErrorsAlertSection = false
+  hideErrorsAlertSection = false,
+  onSkipBillingPage = () => {},
+  skipPage = false,
+  canSkipHolderNames = false
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -241,6 +249,7 @@ export const BillingInfoContainer = ({
     state: '',
     zip: '',
   })
+  const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const emailLogged =
     _get(userData, 'email', '') || _get(userValues, 'email', '')
@@ -249,6 +258,7 @@ export const BillingInfoContainer = ({
   const lastNameLogged =
     _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
   const showDOB = getQueryVariable('age_required') === 'true'
+  const showTicketHolders = getQueryVariable('names_required') === 'true'
   const eventId = getQueryVariable('event_id')
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
   const ttfOptIn: boolean = Boolean(_get(cartInfoData, 'ttfOptIn', false))
@@ -349,6 +359,62 @@ export const BillingInfoContainer = ({
   useEffect(() => {
     fetchUserData(access_token)
   }, [access_token])
+
+  useEffect(() => {
+    const collectPaymentData = async () => {
+      if (skipPage && !_isEmpty(ticketsQuantity)) {
+        setLoading(true)
+        const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+          ticketsQuantity.length,
+          userData
+        )
+
+        try {
+          const res = await postOnCheckout(checkoutBody, access_token)
+          onSkipBillingPage(_get(res, 'data.data.attributes'))
+          setLoading(false)
+        } catch (e) {
+          onSubmitError(e)
+        }
+      } else {
+        setLoading(false)
+      }
+    }
+    collectPaymentData()
+  }, [skipPage, ticketsQuantity])
+
+
+  const collectCheckoutBody = (values: object): object => {
+    let checkoutBody = {}
+
+    // Auto collect ticket holders name when it was skipped optionally
+    if (showDOB && !showTicketHolders && canSkipHolderNames) {
+      checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+        ticketsQuantity.length,
+        values,
+        true
+      )
+    } else {
+      checkoutBody = createCheckoutDataBody(
+        ticketsQuantity.length,
+        values,
+        { emailLogged, firstNameLogged, lastNameLogged },
+        showDOB
+      )
+    }
+
+    return checkoutBody
+  }
+
+  // Displaying loader
+  if (loading) {
+    return (
+      <Backdrop sx={{ color: '#fff' }} open={true}>
+        <CircularProgress color="inherit" />
+      </Backdrop>
+    )
+  }
+
   return (
     <ThemeProvider theme={themeMui}>
       <Formik
@@ -378,12 +444,8 @@ export const BillingInfoContainer = ({
                   )
                 }
               }
-              const checkoutBody = createCheckoutDataBody(
-                ticketsQuantity.length,
-                values,
-                { emailLogged, firstNameLogged, lastNameLogged },
-                showDOB
-              )
+
+              const checkoutBody = collectCheckoutBody(values)
               const res = await postOnCheckout(checkoutBody, access_token)
               await getPaymentData(res.data.data.attributes.hash)
               handleSubmit(
@@ -452,12 +514,8 @@ export const BillingInfoContainer = ({
                 JSON.stringify(profileDataObj)
               )
             }
-            const checkoutBody = createCheckoutDataBody(
-              ticketsQuantity.length,
-              values,
-              { emailLogged, firstNameLogged, lastNameLogged },
-              showDOB
-            )
+
+            const checkoutBody = collectCheckoutBody(values)
             const res = await postOnCheckout(
               checkoutBody,
               access_token_register

package/src/components/loginModal/index.tsx

@@ -51,6 +51,11 @@ export const LoginModal: FC<Props> = ({
   modalClassname = '',
 }) => {
   const [error, setError] = useState('')
+  const handleForgotPassword = () => {
+    if (typeof window !== 'undefined') {
+      window.open(`${CONFIGS.BASE_URL}/password-restore/`)
+    }
+  }
   return (
     <Modal
       open={true}
@@ -190,6 +195,9 @@ export const LoginModal: FC<Props> = ({
                   <div className="login-action-button">
                     <button type="submit">Login</button>
                   </div>
+                  <div className='forgot-password'>
+                    <span onClick={handleForgotPassword}>Forgot password?</span>
+                  </div>
                 </div>
               </Form>
             )}

package/src/components/loginModal/style.css

@@ -60,4 +60,13 @@
     font-size: 14px;
     padding-left: 10px;
     margin-bottom: 4px;
+}
+.forgot-password {
+  text-align: center;
+}
+.forgot-password span {
+  cursor: pointer;
+}
+.forgot-password span:hover {
+  text-decoration: underline;
 }

package/src/components/paymentContainer/index.tsx

@@ -4,7 +4,11 @@ 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, StripeElementsOptions } 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,15 +24,14 @@ 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"
+import { CSSProperties } from '@mui/styles'
+import TimerWidget from '../timerWidget'
 
 const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
 
 const getStripePromise = (reviewData: any) => {
-  const stripePublishableKey = _get(
-    reviewData,
-    'payment_method.stripe_publishable_key'
-  ) || publishableKey
+  const stripePublishableKey =
+    _get(reviewData, 'payment_method.stripe_publishable_key') || publishableKey
   const stripeAccount = _get(
     reviewData,
     'payment_method.stripe_connected_account'
@@ -61,8 +64,13 @@ export interface IPaymentPage {
   onPaymentError: (value: AxiosError) => void;
   stripeCardOptions?: StripeCardNumberElementOptions;
   disableZipSection: boolean;
-  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties };
-  elementsOptions?: StripeElementsOptions; 
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
+  elementsOptions?: StripeElementsOptions;
+  onCountdownFinish?: () => void;
+  enableTimer?: boolean;
 }
 
 const initialOrderValues: IOrderData = {
@@ -96,7 +104,9 @@ export const PaymentContainer = ({
   stripeCardOptions = {},
   disableZipSection = false,
   themeOptions,
-  elementsOptions
+  elementsOptions,
+  onCountdownFinish = () => {},
+  enableTimer = false,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -193,6 +203,13 @@ export const PaymentContainer = ({
   return (
     <ThemeProvider theme={themeMui}>
       <div className="payment_page">
+        {!paymentIsLoading && !error && enableTimer && (
+          <TimerWidget
+            expires_at={_get(reviewData, 'expires_at', 0)}
+            buyLoading={paymentIsLoading}
+            onCountdownFinish={onCountdownFinish}
+          />
+        )}
         {error && (
           <Alert severity="error" onClose={onErrorClose} variant="filled">
             {error}
@@ -229,7 +246,10 @@ export const PaymentContainer = ({
                 <p className="payment_info__error">{errorText}</p>
               )}
               <div>
-                <Elements stripe={getStripePromise(reviewData)} options={elementsOptions}>
+                <Elements
+                  stripe={getStripePromise(reviewData)}
+                  options={elementsOptions}
+                >
                   <StripePayment
                     stripe_client_secret={_get(
                       reviewData,

package/src/components/ticketsContainer/TicketRow.tsx

@@ -25,18 +25,15 @@ export const TicketRow = ({
   const soldOutMessage = ticketTier.soldOutMessage
     ? `${ticketTier.soldOutMessage}`.toUpperCase()
     : 'SOLD OUT'
-  const isSalesClosed =
-    !ticketTier.salesStarted ||
-    ticketTier.salesEnded ||
-    !_has(ticketTier, 'maxQuantity') ||
-    ticketTier.maxQuantity === 0
+  const isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded
   const options = getTicketSelectOptions(
     ticketTier.maxQuantity,
     ticketTier.minQuantity,
     ticketTier.multiplier
   )
+  const ticketsClosedMessage = !ticketTier.salesStarted ?  'Sales not started' : 'Sales Ended'
 
-  const onSaleContent = isSalesClosed ? null : (
+  const onSaleContent = isSalesClosed ? ticketsClosedMessage : (
     <div className="get-tickets">
       <Box className="get-tickets__selectbox">
         <FormControl fullWidth>
@@ -75,9 +72,6 @@ export const TicketRow = ({
   if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
     returnValue = soldOutMessage
   }
-  if (!+ticketTier.cost && !+ticketTier.price) {
-    returnValue = 'FREE'
-  }
   if (ticketTier.displayTicket) {
     returnValue = onSaleContent
   }

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -38,6 +38,9 @@ export const TicketsSection = ({
           ticketIsDiscounted = true
         }
 
+        const ticketIsFree = (+ticket.cost || +ticket.price) === 0
+        const ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : `$ ${(+ticket.cost || +ticket.price).toFixed(2)}`
+
         return (
           <div
             key={ticket.id || ticket.name}
@@ -51,12 +54,8 @@ export const TicketsSection = ({
                 {ticketIsDiscounted && (
                   <p className="old-price">$ {(+ticket.oldPrice).toFixed(2)}</p>
                 )}
-                <p>
-                  {isSoldOut
-                    ? 'SOLD OUT'
-                    : `$ ${(+ticket.cost || +ticket.price).toFixed(2)}`}
-                </p>
-                {!isSoldOut && (
+                <p>{ticketPrice}</p>
+                {!isSoldOut && !ticketIsFree && (
                   <p className="fees">
                     {ticket.taxesIncluded ? '(incl. Fees)' : '(excl. Fees)'}
                   </p>
@@ -66,16 +65,12 @@ export const TicketsSection = ({
                 className="event-detail__tier-state"
                 style={{ minWidth: 55 }}
               >
-                {ticket.salesStarted ? (
-                  <TicketRow
-                    ticketTier={ticket}
-                    prevTicketTier={arr[i - 1]}
-                    selectedTickets={selectedTickets}
-                    handleTicketSelect={ticketSelect}
-                  />
-                ) : (
-                  <p className='ticket-not-started-message'>Sales not started</p>
-                )}
+                <TicketRow
+                  ticketTier={ticket}
+                  prevTicketTier={arr[i - 1]}
+                  selectedTickets={selectedTickets}
+                  handleTicketSelect={ticketSelect}
+                />
               </div>
             </div>
           </div>

package/src/components/ticketsContainer/index.tsx

@@ -59,6 +59,7 @@ export interface IGetTickets {
   themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
   isAccessCodeEnabled?: boolean;
   hideSessionButtons?: boolean;
+  hideWaitingList?: boolean;
 }
 
 export interface ITicket {
@@ -84,7 +85,8 @@ export const TicketsContainer = ({
   isPromotionsEnabled = true,
   themeOptions,
   isAccessCodeEnabled = false,
-  hideSessionButtons = false
+  hideSessionButtons = false,
+  hideWaitingList = false
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -118,7 +120,7 @@ export const TicketsContainer = ({
   }, [])
 
   useEffect(() => {
-    getTicketsApi()
+    !!eventId && getTicketsApi()
   }, [eventId, promoCodeUpdated])
 
   const handleLogout = () => {
@@ -244,10 +246,8 @@ export const TicketsContainer = ({
               ? window.localStorage.getItem('access_token') || ''
               : ''
 
-          const ticketsQuantity = Object.keys(selectedTickets).length
-
           const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            ticketsQuantity,
+            ticketQuantity,
             userData
           )
 
@@ -337,7 +337,7 @@ export const TicketsContainer = ({
                   callback={updateTickets}
                 />
             ) : null}
-            {showWaitingList && event.salesStarted && (
+            {showWaitingList && event.salesStarted && !hideWaitingList && (
               <WaitingList tickets={tickets} eventId={eventId} />
             )}
             <PromoCodeSection

package/src/components/timerWidget/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import Countdown from 'react-countdown'
+import { showZero } from '../../utils/showZero'
+import './style.css'
+
+export interface ITimerWidgetPage {
+  expires_at: number;
+  buyLoading?: boolean;
+  onCountdownFinish?: () => void;
+}
+
+export interface IRenderer {
+  minutes: number;
+  seconds: number;
+  completed: number;
+  handleCountdownFinish: () => void;
+}
+
+const TimerWidget = ({
+  expires_at,
+  buyLoading,
+  onCountdownFinish = () => {},
+}: ITimerWidgetPage) => {
+  const [showTimer, setShowTimer] = useState(true)
+
+  const handleCountdownFinish = () => {
+    setShowTimer(false)
+    if (!buyLoading) {
+      onCountdownFinish()
+    }
+  }
+
+  const renderer = ({
+    minutes,
+    seconds,
+    completed,
+    handleCountdownFinish,
+  }: IRenderer) => {
+    if (completed) {
+      handleCountdownFinish()
+      return null
+    }
+    return (
+      <span>
+        {showZero(minutes)}:{showZero(seconds)}
+      </span>
+    )
+  }
+
+  return showTimer && !!expires_at ? (
+    <div className="timer">
+      <div className="toast-message">
+        <p>Please complete your purchase before the timer reaches zero.</p>
+        <p className="countdown">
+          <Countdown
+            date={Date.now() + expires_at * 1000}
+            renderer={(props: any) =>
+              renderer({
+                ...props,
+                handleCountdownFinish,
+              })
+            }
+          />
+        </p>
+      </div>
+    </div>
+  ) : null
+}
+
+export default TimerWidget

package/src/components/timerWidget/style.css

@@ -0,0 +1,26 @@
+.timer {
+  position: absolute;
+  pointer-events: auto;
+  background-color: #000000;
+  overflow: hidden;
+  margin: 0 0 6px;
+  padding: 15px 15px 15px 50px;
+  width: 300px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  -moz-box-shadow: 0 0 12px #999;
+  -webkit-box-shadow: 0 0 12px #999;
+  box-shadow: 0 0 12px #999;
+  max-width: 300px;
+  color: #fff;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
+  right: 15px;
+}
+
+.timer .countdown {
+  font-weight: bold;
+  margin-top: 10px;
+}

package/src/utils/createCheckoutDataBodyWithDefaultHolder.ts

@@ -15,7 +15,8 @@ interface IticketHolder {
 
 export const createCheckoutDataBodyWithDefaultHolder = (
   ticketsQuantity: number,
-  logedInValues: {}
+  logedInValues: {},
+  includeDob: boolean = false
 ): ICheckoutBody => {
   const ticket_holders: IticketHolder[] = []
 
@@ -47,5 +48,12 @@ export const createCheckoutDataBodyWithDefaultHolder = (
     },
   }
 
+  if (includeDob) {
+    const holderAgeDate = new Date(_get(logedInValues, 'holderAge', ''))
+    body.attributes.dob_day = holderAgeDate.getDate()
+    body.attributes.dob_month = holderAgeDate.getMonth() + 1
+    body.attributes.dob_year = holderAgeDate.getFullYear()
+  }
+
   return body
 }

package/src/utils/showZero.tsx

@@ -0,0 +1,10 @@
+import _isNumber from 'lodash/isNumber'
+
+export const showZero = (value = 0) => {
+  const intNumber = Number(value)
+  return _isNumber(intNumber)
+    ? intNumber >= 0 && intNumber < 10
+      ? '0' + intNumber
+      : intNumber
+    : null
+}