tf-checkout-react 1.0.63 → 1.0.64

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 .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 -10px}.confirmation-page .referral_text_image_section .referral_text_section{margin:10px}.confirmation-page .referral_text_image_section .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text_image_section .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 .share_wrapper .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_wrapper .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .share_wrapper .share_section .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons .social-media-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons .social-media-btns .sharing-btn{min-width:130px}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner.share-by-link-copy{padding:0;text-align:left}.confirmation-page .share_wrapper .share_section .invitation_section .sharing-button{flex:1 1}.confirmation-page .share_wrapper .share_section .invitation_section .convenient_buttons.sharing-btn{display:inline}.confirmation-page .share_wrapper .share_section .invitation_section .share-by-link{background:#000;color:#fff;padding:0}.confirmation-page .share_wrapper .share_section .invitation_section .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share_wrapper .share_section .invitation_section .sharing-btn{flex:1 1;padding:7px;text-align:center}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner{background:#000;color:#fff;padding:10px}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner .svg_wrapper{display:inline}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner .share-input{background-color:#fff;text-align:left;width:300px}.confirmation-page .share_wrapper .share_section .invitation_section .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .share_wrapper .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .share_wrapper .pricing-section_wrapper.free_price{background:#e9835b;border:1px solid #eb7b4a;color:#fff}.confirmation-page .share_wrapper .pricing-section_label{font-weight:600}.confirmation-page .share_wrapper .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .share_wrapper .pricing-section_price{font-weight:600;text-align:right}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;font-weight:700;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;font-weight:400;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{background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;font-size:1em;margin:0 35px;padding:8px 15px;text-align:center;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.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{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:#32325d;border:none;border-radius:4px;color:#fff;font-size:12px;font-weight:400;padding:8px 14px;text-decoration:none;transition:all .15s ease}.order-details .download-button:hover{background-color:#505050}
+.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.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 .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 -10px}.confirmation-page .referral_text_image_section .referral_text_section{margin:10px}.confirmation-page .referral_text_image_section .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text_image_section .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 .share_wrapper .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_wrapper .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .share_wrapper .share_section .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons .social-media-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons .social-media-btns .sharing-btn{min-width:130px}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner.share-by-link-copy{padding:0;text-align:left}.confirmation-page .share_wrapper .share_section .invitation_section .sharing-button{flex:1 1}.confirmation-page .share_wrapper .share_section .invitation_section .convenient_buttons.sharing-btn{display:inline}.confirmation-page .share_wrapper .share_section .invitation_section .share-by-link{background:#000;color:#fff;padding:0}.confirmation-page .share_wrapper .share_section .invitation_section .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share_wrapper .share_section .invitation_section .sharing-btn{flex:1 1;padding:7px;text-align:center}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner{background:#000;color:#fff;padding:10px}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner .svg_wrapper{display:inline}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner .share-input{background-color:#fff;text-align:left;width:300px}.confirmation-page .share_wrapper .share_section .invitation_section .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .share_wrapper .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .share_wrapper .pricing-section_wrapper.free_price{background:#e9835b;border:1px solid #eb7b4a;color:#fff}.confirmation-page .share_wrapper .pricing-section_label{font-weight:600}.confirmation-page .share_wrapper .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .share_wrapper .pricing-section_price{font-weight:600;text-align:right}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;font-weight:700;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;font-weight:400;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{background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;font-size:1em;margin:0 35px;padding:8px 15px;text-align:center;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.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}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.63",
+  "version": "1.0.64",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -66,8 +66,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@mui/lab": "^5.0.0-alpha.55",
-    "@mui/material": "5.1.0",
-    "@mui/styles": "^5.1.1",
+    "@mui/material": "^5.2.2",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.21.1",
     "axios": "^0.24.0",

package/src/api/index.ts

@@ -211,6 +211,12 @@ export const getProfileData = (accessToken: any) =>
       ...ttfHeaders,
       Authorization: `Bearer ${accessToken}`,
     },
