tf-checkout-react 1.0.71 → 1.0.75

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;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}
+.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}

package/dist/utils/setConfigs.d.ts

@@ -3,7 +3,8 @@ interface IConfigs {
     CLIENT_ID: string;
     CLIENT_SECRET: string;
     STRIPE_PUBLISHABLE_KEY: string;
-    [key: string]: string;
+    X_SOURCE_ORIGIN: string;
+    [key: string]: string | number;
 }
 export declare const CONFIGS: IConfigs;
 export declare const setConfigs: (configs: IConfigs) => void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.71",
+  "version": "1.0.75",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -51,7 +51,7 @@
     "@types/lodash": "^4.14.176",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
     "husky": "^7.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package/src/api/index.ts

@@ -4,14 +4,6 @@ import _get from 'lodash/get'
 import { CONFIGS } from '../utils'
 
 const isWindowDefined = typeof window !== 'undefined'
-const discardedOrigins = [
-  'http://localhost',
-  'gtsb.io',
-  'gatsbyjs.io',
-  'https://www.houseofx.nyc',
-  'https://tickets-staging.houseofx.nyc']
-
-const origin = isWindowDefined && window.location.origin
 
 const ttfHeaders: { [key: string]: any } = {
   Accept: 'application/vnd.api+json',
@@ -21,12 +13,6 @@ const ttfHeaders: { [key: string]: any } = {
 if (isWindowDefined && localStorage.getItem('auth_guest_token')) {
   ttfHeaders['Authorization-Guest'] = localStorage.getItem('auth_guest_token')
 }
-if (
-  isWindowDefined &&
-  !discardedOrigins.some(el => origin && origin.includes(el))
-) {
-  ttfHeaders['X-Source-Origin'] = 'houseofx.nyc'
-} 
 
 interface IPublicRequest extends AxiosInstance {
   setGuestToken: (token: string) => void;
@@ -81,12 +67,10 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
     config.headers = updatedHeaders
   }
 
-  if (
-    isWindowDefined &&
-    !discardedOrigins.some(el => origin && origin.includes(el))) {
+  if (CONFIGS.X_SOURCE_ORIGIN) {
     const updatedHeaders = {
       ...config.headers,
-      'X-Source-Origin': 'houseofx.nyc',
+      'X-Source-Origin': CONFIGS.X_SOURCE_ORIGIN,
     }
     config.headers = updatedHeaders
   }
@@ -107,6 +91,10 @@ publicRequest.setBaseUrl = (baseUrl: string) =>
 publicRequest.setAccessToken = token =>
   (publicRequest.defaults.headers.common.Authorization = token)
 
+export const setXSourceOrigin = (sourceOrigin: string) => {
+  ttfHeaders['X-Source-Origin'] = sourceOrigin
+}
+
 export const setCustomHeader = (response: any) => {
   const guestHeaderResponseValue = _get(
     response,

package/src/assets/images/done.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47717 15.5228 0 10 0C4.47717 0 0 4.47717 0 10C0 15.5228 4.47717 20 10 20ZM8.14661 15.8678L16.8782 6.39722C16.9561 6.31335 17 6.19922 17 6.08008C17 5.96094 16.9561 5.8468 16.8782 5.76282L16.3016 5.12854C16.1386 4.95715 15.8796 4.95715 15.7167 5.12854L7.85004 13.661L4.28326 9.79236C4.20593 9.70776 4.10071 9.66016 3.99084 9.66016C3.9353 9.66016 3.88086 9.67236 3.83069 9.69531C3.78168 9.71777 3.73663 9.75061 3.69843 9.79236L3.12183 10.4177C3.07635 10.4667 3.04248 10.5259 3.02216 10.5905C3.00763 10.6365 3 10.6853 3 10.735C3 10.8541 3.04388 10.9683 3.12183 11.0521L7.56177 15.8678C7.6391 15.9524 7.74438 16 7.85419 16C7.96399 16 8.06927 15.9524 8.14661 15.8678Z" fill="#569F44"/>
+</svg>

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

@@ -46,11 +46,8 @@ import { getQueryVariable } from '../../utils/getQueryVariable'
 import { SelectField } from '../common/SelectField'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { FormikPhoneNumberField } from '../common/FormikPhoneNumberField'
-import { getImage } from '../../utils/getImage'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 
-const TTFLOGO = getImage('logo-ttf.png')
-
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
   ticketHoldersFields?: IBillingInfoData;
@@ -66,7 +63,7 @@ export interface IBillingInfoPage {
     refreshToken: string;
   }) => void;
 
-  onRegisterError?: (e: AxiosError) => void;
+  onRegisterError?: (e: AxiosError, email: string) => void;
 
   onSubmitError?: (e: AxiosError) => void;
 
@@ -97,7 +94,9 @@ export interface IBillingInfoPage {
   buttonName?: string;
   theme?: 'light' | 'dark';
   isLoggedIn?: boolean;
-  fontFamily?: string
+  accountInfoTitle?: string | JSX.Element;
+  fontFamily?: string;
+  hideLogo?: boolean;
 }
 
 const LogicRunner: FC<{
@@ -200,15 +199,17 @@ export const BillingInfoContainer = ({
   onGetProfileDataError = () => {},
   onAuthorizeSuccess = () => {},
   onAuthorizeError = () => {},
-  onLogin = () => {},
+  onLogin,
   onLoginSuccess = () => {},
   isLoggedIn: pIsLoggedIn = false,
-  fontFamily
+  accountInfoTitle = '',
+  fontFamily,
+  hideLogo,
 }: IBillingInfoPage) => {
   const themeMui = createTheme({
     typography: {
       allVariants: {
-        fontFamily
+        fontFamily,
       },
     },
   })
@@ -279,9 +280,11 @@ export const BillingInfoContainer = ({
   }, [])
 
   useEffect(() => {
-    isWindowDefined && window.document.addEventListener("auth_error", handleAuthErrors)
+    isWindowDefined &&
+      window.document.addEventListener('auth_error', handleAuthErrors)
     return () => {
-      isWindowDefined && window.document.removeEventListener("auth_error", handleAuthErrors)
+      isWindowDefined &&
+        window.document.removeEventListener('auth_error', handleAuthErrors)
     }
   }, [handleAuthErrors])
 
@@ -449,11 +452,12 @@ export const BillingInfoContainer = ({
                   )
                 }
 
-                if (error?.email) {
+                if (error?.email && !onLogin) {
+                  // False will stand for outside controll
                   setAlreadyHasUser(true)
                   setShowModalLogin(true)
                 }
-                onRegisterError(e)
+                onRegisterError(e, values.email)
               }
               return
             }
@@ -514,24 +518,35 @@ export const BillingInfoContainer = ({
             <div className={`billing-info-container ${theme}`}>
               {!isLoggedIn && (
                 <div className="account-actions-block">
-                  <div>
-                    Got a <strong>TICKET</strong>FAIRY account?
-                  </div>
+                  <div>{accountInfoTitle}</div>
                   <div>Login & skip ahead:</div>
                   <div className="login-block">
                     <button
                       className="login-register-button"
                       type="button"
                       onClick={() => {
-                        onLogin()
-                        setShowModalLogin(true)
+                        // If outside login needed to skip package login functionallity
+                        if (onLogin) {
+                          onLogin()
+                        } else {
+                          setShowModalLogin(true)
+                        }
                       }}
                     >
                       Login
                     </button>
-                    <div className="logo-image-container">
-                      <img src={TTFLOGO} alt="nodata" />
-                    </div>
+                    {!hideLogo && (
+                      <div className="logo-image-container">
+                        <img
+                          src={
+                            theme === 'dark'
+                              ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg'
+                              : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
+                          }
+                          alt="nodata"
+                        />
+                      </div>
+                    )}
                   </div>
                 </div>
               )}
@@ -582,7 +597,7 @@ export const BillingInfoContainer = ({
                                               ? CheckboxField
                                               : element.type === 'select'
                                               ? SelectField
-                                              : element.type === 'phone' 
+                                              : element.type === 'phone'
                                               ? FormikPhoneNumberField
                                               : CustomField
                                           }

package/src/components/common/CheckboxField.tsx

@@ -18,6 +18,7 @@ export const CheckboxField = ({
   field,
   selectOptions,
   theme,
+  setFieldValue,
   ...rest
 }: ICheckboxField & IOtherProps) => (
   <FormGroup>

package/src/components/common/FormikPhoneNumberField.tsx

@@ -18,6 +18,7 @@ export const FormikPhoneNumberField = ({
   field,
   form: { touched, errors },
   setFieldValue,
+  selectOptions,
   ...rest
 }: INumberInField & IOtherProps) => {
   const error = _get(errors, field.name)

package/src/components/confirmationContainer/index.tsx

@@ -22,6 +22,7 @@ export interface IConfirmationPage {
   shareButtons: IShareButton[];
   onGetConfirmationDataSuccess: (res: any) => void;
   onGetConfirmationDataError: (e: AxiosError) => void;
+  orderHash?: string;
 }
 
 export const ConfirmationContainer = ({
@@ -31,6 +32,7 @@ export const ConfirmationContainer = ({
   shareButtons = [],
   onGetConfirmationDataSuccess = () => {},
   onGetConfirmationDataError = () => {},
+  orderHash,
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
   const [data, setData] = useState<any>(null)
@@ -40,28 +42,40 @@ export const ConfirmationContainer = ({
   useEffect(() => {
     (async () => {
       const dataEncoded =
-        typeof window !== 'undefined' &&
-        window.localStorage.getItem('checkoutData')
-      if (dataEncoded) {
-        const dataDecoded = JSON.parse(dataEncoded)
-        const { hash } = dataDecoded
+        (typeof window !== 'undefined' &&
+          window.localStorage.getItem('checkoutData')) ||
+        ''
 
+      const dataDecoded = dataEncoded
+        ? JSON.parse(dataEncoded)
+        : { hash: orderHash }
+      const { hash } = dataDecoded
+
+      if (hash) {
         try {
           const response = await getConfirmationData(hash)
           const data = _get(response, 'data.data.attributes')
-          data.personal_share_sales = data.personal_share_sales.map((d: any) => {
-            const salesData: IReferralPromotion = { label: `If your friends buy ${d.sales} tickets`, price: '' }
-            if(d.price === 0) {
-              salesData.subLabel = 'Your ticket becomes'
-              salesData.price = 'FREE!'
-            } else {
-              salesData.subLabel = 'Your ticket goes down to'
-              salesData.price = data.currency.symbol + d.price?.toFixed(2)
-            }
+          data.personal_share_sales = data.personal_share_sales.map(
+            (d: any) => {
+              const salesData: IReferralPromotion = {
+                label: `If your friends buy ${d.sales} tickets`,
+                price: '',
+              }
+              if (d.price === 0) {
+                salesData.subLabel = 'Your ticket becomes'
+                salesData.price = 'FREE!'
+              } else {
+                salesData.subLabel = 'Your ticket goes down to'
+                salesData.price = data.currency.symbol + d.price?.toFixed(2)
+              }
 
-            return salesData
+              return salesData
+            }
+          )
+          data.personal_share_sales.unshift({
+            label: 'Your ticket is currently',
+            price: data.currency.symbol + data.product_price?.toFixed(2),
           })
-          data.personal_share_sales.unshift({ label: 'Your ticket is currently', price: data.currency.symbol + data.product_price?.toFixed(2) })
           setData(data)
           onGetConfirmationDataSuccess(response.data)
         } catch (error) {
@@ -75,7 +89,7 @@ export const ConfirmationContainer = ({
     const newData = { ...data, personal_share_link: e.target.value }
     setData(newData)
   }
-  
+
   return (
     <div className="confirmation-page">
       {data && (
@@ -83,9 +97,11 @@ export const ConfirmationContainer = ({
           <p className="title">Your Tickets are Confirmed!</p>
           <div className="share-message-section">
             <span className="main">Your tickets have been emailed to you</span>
-            <span className="helper">Please bring them with you to the event</span>
+            <span className="helper">
+              Please bring them with you to the event
+            </span>
           </div>
-          { data.disable_referral === false && isReferralEnabled && (
+          {data.disable_referral === false && isReferralEnabled && (
             <>
               <div className="referral_text_image_section">
                 <div className="referral_text_section">
@@ -123,12 +139,17 @@ export const ConfirmationContainer = ({
                             onChange={onChangeShareLink}
                           />
                           <div
-                            className='share-by-link-copy-icon'
-                              onClick={() => navigator.clipboard.writeText(
+                            className="share-by-link-copy-icon"
+                            onClick={() =>
+                              navigator.clipboard.writeText(
                                 _get(inputRef, 'current.value')
-                              )}
+                              )
+                            }
                           >
-                            <img src="https://img.icons8.com/office/50/000000/copy.png" alt='copy' />
+                            <img
+                              src="https://img.icons8.com/office/50/000000/copy.png"
+                              alt="copy"
+                            />
                           </div>
                         </div>
                       </div>
@@ -146,27 +167,22 @@ export const ConfirmationContainer = ({
                 </div>
                 <div className="pricing-section">
                   <div className="invitation_title">How much cheaper?</div>
-                  {_map(data.personal_share_sales, (pricing, index) => {
-                    return (
-                      <div
-                        key={index}
-                        className='pricing-section_wrapper'
-                      >
-                        <div className="pricing-section_label">
-                          {pricing.label}
-                          {pricing.subLabel && (
-                            <div className="pricing-section_sublabel">
-                              {pricing.subLabel}
-                            </div>
-                          )}
-                        </div>
-                        <div className="pricing-section_price">
-                          {' '}
-                          {pricing.price}
-                        </div>
+                  {_map(data.personal_share_sales, (pricing, index) => (
+                    <div key={index} className="pricing-section_wrapper">
+                      <div className="pricing-section_label">
+                        {pricing.label}
+                        {pricing.subLabel && (
+                          <div className="pricing-section_sublabel">
+                            {pricing.subLabel}
+                          </div>
+                        )}
                       </div>
-                    )
-                  })}
+                      <div className="pricing-section_price">
+                        {' '}
+                        {pricing.price}
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
             </>

package/src/components/paymentContainer/index.tsx

@@ -1,9 +1,10 @@
 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 } from '@stripe/stripe-js'
+import { loadStripe, StripeConstructorOptions } from '@stripe/stripe-js'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
@@ -19,10 +20,33 @@ import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 
-const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
-const stripePromise = loadStripe(
-  publishableKey
-)
+const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
+
+const getStripePromise = (reviewData: any) => {
+  const stripePublishableKey = _get(
+    reviewData,
+    'payment_method.stripe_publishable_key'
+  ) || publishableKey
+  const stripeAccount = _get(
+    reviewData,
+    'payment_method.stripe_connected_account'
+  )
+
+  const options: StripeConstructorOptions = {}
+  if (stripeAccount) {
+    options.stripeAccount = stripeAccount
+  }
+
+  return loadStripe(stripePublishableKey, options)
+}
+
+function Loader() {
+  return (
+    <div className="loader-container">
+      <CircularProgress />
+    </div>
+  )
+}
 export interface IPaymentPage {
   paymentFields: IPaymentField[];
   handlePayment: any;
@@ -34,7 +58,8 @@ export interface IPaymentPage {
   onGetPaymentDataError: (value: AxiosError) => void;
   onPaymentError: (value: AxiosError) => void;
   stripeCardOptions?: StripeCardNumberElementOptions;
-  fontFamily?: string
+  disableZipSection: boolean;
+  fontFamily?: string;
 }
 
 const initialOrderValues: IOrderData = {
@@ -66,12 +91,14 @@ export const PaymentContainer = ({
   onGetPaymentDataError = () => {},
   onPaymentError = () => {},
   stripeCardOptions = {},
+  disableZipSection = false,
   fontFamily,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
   const [error, setError] = useState(null)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
+  const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
   const [conditions, setConditions] = useState<{ id: string; text: string }[]>(
     []
   )
@@ -107,6 +134,8 @@ export const PaymentContainer = ({
       } catch (e) {
         setError(_get(e, 'response.data.message'))
         onGetPaymentDataError(e.response)
+      } finally {
+        setPaymentDataIsLoading(false)
       }
     })()
   }, [checkoutData])
@@ -158,7 +187,7 @@ export const PaymentContainer = ({
   const themeMui = createTheme({
     typography: {
       allVariants: {
-        fontFamily
+        fontFamily,
       },
     },
   })
@@ -171,47 +200,59 @@ export const PaymentContainer = ({
             {error}
           </Alert>
         )}
-        <Container maxWidth="md">
-          {showFormTitle && <h1>{formTitle}</h1>}
-          <div className="order_info_text">Order Review</div>
-          <div className="order_info_section">
-            {_map(paymentFields, field => {
-              const { id, label, className = '', normalizer = _identity } = field
-              return (
-                <div key={id} className="order_info_block">
-                  <div className="order_info_title">{label}</div>
-                  <div className={`${className} order_info_text`}>
-                    {normalizer(orderData[id], orderData.currency)}
+        {paymentDataIsLoading && <Loader />}
+        {!paymentDataIsLoading && (
+          <Container maxWidth="md">
+            {showFormTitle && <h1>{formTitle}</h1>}
+            <div className="order_info_text">Order Review</div>
+            <div className="order_info_section">
+              {_map(paymentFields, field => {
+                const {
+                  id,
+                  label,
+                  className = '',
+                  normalizer = _identity,
+                } = field
+                return (
+                  <div key={id} className="order_info_block">
+                    <div className="order_info_title">{label}</div>
+                    <div className={`${className} order_info_text`}>
+                      {normalizer(orderData[id], orderData.currency)}
+                    </div>
                   </div>
-                </div>
-              )
-            })}
-          </div>
-          <div className="payment_info">
-            <div className="payment_info_label">
-              Please provide your payment information
+                )
+              })}
             </div>
-            {showErrorText && <p className="payment_info__error">{errorText}</p>}
-            <div>
-              <Elements stripe={stripePromise}>
-                <StripePayment
-                  stripe_client_secret={
-                    reviewData.payment_method.stripe_client_secret
-                  }
-                  total={orderData.total}
-                  onSubmit={handlePaymentMiddleWare}
-                  error={error}
-                  currency={orderData.currency}
-                  billing_info={reviewData.billing_info}
-                  isLoading={paymentIsLoading}
-                  handleSetLoading={value => setPaymentIsLoading(value)}
-                  conditions={conditions}
-                  stripeCardOptions={stripeCardOptions}
-                />
-              </Elements>
+            <div className="payment_info">
+              <div className="payment_info_label">
+                Please provide your payment information
+              </div>
+              {showErrorText && (
+                <p className="payment_info__error">{errorText}</p>
+              )}
+              <div>
+                <Elements stripe={getStripePromise(reviewData)}>
+                  <StripePayment
+                    stripe_client_secret={_get(
+                      reviewData,
+                      'payment_method.stripe_client_secret'
+                    )}
+                    total={orderData.total}
+                    onSubmit={handlePaymentMiddleWare}
+                    error={error}
+                    currency={orderData.currency}
+                    billing_info={reviewData.billing_info}
+                    isLoading={paymentIsLoading}
+                    handleSetLoading={value => setPaymentIsLoading(value)}
+                    conditions={conditions}
+                    stripeCardOptions={stripeCardOptions}
+                    disableZipSection={disableZipSection}
+                  />
+                </Elements>
+              </div>
             </div>
-          </div>
-        </Container>
+          </Container>
+        )}
       </div>
     </ThemeProvider>
   )