tf-checkout-react 1.6.6-beta.25 → 1.6.6-beta.27

package/dist/tf-checkout-styles.css

@@ -1 +1 @@
-.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}button{margin-top:10px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover,.login-register-button{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.timer{background-color:#000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-position:15px;background-repeat:no-repeat;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .close-icon{cursor:pointer;display:flex;position:absolute;right:10px;top:10px}.timer .countdown{font-weight:700;margin-top:10px}.forgot-password-modal .forgot-password-container{margin:0 auto;max-width:800px}.forgot-password-modal .title{background-color:#fff;font-family:Inter;font-size:18px;font-weight:700}.forgot-password-modal .forgot-password-container__singleField{margin-top:15px}.forgot-password-modal .forgot-password-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:10px;outline:none;padding:10px;text-transform:uppercase;width:100%}.forgot-password-modal .forgot-password-action-button button:hover:enabled{background-color:#505050;border-color:#505050}.forgot-password-modal .login{margin-top:10px;text-align:center}.forgot-password-modal .login span{cursor:pointer}.forgot-password-modal .login span:hover{text-decoration:underline}.forgot-password-modal button[disabled]{cursor:unset;opacity:.7}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.signup-modal .signup-container{margin:0 auto;max-width:800px}.signup-modal .title{background-color:#fff;font-family:Inter;font-size:18px;font-weight:700}.signup-modal .signup-container .is-half{width:49%}.signup-modal .signup-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.signup-modal .signup-container__singleField{margin-top:15px}.signup-modal button{margin-top:10px}.signup-modal .signup-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:10px;outline:none;padding:10px;text-transform:uppercase;width:100%}.signup-modal .signup-action-button button:hover:enabled{background-color:#505050;border-color:#505050}.signup-modal .login{margin-top:10px;text-align:center}.signup-modal .login span{cursor:pointer}.signup-modal .login span:hover{text-decoration:underline}.signup-modal button[disabled]{cursor:unset;opacity:.7}.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}.payment_page .payment_plan .payment_plan_block .payment_plan_text{padding-bottom:10px}.payment_page .payment_plan .payment_plan_highlight{font-weight:700}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{background-color:#000;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message{margin-bottom:15px;text-align:center}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px;margin-bottom:10px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1400}.order-details .layout-title{font-size:24px;font-weight:400}.order-details .sub-title{font-size:18px;font-weight:400;margin:10px 0}.order-details .order-summary-box{margin-top:30px}.order-details .total-row td,.order-details th{color:#fff;font-weight:700}.order-details .tickets-box{margin-top:30px}.order-details .ticket-add-on-table{background-color:#fcf8e3}.order-details .action-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:14px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:max-content}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}.order-details .total-referrer{padding:0 0 20px}.resale-modal .field-box{display:flex;margin-bottom:10px}.resale-modal .field-box .icon{align-items:center;display:flex;height:56px;justify-content:center;min-width:44px}.resale-modal .field-box .empty-box{min-width:44px}.resale-modal .resale-action-button button{background-color:#212529;color:#fff;cursor:pointer;width:100%}.resale-modal .resale-action-button button[disabled]{opacity:.7}.resale-modal .resale-action-button button:hover{background-color:#505050;border-color:#505050;width:100%}.reset-password{margin:0 auto;max-width:300px;padding:14px}.reset-password .title{font-size:20px;font-weight:700}.reset-password .field-item{margin-top:14px}.reset-password .action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:14px;outline:none;padding:10px;text-transform:uppercase;width:100%}.reset-password .action-button button:hover:enabled{background-color:#505050;border-color:#505050}.reset-password .action-button button[disabled]{cursor:unset;opacity:.7}
+.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}button{margin-top:10px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover,.login-register-button{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.timer{background-color:#000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-position:15px;background-repeat:no-repeat;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .close-icon{cursor:pointer;display:flex;position:absolute;right:10px;top:10px}.timer .countdown{font-weight:700;margin-top:10px}.forgot-password-modal .forgot-password-container{margin:0 auto;max-width:800px}.forgot-password-modal .title{background-color:#fff;font-family:Inter;font-size:18px;font-weight:700}.forgot-password-modal .forgot-password-container__singleField{margin-top:15px}.forgot-password-modal .forgot-password-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:10px;outline:none;padding:10px;text-transform:uppercase;width:100%}.forgot-password-modal .forgot-password-action-button button:hover:enabled{background-color:#505050;border-color:#505050}.forgot-password-modal .login{margin-top:10px;text-align:center}.forgot-password-modal .login span{cursor:pointer}.forgot-password-modal .login span:hover{text-decoration:underline}.forgot-password-modal button[disabled]{cursor:unset;opacity:.7}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.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}.payment_page .payment_plan .payment_plan_block .payment_plan_text{padding-bottom:10px}.payment_page .payment_plan .payment_plan_highlight{font-weight:700}.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%}.signup-modal .signup-container{margin:0 auto;max-width:800px}.signup-modal .title{background-color:#fff;font-family:Inter;font-size:18px;font-weight:700}.signup-modal .signup-container .is-half{width:49%}.signup-modal .signup-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.signup-modal .signup-container__singleField{margin-top:15px}.signup-modal button{margin-top:10px}.signup-modal .signup-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:10px;outline:none;padding:10px;text-transform:uppercase;width:100%}.signup-modal .signup-action-button button:hover:enabled{background-color:#505050;border-color:#505050}.signup-modal .login{margin-top:10px;text-align:center}.signup-modal .login span{cursor:pointer}.signup-modal .login span:hover{text-decoration:underline}.signup-modal button[disabled]{cursor:unset;opacity:.7}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message{margin-bottom:15px;text-align:center}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px;margin-bottom:10px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1400}.order-details .layout-title{font-size:24px;font-weight:400}.order-details .sub-title{font-size:18px;font-weight:400;margin:10px 0}.order-details .order-summary-box{margin-top:30px}.order-details .total-row td,.order-details th{color:#fff;font-weight:700}.order-details .tickets-box{margin-top:30px}.order-details .ticket-add-on-table{background-color:#fcf8e3}.order-details .action-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:14px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:max-content}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}.order-details .total-referrer{padding:0 0 20px}.resale-modal .field-box{display:flex;margin-bottom:10px}.resale-modal .field-box .icon{align-items:center;display:flex;height:56px;justify-content:center;min-width:44px}.resale-modal .field-box .empty-box{min-width:44px}.resale-modal .resale-action-button button{background-color:#212529;color:#fff;cursor:pointer;width:100%}.resale-modal .resale-action-button button[disabled]{opacity:.7}.resale-modal .resale-action-button button:hover{background-color:#505050;border-color:#505050;width:100%}.reset-password{margin:0 auto;max-width:300px;padding:14px}.reset-password .title{font-size:20px;font-weight:700}.reset-password .field-item{margin-top:14px}.reset-password .action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin-top:14px;outline:none;padding:10px;text-transform:uppercase;width:100%}.reset-password .action-button button:hover:enabled{background-color:#505050;border-color:#505050}.reset-password .action-button button[disabled]{cursor:unset;opacity:.7}

package/dist/types/order-data.d.ts

@@ -2,7 +2,7 @@ import { IAddOn } from './add_on';
 export interface IOrderData {
     id: string;
     product_name: string;
-    ticketType: string;
+    ticketType: string | Array<any>;
     quantity: string | number;
     price: string | number;
     total: string | number;

package/dist/utils/auth.d.ts

@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios';
 export declare const setLoggedUserData: (data: IProfileData) => {
     id: string | number;
     first_name: string;
@@ -11,3 +12,10 @@ export declare const setLoggedUserData: (data: IProfileData) => {
     state: string | number;
     zip: string | number;
 };
+interface LogoutUserParams {
+    onLogoutSuccess?: () => void;
+    onLogoutError?: (error: AxiosError) => void;
+    setIsLogged?: (isLogged: boolean) => void;
+}
+export declare const logoutUser: ({ onLogoutSuccess, onLogoutError, setIsLogged, }: LogoutUserParams) => Promise<void>;
+export {};

package/dist/utils/index.d.ts

@@ -9,7 +9,7 @@ export { createMarkup } from './createMarkup';
 export { replaceVarInString } from './replaceVarInString';
 export { isBrowser } from './isBrowser';
 export { getFormInitialValues } from './form';
-export { setLoggedUserData } from './auth';
+export { setLoggedUserData, logoutUser } from './auth';
 export { getDataWithCustomFields, getFieldsKeys } from './customFields';
 export { createElementFromHTML } from './htmlNodeFromString';
 export { isJson } from './jsonUtils';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6-beta.25",
+  "version": "1.6.6-beta.27",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -90,7 +90,7 @@
     "@mui/x-date-pickers": "^5.0.1",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.21.1",
-    "axios": "^0.24.0",
+    "axios": "^1.9.0",
     "clsx": "^1.1.1",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
@@ -111,4 +111,4 @@
     "tf-seat-map-view": "9.4.7-beta.33",
     "yup": "^0.32.11"
   }
-}
+}

package/src/api/auth.ts

@@ -27,7 +27,8 @@ export const register = async (data: FormData): Promise<IProfileResponse> => {
 }
 
 export const getProfileData = async (): Promise<IProfileResponse> => {
-  const response: AxiosResponse<IProfileResponse, AxiosRequestConfig> = await publicRequest.get('/customer/profile/')
+  const response: AxiosResponse<IProfileResponse, AxiosRequestConfig> =
+    await publicRequest.get('/customer/profile/')
   return response.data
 }
 

package/src/api/checkout.ts

@@ -14,10 +14,14 @@ export const postOnCheckout = async (
   }
 
   const response: AxiosResponse<ICheckoutResponse, AxiosRequestConfig> =
-    await publicRequest.post(
-      `v1/on-checkout`,
-      { data }
-    )
+    await publicRequest.post(`v1/on-checkout`, { data })
+
+  return response.data
+}
+
+export const updateCheckout = async (data: any): Promise<ICheckoutResponse> => {
+  const response: AxiosResponse<ICheckoutResponse, AxiosRequestConfig> =
+    await publicRequest.post(`v1/checkout`, { data })
 
   return response.data
 }

package/src/api/interceptors.ts

@@ -1,44 +1,28 @@
-import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
 import _get from 'lodash/get'
 
 import { CONFIGS, isBrowser } from '../utils'
 import { getCookieByName, setCustomCookie } from '../utils/cookies'
 import { publicRequest } from './publicRequest'
 
-publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
+publicRequest.interceptors.request.use((config: InternalAxiosRequestConfig) => {
   const guestToken = isBrowser ? window.localStorage.getItem('auth_guest_token') : null
   if (guestToken) {
-    const updatedHeaders = {
-      ...config.headers,
-      'Authorization-Guest': guestToken,
-    }
-    config.headers = updatedHeaders
+    config.headers['Authorization-Guest'] = guestToken
   }
 
   const xtfCookie = getCookieByName('X-TF-ECOMMERCE')
   if (xtfCookie) {
-    const updatedHeaders = {
-      ...config.headers,
-      'X-TF-ECOMMERCE': xtfCookie,
-    }
-    config.headers = updatedHeaders
+    config.headers['X-TF-ECOMMERCE'] = xtfCookie
   }
 
   const additionalCookiesHeaderValue = isBrowser ? document.cookie ?? '' : ''
   if (additionalCookiesHeaderValue !== '') {
-    const updatedHeaders = {
-      ...config.headers,
-      'Additional-Cookies': additionalCookiesHeaderValue,
-    }
-    config.headers = updatedHeaders
+    config.headers['Additional-Cookies'] = additionalCookiesHeaderValue
   }
 
   if (CONFIGS.X_SOURCE_ORIGIN) {
-    const updatedHeaders = {
-      ...config.headers,
-      'X-Source-Origin': CONFIGS.X_SOURCE_ORIGIN,
-    }
-    config.headers = updatedHeaders
+    config.headers['X-Source-Origin'] = CONFIGS.X_SOURCE_ORIGIN
   }
 
   if (CONFIGS.BASE_URL) {

package/src/api/publicRequest.ts

@@ -1,5 +1,7 @@
 import axios, { AxiosInstance } from 'axios'
 
+import { getCookieByName } from '../utils'
+
 const headers: { [key: string]: string } = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json',
@@ -25,6 +27,14 @@ export const publicRequest: IPublicRequest = axios.create({
   headers,
 }) as IPublicRequest
 
+publicRequest.interceptors.request.use(config => {
+  if (getCookieByName('X-TF-ECOMMERCE')) {
+    config.headers['X-TF-ECOMMERCE'] = getCookieByName('X-TF-ECOMMERCE')
+  }
+
+  return config
+})
+
 publicRequest.setBaseUrl = (baseUrl: string) =>
   (publicRequest.defaults.baseURL = baseUrl + '/api')
 

package/src/components/addonsContainer/AddonComponent.tsx

@@ -61,7 +61,7 @@ const AddonComponent = ({
                 />
               </div>
               {!_isEmpty(addOnDataWithCustomFields?.fields) && (
-                <div className="ticket-holders-fields">
+                <div className="add-on-fields">
                   <h2>{addOnDataWithCustomFields.label}</h2>
                   {_map(addOnDataWithCustomFields.fields, group => {
                     const { id, groupClassname, groupItems } = group

package/src/components/addonsContainer/SimpleAddonsContainer.tsx

@@ -0,0 +1,384 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { CircularProgress } from '@mui/material'
+import { Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Tooltip } from 'react-tooltip'
+
+import { getAddons, getCart } from '../../api'
+import { FEES_STYLES } from '../../constants'
+import { currencyNormalizerCreator } from '../../normalizers'
+import { CONFIGS, createMarkup } from '../../utils'
+import InfoIcon from '../ticketsContainer/InfoIcon'
+import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
+import AddonComponent from './AddonComponent'
+import { getNormalizedPrice } from './normalizers'
+import {
+  generateSelectOptions,
+  getAddonSelectOptions,
+  getSortedAddons,
+  getTicketRelatedAddons,
+} from './utils'
+
+export interface ISimpleAddonContainerProps {
+  classNamePrefix?: string;
+  onGetAddonsPageInfoSuccess?: (res: any) => void;
+  onGetAddonsPageInfoError?: (error: any) => void;
+  descriptionTrigger?: 'click' | 'hover' | 'always';
+  addOnDataWithCustomFields: any;
+  configs: any;
+  eventId: string;
+  onAddOnSelect?: (id: string, value: string, addon: any) => void;
+  handleConfirm?: (values: any) => void;
+}
+
+export interface ObjectLiteral {
+  [key: string]: any;
+}
+
+export const SimpleAddonsContainer = ({
+  classNamePrefix = 'add_on',
+  onGetAddonsPageInfoSuccess = _identity,
+  onGetAddonsPageInfoError = _identity,
+  descriptionTrigger = 'click',
+  addOnDataWithCustomFields,
+  configs,
+  eventId,
+  onAddOnSelect = _identity,
+  handleConfirm = _identity,
+}: ISimpleAddonContainerProps) => {
+  const [addons, setAddons] = useState<any>([])
+  const [addonsOptions, setAddonsOptions] = useState<any>({})
+  const [groupsWithSelectedVariants, setGroupsWithSelectedVariants] = useState<any>({})
+  const [groupsWithInitialVariantsValues, setGroupsWithInitialVariantsValues] =
+    useState<any>({})
+  const [loading, setLoading] = useState(true)
+
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+
+  const handleDescriptionToggle = (ticketId: string) => {
+    setVisibleDescription(current => (current === ticketId ? null : ticketId))
+  }
+
+  useEffect(() => {
+    const getAddonsPageInfo = async () => {
+      try {
+        if (eventId) {
+          setLoading(true)
+
+          // Get choosed ticket info (id, count) from Cart request for addons options calculations
+          const cart = await getCart()
+          const { id: choosedTicketID, quantity } = cartAdapter(cart)
+          const choosedTicketCount = Number(quantity)
+
+          // Get and collect addons data
+          const addonsData = await getAddons(eventId)
+          const adaptedAddons = addonsWithGroupsAdapter(addonsData)
+          const ticketRelatedAddons = getTicketRelatedAddons(
+            adaptedAddons,
+            choosedTicketID
+          )
+          const sortedTicketAddons = getSortedAddons(ticketRelatedAddons)
+
+          setAddons(sortedTicketAddons)
+
+          // Collect addons and addon group options
+          const {
+            addonsWithOptions,
+            groupsWithSelectedVariantsInfo,
+            groupsWithVariants,
+          } = getAddonSelectOptions(adaptedAddons, choosedTicketCount)
+
+          setAddonsOptions(addonsWithOptions)
+          setGroupsWithSelectedVariants(groupsWithSelectedVariantsInfo)
+          setGroupsWithInitialVariantsValues(groupsWithVariants)
+
+          // Success callback props
+          onGetAddonsPageInfoSuccess(addonsData)
+        }
+      } catch (e) {
+        // Callback error props
+        onGetAddonsPageInfoError(e)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    getAddonsPageInfo()
+  }, [eventId, onGetAddonsPageInfoError, onGetAddonsPageInfoSuccess])
+
+  const recreateGroupVariantsSelectOptions = (groupId: any, changedGroupd: any) => {
+    const { choosedVariants, limit, selectedCount } = changedGroupd
+    const remainingGroupStock = limit - selectedCount
+    const recreatedVariantsOptions: ObjectLiteral = {}
+
+    // Regenerate variants allowed stock counts
+    for (const variant in choosedVariants) {
+      const variantId = variant
+      const variantCurrSelectedValue = choosedVariants[variant]
+      let allowedOptionCount
+
+      // Formula for regenerating
+      if (
+        remainingGroupStock >=
+        groupsWithInitialVariantsValues[groupId][variantId] - variantCurrSelectedValue
+      ) {
+        allowedOptionCount = groupsWithInitialVariantsValues[groupId][variantId]
+      } else {
+        allowedOptionCount = remainingGroupStock + variantCurrSelectedValue
+      }
+
+      recreatedVariantsOptions[variantId] = generateSelectOptions(0, allowedOptionCount)
+    }
+
+    setAddonsOptions((prevState: any) =>
+      Object.assign({}, prevState, recreatedVariantsOptions)
+    )
+  }
+
+  const onFieldChange = (id: any, value: any, addon: any) => {
+    // If changeableGroup exsists it means that group with limitation variant was changed
+    const changeableGroup = groupsWithSelectedVariants[addon.id]
+
+    if (changeableGroup) {
+      const currGroupId = addon.id
+      const currSelectedVariantId = id
+      const currSelectedVariantCount = Number(value)
+      const currSelectedVariantPrevCount =
+        groupsWithSelectedVariants[currGroupId].choosedVariants[currSelectedVariantId]
+
+      const currSelectedGroupCount =
+        changeableGroup.selectedCount +
+        (currSelectedVariantCount - currSelectedVariantPrevCount)
+
+      // Update Group info
+      const updatedGroupsWithSelectedVariants = {
+        ...groupsWithSelectedVariants,
+        [currGroupId]: {
+          ...groupsWithSelectedVariants[currGroupId],
+          selectedCount: currSelectedGroupCount,
+          choosedVariants: {
+            ...groupsWithSelectedVariants[currGroupId].choosedVariants,
+            [currSelectedVariantId]: currSelectedVariantCount,
+          },
+        },
+      }
+      setGroupsWithSelectedVariants(updatedGroupsWithSelectedVariants)
+
+      // Recreate Select Options for Addon Group Variants
+      recreateGroupVariantsSelectOptions(
+        currGroupId,
+        updatedGroupsWithSelectedVariants[currGroupId]
+      )
+    }
+  }
+
+  const initialValues = useMemo(() => {
+    const addOnsData: any = {}
+    if (addons?.length > 0 && addOnDataWithCustomFields?.fields?.length > 0) {
+      _map(addons, addon => {
+        _map(addOnDataWithCustomFields.fields, field => {
+          const { id, groupItems } = field
+          _map(groupItems, item => {
+            addOnsData[`${addon.id}-${id}-${item.name}`] = item.value
+          })
+        })
+      })
+    }
+
+    return addOnsData
+  }, [addons, addOnDataWithCustomFields])
+
+  if (loading) {
+    return (
+      <div className={`${classNamePrefix}_loader`}>
+        <CircularProgress size={50} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${classNamePrefix}_container`}>
+      <div className={`${classNamePrefix}_block`}>
+        <div className={`${classNamePrefix}_line_block`}>
+          {addons?.length > 0 && (
+            <div className={`${classNamePrefix}_title`}>UPGRADES & ADD-ONS</div>
+          )}
+        </div>
+        {addons?.length > 0 && (
+          <div className={`${classNamePrefix}_subtitle`}>
+            PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
+          </div>
+        )}
+        <Formik
+          initialValues={initialValues}
+          onSubmit={values => {
+            handleConfirm(values)
+          }}
+          validate={() => {
+            // Real-time validation can be handled here if needed
+          }}
+        >
+          {({ values, errors, setFieldTouched }) => (
+            <Form autoComplete="off" className="form_holder">
+              <>
+                {addons.map((addon: any) => {
+                  const price = addon.feeIncluded ? addon.price : addon.cost
+                  const isAddonFree = Number(addon?.price) === 0
+
+                  const addOnNormalizedCost = isAddonFree
+                    ? 'FREE'
+                    : currencyNormalizerCreator(
+                        getNormalizedPrice(addon?.cost ?? 0),
+                        addon.currency
+                      )
+
+                  const addonNormalizedPrice = isAddonFree
+                    ? 'FREE'
+                    : currencyNormalizerCreator(
+                        getNormalizedPrice(
+                          CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH
+                            ? addon?.price ?? price
+                            : price
+                        ),
+                        addon.currency
+                      )
+
+                  return (
+                    <div key={addon.id} className={`${classNamePrefix}_product_block`}>
+                      <div className={`${classNamePrefix}_product_images`}>
+                        {addon.imageUrl && (
+                          <div className={`${classNamePrefix}_product_image_block`}>
+                            <img src={addon.imageUrl} alt="No Data" />
+                          </div>
+                        )}
+                      </div>
+                      <div className={`${classNamePrefix}_product_info_block`}>
+                        <div className={`${classNamePrefix}_product_title`}>
+                          {addon.name}
+                          {addon.description && descriptionTrigger !== 'always' && (
+                            <>
+                              <span
+                                aria-hidden
+                                className="info-icon"
+                                onClick={
+                                  descriptionTrigger === 'click'
+                                    ? () => handleDescriptionToggle(addon.id)
+                                    : undefined
+                                }
+                                onMouseEnter={
+                                  descriptionTrigger === 'hover'
+                                    ? () => setVisibleDescription(addon.id)
+                                    : undefined
+                                }
+                                onMouseLeave={
+                                  descriptionTrigger === 'hover'
+                                    ? () => setVisibleDescription(null)
+                                    : undefined
+                                }
+                                style={{
+                                  marginLeft: 8,
+                                  cursor: 'pointer',
+                                  display: 'flex',
+                                }}
+                                data-tooltip-id={`tooltip-${addon.id}`}
+                                data-tooltip-content="View Add-On info"
+                              >
+                                <InfoIcon size={14} />
+                              </span>
+                              <Tooltip id={`tooltip-${addon.id}`} place="top">
+                                {addon.description || 'No description available'}
+                              </Tooltip>
+                            </>
+                          )}
+                        </div>
+                        <div className={`${classNamePrefix}_product_price`}>
+                          {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL
+                            ? addonNormalizedPrice
+                            : addOnNormalizedCost}
+                          {!isAddonFree &&
+                            CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (
+                              <span className={`${classNamePrefix}_product_fee`}>
+                                {addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                              </span>
+                            )}
+                          {!isAddonFree &&
+                            CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
+                              <>
+                                <span className={`${classNamePrefix}_product_fee`}>
+                                  {`(${addonNormalizedPrice} with fees)`}
+                                </span>
+                              </>
+                            )}
+                        </div>
+                      </div>
+                      {(visibleDescription === addon.id ||
+                        descriptionTrigger === 'always') && (
+                        <div
+                          className={`${classNamePrefix}_product_desc`}
+                          dangerouslySetInnerHTML={createMarkup(addon.description)}
+                        />
+                      )}
+                      <div className={`${classNamePrefix}_product_select_container`}>
+                        {addon.variants ? (
+                          addon.variants.map((variant: any) => (
+                            // Group Variants
+                            <AddonComponent
+                              key={variant.id}
+                              data={variant}
+                              selectOptions={addonsOptions[variant.id]}
+                              classNamePrefix={classNamePrefix}
+                              handleAddonChange={(id, value) => {
+                                onAddOnSelect(id, value, addon)
+                                onFieldChange(id, value, addon)
+                              }}
+                              addOnDataWithCustomFields={addOnDataWithCustomFields}
+                              configs={configs}
+                              values={values}
+                              errors={errors}
+                            />
+                          ))
+                        ) : (
+                          // Simple Addon
+                          <AddonComponent
+                            key={addon.id}
+                            data={addon}
+                            selectOptions={addonsOptions[addon.id]}
+                            classNamePrefix={classNamePrefix}
+                            handleAddonChange={(id, value) => {
+                              onAddOnSelect(id, value, addon)
+                              onFieldChange(id, value, addon)
+
+                              _map(addOnDataWithCustomFields.fields, fieldGroup => {
+                                const { id, groupItems } = fieldGroup
+                                _map(groupItems, field => {
+                                  setFieldTouched(
+                                    `${addon.id}-${id}-${field.name}`,
+                                    true,
+                                    true
+                                  )
+                                })
+                              })
+                            }}
+                            addOnDataWithCustomFields={addOnDataWithCustomFields}
+                            configs={configs}
+                            values={values}
+                            errors={errors}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  )
+}
+
+export default SimpleAddonsContainer