+  }).catch((e:any)=>{
+    if(isWindowDefined){
+      const event = new window.CustomEvent('auth_error', e)
+      window.document.dispatchEvent(event)
+    }
+    return e
   })
 
 export const getCountries = () => publicRequest.get('/countries/')

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

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC, useEffect, useState, useCallback } from 'react'
 import { AxiosError } from 'axios'
 import {
   Field,
@@ -46,6 +46,7 @@ import { getQueryVariable } from '../../utils/getQueryVariable'
 import { SelectField } from '../common/SelectField'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { getImage } from '../../utils/getImage'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 
 const TTFLOGO = getImage('logo-ttf.png')
 
@@ -95,6 +96,7 @@ export interface IBillingInfoPage {
   buttonName?: string;
   theme?: 'light' | 'dark';
   isLoggedIn?: boolean;
+  fontFamily?: string
 }
 
 const LogicRunner: FC<{
@@ -200,7 +202,15 @@ export const BillingInfoContainer = ({
   onLogin = () => {},
   onLoginSuccess = () => {},
   isLoggedIn: pIsLoggedIn = false,
+  fontFamily
 }: IBillingInfoPage) => {
+  const themeMui = createTheme({
+    typography: {
+      allVariants: {
+        fontFamily
+      },
+    },
+  })
   const isWindowDefined = typeof window !== 'undefined'
   const userData =
     isWindowDefined && window.localStorage.getItem('user_data')
@@ -263,6 +273,17 @@ export const BillingInfoContainer = ({
     return qty
   }
 
+  const handleAuthErrors = useCallback(() => {
+    setIsLoggedIn(false)
+  }, [])
+
+  useEffect(() => {
+    isWindowDefined && window.document.addEventListener("auth_error", handleAuthErrors)
+    return () => {
+      isWindowDefined && window.document.removeEventListener("auth_error", handleAuthErrors)
+    }
+  }, [handleAuthErrors])
+
   useEffect(() => {
     if ((pIsLoggedIn || access_token) && !isLoggedIn) {
       setIsLoggedIn(true)
@@ -338,7 +359,7 @@ export const BillingInfoContainer = ({
   }, [access_token])
 
   return (
-    <>
+    <ThemeProvider theme={themeMui}>
       <Formik
         initialValues={getInitialValues(
           dataWithUniqueIds,
@@ -680,6 +701,6 @@ export const BillingInfoContainer = ({
           onGetProfileDataError={onGetProfileDataError}
         />
       )}
-    </>
+    </ThemeProvider>
   )
 }

package/src/components/common/CustomField.tsx

@@ -5,7 +5,6 @@ import _get from 'lodash/get'
 import _includes from 'lodash/includes'
 
 import { FieldInputProps, FormikProps } from 'formik'
-import { makeStyles } from '@mui/styles'
 
 export interface ISelectOption {
   label: string | number;
@@ -29,14 +28,6 @@ interface IOtherProps {
   [key: string]: any;
 }
 
-const useStyles = makeStyles({
-  input: {
-    '&::placeholder': {
-      color: 'gray',
-    },
-  },
-})
-
 export const CustomField = ({
   label,
   type = 'text',
@@ -50,7 +41,6 @@ export const CustomField = ({
   const isTouched =
     Boolean(_get(touched, field.name)) ||
     (_includes(field.name, 'holder') && !!error && !!submitCount)
-  const classes = useStyles()
 
   return (
     <TextField
@@ -61,11 +51,6 @@ export const CustomField = ({
       fullWidth={true}
       error={!!error && isTouched}
       helperText={isTouched && error}
-      InputProps={{
-        classes: {
-          input: classes.input,
-        },
-      }}
       SelectProps={{
         native: true,
         className: theme,
@@ -74,16 +59,16 @@ export const CustomField = ({
       {...field}
     >
       {isSelectField
-        ? _map(selectOptions, option => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-          >
-            {option.label}
-          </option>
-        ))
-        : null}
+      ? _map(selectOptions, option => (
+        <option
+          key={option.value}
+          value={option.value}
+          disabled={option.disabled}
+        >
+          {option.label}
+        </option>
+      ))
+      : null}
     </TextField>
   )
 }

package/src/components/common/SelectField.tsx

@@ -4,7 +4,6 @@ import _map from 'lodash/map'
 import _get from 'lodash/get'
 
 import { FieldInputProps, FormikProps } from 'formik'
-import { makeStyles } from '@mui/styles'
 import { FormControl, InputLabel, FormHelperText } from '@mui/material'
 
 export interface ISelectOption {
@@ -29,14 +28,6 @@ interface IOtherProps {
   [key: string]: any;
 }
 
-const useStyles = makeStyles({
-  input: {
-    '&::placeholder': {
-      color: 'gray',
-    },
-  },
-})
-
 export const SelectField = ({
   label,
   type = 'text',
@@ -47,7 +38,6 @@ export const SelectField = ({
 }: ISelectField & IOtherProps) => {
   const isTouched = Boolean(_get(touched, field.name))
   const error = _get(errors, field.name)
-  const classes = useStyles()
 
   return (
     <FormControl fullWidth={true}>
@@ -62,9 +52,6 @@ export const SelectField = ({
         error={!!error && isTouched}
         inputProps={{
           id: field.name,
-          classes: {
-            input: classes.input,
-          },
         }}
         native={true}
         className={theme}

package/src/components/myTicketsContainer/index.tsx

@@ -21,6 +21,8 @@ interface MyTicketsTypes {
   handleDetailsInfo: (id: string) => void;
   onGetOrdersSuccess: (res: any) => void;
   onGetOrdersError: (err: any) => void;
+
+  theme?: 'light' | 'dark';
 }
 
 interface EventFilter {
@@ -31,7 +33,8 @@ interface EventFilter {
 export const MyTicketsContainer = ({
   handleDetailsInfo = () => {},
   onGetOrdersSuccess = () => {},
-  onGetOrdersError = () => {}
+  onGetOrdersError = () => {},
+  theme = 'dark',
 }: MyTicketsTypes) => {
   const [data, setData] = useState<any>(null)
   const [loading, setLoading] = useState(true)
@@ -64,20 +67,25 @@ export const MyTicketsContainer = ({
     fetchData(newPage + 1, limit, filter)
   }
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     fetchData(1, +event.target.value, filter)
     setLimit(+event.target.value)
   }
 
-  const onChange = (_event: React.SyntheticEvent<Element, Event>, eventFilter: EventFilter | null) => {
-    fetchData(1, limit, eventFilter?.url_name || '' )
+  const onChange = (
+    _event: React.SyntheticEvent<Element, Event>,
+    eventFilter: EventFilter | null
+  ) => {
+    fetchData(1, limit, eventFilter?.url_name || '')
     setFilter(eventFilter?.url_name || '')
   }
 
-  return ( 
-    <div className='my-ticket'>
+  return (
+    <div className={`my-ticket ${theme}`}>
       {loading && (
-        <div className='loading'>
+        <div className="loading">
           <CircularProgress />
         </div>
       )}
@@ -90,9 +98,9 @@ export const MyTicketsContainer = ({
             onChange={onChange}
             options={data.purchased_events}
             sx={{ width: 300 }}
-            renderInput={(params) => <TextField {...params} label="Events" />}
+            renderInput={params => <TextField {...params} label="Events" />}
           />
-          <TableContainer component={Paper} className='my-ticket-table'>
+          <TableContainer component={Paper} className="my-ticket-table">
             <Table aria-label="collapsible table">
               <TableHead>
                 <TableRow>
@@ -104,7 +112,11 @@ export const MyTicketsContainer = ({
               </TableHead>
               <TableBody>
                 {data.orders?.map((row: RowItems) => (
-                  <MyTicketsRow key={row.id} row={row} handleDetailsInfo={handleDetailsInfo} />
+                  <MyTicketsRow
+                    key={row.id}
+                    row={row}
+                    handleDetailsInfo={handleDetailsInfo}
+                  />
                 ))}
               </TableBody>
             </Table>

package/src/components/orderDetailsContainer/index.tsx

@@ -29,23 +29,28 @@ interface OrderDetailsTypes {
 }
 
 const getTotal = (data: any) => {
-  if(!data?.total || !_has(data, 'items.ticket_types.length')) return ''
-  
+  if (!data?.total || !_has(data, 'items.ticket_types.length')) return ''
+
   return data.items.ticket_types[0].currency + data.total
 }
 
 export const OrderDetailsContainer = ({
   onGetOrdersSuccess = () => {},
-  onGetOrdersError = () => {}
+  onGetOrdersError = () => {},
 }: OrderDetailsTypes) => {
-  const [data, setData] = useState<any>(null)
+  const [data, setData] = useState<any>({})
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     (async () => {
       try {
         setLoading(true)
-        const orderId = window.location.href.split('/').slice(-1)[0]
+        let orderId = ''
+        if (typeof window !== 'undefined') {
+          const params: URLSearchParams = new URL(`${window.location}`)
+            .searchParams
+          orderId = params.get('o') || ''
+        }
         const response = await getOrderDetails(orderId)
         onGetOrdersSuccess(response)
 
@@ -63,17 +68,23 @@ export const OrderDetailsContainer = ({
   return (
     <div className="order-details">
       {loading ? (
-        <div className='loading'>
+        <div className="loading">
           <CircularProgress />
         </div>
       ) : (
         <>
-          <h1 className='layout-title'>Order Details</h1>
-          <div className='order-summary-box'>
-            <h4 className='sub-title'>Order Summary</h4>
-            <div>
-              <b>Your personal share link for this event is:{" "}</b>
-              <a href={data?.personal_share_link} target='_blank' rel='noreferrer'>{data?.personal_share_link}</a>
+          <h1 className="layout-title">Order Details</h1>
+          <div className="order-summary-box">
+            <h4 className="sub-title">Order Summary</h4>
+            <div className="personal-link">
+              <b>Your personal share link for this event is: </b>
+              <a
+                href={data?.personal_share_link}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {data?.personal_share_link}
+              </a>
             </div>
             <TableContainer component={Paper}>
               <Table aria-label="collapsible table">
@@ -86,23 +97,33 @@ export const OrderDetailsContainer = ({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {data?.items.ticket_types?.map((ticket: TicketTypes, index: number) => (
-                    <TableRow key={index}>
-                      <TableCell><b>Ticket Type: </b>{ticket.name}</TableCell>
-                      <TableCell>{ticket.currency + ticket.price}</TableCell>
-                      <TableCell>{ticket.quantity}</TableCell>
-                      <TableCell>{ticket.currency + ticket.total}</TableCell>
-                    </TableRow>
-                  ))}
-                  {data?.items.add_ons?.map((ticket: TicketTypes, index: number) => (
-                    <TableRow key={index}>
-                      <TableCell><b>Add-On: </b>{ticket.name}</TableCell>
-                      <TableCell>{ticket.currency + ticket.price}</TableCell>
-                      <TableCell>{ticket.quantity}</TableCell>
-                      <TableCell>{ticket.currency + ticket.total}</TableCell>
-                    </TableRow>
-                  ))}
-                  <TableRow className='total-row'>
+                  {data?.items.ticket_types?.map(
+                    (ticket: TicketTypes, index: number) => (
+                      <TableRow key={index}>
+                        <TableCell>
+                          <b>Ticket Type: </b>
+                          {ticket.name}
+                        </TableCell>
+                        <TableCell>{ticket.currency + ticket.price}</TableCell>
+                        <TableCell>{ticket.quantity}</TableCell>
+                        <TableCell>{ticket.currency + ticket.total}</TableCell>
+                      </TableRow>
+                    )
+                  )}
+                  {data?.items.add_ons?.map(
+                    (ticket: TicketTypes, index: number) => (
+                      <TableRow key={index}>
+                        <TableCell>
+                          <b>Add-On: </b>
+                          {ticket.name}
+                        </TableCell>
+                        <TableCell>{ticket.currency + ticket.price}</TableCell>
+                        <TableCell>{ticket.quantity}</TableCell>
+                        <TableCell>{ticket.currency + ticket.total}</TableCell>
+                      </TableRow>
+                    )
+                  )}
+                  <TableRow className="total-row">
                     <TableCell />
                     <TableCell />
                     <TableCell>Total</TableCell>
@@ -113,6 +134,19 @@ export const OrderDetailsContainer = ({
             </TableContainer>
           </div>
           <TicketsTable tickets={data.tickets} />
+          <div className="return-button-container">
+            <button
+              type="button"
+              className="return-button"
+              onClick={() => {
+                if (typeof window !== 'undefined') {
+                  window.location.assign('/orders')
+                }
+              }}
+            >
+              Return to Order History
+            </button>
+          </div>
         </>
       )}
     </div>

package/src/components/orderDetailsContainer/style.css

@@ -27,9 +27,11 @@
 }
 .order-details .total-row td {
   font-weight: 700;
+  color: white;
 }
 .order-details th {
   font-weight: 700;
+  color: white;
 }
 .order-details .tickets-box {
   margin-top: 30px;
@@ -38,16 +40,33 @@
   background-color: #fcf8e3;;
 }
 .order-details .download-button {
-  border: none;
-  border-radius: 4px;
-  text-decoration: none;
-  color: #fff;
-  background-color: #32325d;
-  font-size: 12px;
+  width: 100%;
   font-weight: 400;
-  transition: all 150ms ease;
-  padding: 8px 14px;
+  font-size: 16px;
+  line-height: normal;
+  min-height: auto;
+  padding: 12px 0;
+  border: 1px solid white;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background-color: #212529;
+  border-radius: 0;
+  color: #fff;
+  position: relative;
+  display: block;
+  cursor: pointer;
+  font-family: 'Bebas Neue';
+  text-transform: uppercase;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  text-decoration: none;
 }
 .order-details .download-button:hover {
   background-color: #505050;
+}
+
+.order-details .personal-link {
+  padding: 20px 0;
 }