tf-checkout-react 1.7.1 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/components/billing-info-container/utils.d.ts +1 -0
  2. package/dist/components/common/PhoneNumberField.d.ts +1 -1
  3. package/dist/components/preRegistration/PreRegistrationComplete.d.ts +2 -0
  4. package/dist/tf-checkout-react.cjs.development.js +618 -567
  5. package/dist/tf-checkout-react.cjs.development.js.map +1 -1
  6. package/dist/tf-checkout-react.cjs.production.min.js +1 -1
  7. package/dist/tf-checkout-react.cjs.production.min.js.map +1 -1
  8. package/dist/tf-checkout-react.esm.js +618 -567
  9. package/dist/tf-checkout-react.esm.js.map +1 -1
  10. package/dist/tf-checkout-styles.css +1 -1
  11. package/dist/utils/createCheckoutDataBodyWithDefaultHolder.d.ts +1 -0
  12. package/package.json +1 -1
  13. package/src/components/billing-info-container/index.tsx +101 -81
  14. package/src/components/billing-info-container/utils.tsx +5 -1
  15. package/src/components/common/CustomField.tsx +1 -1
  16. package/src/components/common/PhoneNumberField.tsx +4 -2
  17. package/src/components/preRegistration/PreRegistrationComplete.tsx +12 -2
  18. package/src/components/preRegistration/index.tsx +144 -110
  19. package/src/components/preRegistration/style.css +3 -0
  20. package/src/components/timerWidget/style.css +2 -1
  21. package/src/utils/createCheckoutDataBodyWithDefaultHolder.ts +3 -1
package/dist/tf-checkout-styles.css CHANGED
@@ -1 +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}.login-logo-tff{height:60px}.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_method_selector{display:flex;gap:12px;justify-content:center;margin-bottom:20px}.payment_page .payment_method_option{background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .2s ease}.payment_page .payment_method_option:hover{border-color:#999}.payment_page .payment_method_option.selected{background-color:#e3f2fd;border-color:#1976d2;color:#1976d2}.payment_page .payment_plan .payment_plan_block .payment_plan_text{padding-bottom:10px}.payment_page .payment_plan .payment_plan_highlight{font-weight:700}.mobile-order-summary{display:none}@media (max-width:767px){.mobile-order-summary{background-color:#f8f8f8;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:block;margin-bottom:15px}.mobile-order-summary-content{align-items:flex-start;cursor:pointer;display:flex;padding:15px}.mobile-order-info-container:after{content:"⌃";display:inline-block;float:right;font-size:15px;font-weight:900;left:6px;position:relative;top:-2px;transform:rotate(180deg);transition:transform .25s,top .25s}.mobile-order-info-container.open:after{top:2px;transform:rotate(0deg)}.mobile-order-info-container.order-info-container-left{text-align:left}.mobile-order-info-container.order-info-container-right{text-align:right}.mobile-order-icon{color:#1976d2;margin-right:15px;padding-top:2px}.mobile-order-info{flex:1}.mobile-order-text{color:#666;font-size:14px;margin-bottom:4px}.mobile-order-total{color:#333;font-size:18px;font-weight:700;margin-bottom:8px}.mobile-order-timer{align-items:center;border-top:1px dashed #ddd;display:flex;margin-top:8px;padding-top:8px}.mobile-timer-icon{color:#f44336;margin-right:8px}.mobile-timer-text{color:#666;font-size:13px}.mobile-timer-countdown{color:#f44336;font-weight:700}.mobile-order-expand{color:#666;padding-top:2px}.order_info_section.collapsed{display:none!important}.order_info_section.expanded{display:grid!important;margin-top:10px}}.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}}.twitter-btn{background-color:#000!important}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}
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:fixed;right:15px;width:300px;z-index:9}.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}.login-logo-tff{height:60px}.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_method_selector{display:flex;gap:12px;justify-content:center;margin-bottom:20px}.payment_page .payment_method_option{background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .2s ease}.payment_page .payment_method_option:hover{border-color:#999}.payment_page .payment_method_option.selected{background-color:#e3f2fd;border-color:#1976d2;color:#1976d2}.payment_page .payment_plan .payment_plan_block .payment_plan_text{padding-bottom:10px}.payment_page .payment_plan .payment_plan_highlight{font-weight:700}.mobile-order-summary{display:none}@media (max-width:767px){.mobile-order-summary{background-color:#f8f8f8;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:block;margin-bottom:15px}.mobile-order-summary-content{align-items:flex-start;cursor:pointer;display:flex;padding:15px}.mobile-order-info-container:after{content:"⌃";display:inline-block;float:right;font-size:15px;font-weight:900;left:6px;position:relative;top:-2px;transform:rotate(180deg);transition:transform .25s,top .25s}.mobile-order-info-container.open:after{top:2px;transform:rotate(0deg)}.mobile-order-info-container.order-info-container-left{text-align:left}.mobile-order-info-container.order-info-container-right{text-align:right}.mobile-order-icon{color:#1976d2;margin-right:15px;padding-top:2px}.mobile-order-info{flex:1}.mobile-order-text{color:#666;font-size:14px;margin-bottom:4px}.mobile-order-total{color:#333;font-size:18px;font-weight:700;margin-bottom:8px}.mobile-order-timer{align-items:center;border-top:1px dashed #ddd;display:flex;margin-top:8px;padding-top:8px}.mobile-timer-icon{color:#f44336;margin-right:8px}.mobile-timer-text{color:#666;font-size:13px}.mobile-timer-countdown{color:#f44336;font-weight:700}.mobile-order-expand{color:#666;padding-top:2px}.order_info_section.collapsed{display:none!important}.order_info_section.expanded{display:grid!important;margin-top:10px}}.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}}.twitter-btn{background-color:#000!important}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}.preregistration_confirmation_header{margin-bottom:2rem}.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/utils/createCheckoutDataBodyWithDefaultHolder.d.ts CHANGED
@@ -17,6 +17,7 @@ interface IUserCredentialsValues {
17
17
  emailLogged?: string;
18
18
  firstNameLogged?: string;
19
19
  lastNameLogged?: string;
20
+ phoneLogged?: string;
20
21
  }
21
22
  export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: Record<string, string | undefined>, includeDob?: boolean, userCredentials?: IUserCredentialsValues) => ICheckoutBody;
22
23
  export {};
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.7.1",
2
+ "version": "1.7.2",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/components/billing-info-container/index.tsx CHANGED
@@ -29,7 +29,6 @@ import {
29
29
  getProfileData,
30
30
  getStates,
31
31
  postOnCheckout,
32
- register,
33
32
  setCustomHeader,
34
33
  } from '../../api'
35
34
  import { updateCheckout } from '../../api/checkout'
@@ -58,7 +57,6 @@ import { usePaymentRedirect, useStripePayment } from './hooks'
58
57
  import {
59
58
  assingUniqueIds,
60
59
  createCheckoutDataBody,
61
- createRegisterFormData,
62
60
  filterBillingInfoFields,
63
61
  getFieldComponent,
64
62
  getFieldLabel,
@@ -157,6 +155,12 @@ const LogicRunner: FC<{
157
155
  brandOptIn,
158
156
  }) => {
159
157
  const prevCountry = useRef(values.country)
158
+ const prevBuyerData = useRef({
159
+ firstName: '',
160
+ lastName: '',
161
+ email: '',
162
+ phone: '',
163
+ })
160
164
  useEffect(() => {
161
165
  const fetchStates = async () => {
162
166
  try {
@@ -182,6 +186,42 @@ const LogicRunner: FC<{
182
186
  }
183
187
  shouldFetchCountries && fetchStates()
184
188
  }, [values.country, setStates, setFieldValue])
189
+
190
+ // Auto-fill first holder with buyer data
191
+ useEffect(() => {
192
+ const buyerFirstName = values.firstName || ''
193
+ const buyerLastName = values.lastName || ''
194
+ const buyerEmail = values.email || ''
195
+ const buyerPhone = values.phone || ''
196
+
197
+ // Check if any buyer data has changed
198
+ const firstNameChanged = prevBuyerData.current.firstName !== buyerFirstName
199
+ const lastNameChanged = prevBuyerData.current.lastName !== buyerLastName
200
+ const emailChanged = prevBuyerData.current.email !== buyerEmail
201
+ const phoneChanged = prevBuyerData.current.phone !== buyerPhone
202
+
203
+ // Update holder fields individually based on what changed
204
+ if (firstNameChanged) {
205
+ setFieldValue('holderFirstName-0', buyerFirstName, false)
206
+ prevBuyerData.current.firstName = buyerFirstName
207
+ }
208
+
209
+ if (lastNameChanged) {
210
+ setFieldValue('holderLastName-0', buyerLastName, false)
211
+ prevBuyerData.current.lastName = buyerLastName
212
+ }
213
+
214
+ if (emailChanged) {
215
+ setFieldValue('holderEmail-0', buyerEmail, false)
216
+ prevBuyerData.current.email = buyerEmail
217
+ }
218
+
219
+ if (phoneChanged) {
220
+ setFieldValue('holderPhone-0', buyerPhone, false)
221
+ prevBuyerData.current.phone = buyerPhone
222
+ }
223
+ }, [values.firstName, values.lastName, values.email, values.phone, setFieldValue])
224
+
185
225
  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
186
226
  useEffect(() => {
187
227
  // set user data from local storage
@@ -207,6 +247,7 @@ const LogicRunner: FC<{
207
247
  'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
208
248
  'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
209
249
  'holderEmail-0': parsedData?.email || '',
250
+ 'holderPhone-0': parsedData?.phone || '',
210
251
  }
211
252
 
212
253
  const extraDataJSON = window.localStorage.getItem('extraData')
@@ -285,7 +326,7 @@ const BillingInfoContainer = React.memo(
285
326
  const [extraData, setExtraData] = useState(null)
286
327
  const [isConfigLoading, setIsConfigLoading] = useState(true)
287
328
  const [configs, setConfigs] = useState<null | AttributesConfig>(null)
288
- const [isNewUser, setIsNewUser] = useState(false)
329
+ const isNewUser = false
289
330
  const themeMui = createTheme(themeOptions)
290
331
  const elementsRef = useRef<any>(null)
291
332
  const stripeRef = useRef<Stripe | null>(null)
@@ -332,7 +373,7 @@ const BillingInfoContainer = React.memo(
332
373
  const [countries, setCountries] = useState<any>([])
333
374
  const [states, setStates] = useState<any>([])
334
375
  const [showModalLogin, setShowModalLogin] = useState(false)
335
- const [alreadyHasUser, setAlreadyHasUser] = useState(false)
376
+ const alreadyHasUser= false
336
377
  const [userExpired, setUserExpired] = useState(false)
337
378
  const [showModalSignup, setShowModalSignup] = useState(false)
338
379
  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
@@ -362,6 +403,7 @@ const BillingInfoContainer = React.memo(
362
403
  _get(userData, 'first_name', '') || _get(userValues, 'first_name', '')
363
404
  const lastNameLogged =
364
405
  _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
406
+ const phoneLogged = _get(userData, 'phone', '') || _get(userValues, 'phone', '')
365
407
  const showDOB = configs?.age_required
366
408
  const showTicketHolders = configs?.names_required
367
409
  const eventId = configs?.event_id
@@ -608,7 +650,7 @@ const BillingInfoContainer = React.memo(
608
650
  ticketsQuantity.length,
609
651
  values,
610
652
  true,
611
- { emailLogged, firstNameLogged, lastNameLogged }
653
+ { emailLogged, firstNameLogged, lastNameLogged, phoneLogged }
612
654
  )
613
655
  } else {
614
656
  checkoutBody = createCheckoutDataBody(
@@ -620,6 +662,7 @@ const BillingInfoContainer = React.memo(
620
662
  firstNameLogged || profileData.first_name || profileData.firstName,
621
663
  lastNameLogged:
622
664
  lastNameLogged || profileData.last_name || profileData.lastName,
665
+ phoneLogged: phoneLogged || profileData.phone,
623
666
  },
624
667
  showDOB
625
668
  )
@@ -731,6 +774,7 @@ const BillingInfoContainer = React.memo(
731
774
  emailLogged,
732
775
  firstNameLogged,
733
776
  lastNameLogged,
777
+ phoneLogged,
734
778
  customFieldsTicketHolderKeys,
735
779
  ]
736
780
  )
@@ -933,6 +977,26 @@ const BillingInfoContainer = React.memo(
933
977
  enableReinitialize={false}
934
978
  onSubmit={async (values, formikHelpers) => {
935
979
  try {
980
+ // Validation: if phone is required for ticket holders, mark errors and stop submit
981
+ const flagRequirePhoneLocal = Boolean(configs?.phone_required)
982
+ if (flagRequirePhoneLocal) {
983
+ const holdersCount = ticketsQuantity.length
984
+ let hasHolderPhoneError = false
985
+ for (let i = 0; i < holdersCount; i++) {
986
+ const fieldName = `holderPhone-${i}`
987
+ const value = _get(values, fieldName, '')
988
+ if (!value) {
989
+ hasHolderPhoneError = true
990
+ formikHelpers.setFieldTouched(fieldName, true, false)
991
+ formikHelpers.setFieldError(fieldName, 'This field is required')
992
+ }
993
+ }
994
+ if (hasHolderPhoneError) {
995
+ // Do not proceed with submit; Formik will show errors and our PhoneNumberField now shows errors when submitCount > 0
996
+ return
997
+ }
998
+ }
999
+
936
1000
  if ((!elementsRef.current || !stripeRef.current) && !orderIsFree) {
937
1001
  setError('Fill in the payment details')
938
1002
  return
@@ -961,81 +1025,32 @@ const BillingInfoContainer = React.memo(
961
1025
  )
962
1026
  }
963
1027
 
964
- if (!isLoggedIn) {
965
- const checkoutBodyForRegistration = createCheckoutDataBody(
966
- ticketsQuantity.length,
967
- values,
968
- { emailLogged, firstNameLogged, lastNameLogged },
969
- showDOB
970
- )
971
- const bodyFormData = createRegisterFormData(
972
- values,
973
- checkoutBodyForRegistration,
974
- flagFreeTicket
975
- )
1028
+ // Guest checkout: no need to register, just get profile if logged in
1029
+ let userDataObj = userData
1030
+ if (isLoggedIn) {
976
1031
  try {
977
- setLoading(true)
978
- const resRegister = await register(bodyFormData)
979
- const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
980
- const refreshToken = _get(
981
- resRegister,
982
- 'data.attributes.refresh_token'
983
- )
984
- const userProfile = _get(resRegister, 'data.attributes.user_profile')
985
-
986
- setIsNewUser(true)
987
- onRegisterSuccess({
988
- xtfCookie,
989
- refreshToken,
990
- userProfile,
991
- })
1032
+ const profileData = await getProfileData()
1033
+ const profileSpecifiedData = _get(profileData, 'data')
1034
+ userDataObj = setLoggedUserData(profileSpecifiedData)
992
1035
  } catch (e) {
993
- setLoading(false)
994
- const hasUnverifiedOrder = _get(
995
- e,
996
- 'response.data.data.hasUnverifiedOrder'
997
- )
998
- const message = _get(e, 'response.data.message', {}) as
999
- | { password?: string | null, email?: string | null }
1000
- | string
1001
-
1002
- if (hasUnverifiedOrder && typeof message === 'string') {
1003
- setPendingVerificationMessage(message)
1004
- } else if (axios.isAxiosError(e)) {
1005
- if (
1006
- _includes(message, 'You must be aged') &&
1007
- typeof message === 'string'
1008
- ) {
1009
- formikHelpers.setFieldError('holderAge', message)
1010
- }
1011
- if (typeof message !== 'string' && message?.password) {
1012
- formikHelpers.setFieldError('password', message.password)
1013
- formikHelpers.setFieldError('confirmPassword', message.password)
1014
- }
1015
- if (typeof message !== 'string' && message?.email && !onLogin) {
1016
- // False will stand for outside controll
1017
- setAlreadyHasUser(true)
1018
- setShowModalLogin(true)
1019
- }
1020
-
1021
- if (
1022
- _includes(error, 'The cart is expired') &&
1023
- !hideErrorsAlertSection
1024
- ) {
1025
- setError(error)
1026
- }
1027
-
1028
- onRegisterError(e, values.email)
1036
+ // If profile fetch fails, use values from form
1037
+ userDataObj = {
1038
+ email: values.email,
1039
+ first_name: values.firstName,
1040
+ last_name: values.lastName,
1041
+ phone: values.phone,
1029
1042
  }
1030
- return
1043
+ }
1044
+ } else {
1045
+ // For guest checkout, use form values
1046
+ userDataObj = {
1047
+ email: values.email,
1048
+ first_name: values.firstName,
1049
+ last_name: values.lastName,
1050
+ phone: values.phone,
1031
1051
  }
1032
1052
  }
1033
1053
 
1034
- const profileData = await getProfileData()
1035
- const profileSpecifiedData = _get(profileData, 'data')
1036
- const profileDataObj = setLoggedUserData(profileSpecifiedData)
1037
- const userDataObj = isLoggedIn ? userData : profileDataObj
1038
-
1039
1054
  if (isBrowser) {
1040
1055
  window.localStorage.setItem('user_data', JSON.stringify(userDataObj))
1041
1056
  }
@@ -1315,12 +1330,15 @@ const BillingInfoContainer = React.memo(
1315
1330
  return (
1316
1331
  <React.Fragment key={group.uniqueId}>
1317
1332
  <div className={groupClassname}>
1318
- {_map(filteredGroupItems, element =>
1319
- [
1320
- 'password',
1321
- 'confirmPassword',
1322
- 'password-info',
1323
- ].includes(element.name) && isLoggedIn ? null : (
1333
+ {_map(filteredGroupItems, element => {
1334
+ // Hide password fields in single-page checkout or when user is logged in
1335
+ const shouldHidePasswordFields =
1336
+ ['password', 'confirmPassword', 'password-info'].includes(
1337
+ element.name
1338
+ ) &&
1339
+ (isLoggedIn || isSinglePageCheckout)
1340
+
1341
+ return shouldHidePasswordFields ? null : (
1324
1342
  <React.Fragment key={element.uniqueId}>
1325
1343
  <div
1326
1344
  className={`${element.className} ${
@@ -1352,6 +1370,7 @@ const BillingInfoContainer = React.memo(
1352
1370
  ? setPhoneValidationIsLoading
1353
1371
  : undefined
1354
1372
  }
1373
+ fill={element.type === 'phone' ? true : undefined}
1355
1374
  label={getFieldLabel(element, configs)}
1356
1375
  validate={getValidateFunctions(
1357
1376
  element,
@@ -1392,7 +1411,7 @@ const BillingInfoContainer = React.memo(
1392
1411
  </div>
1393
1412
  </React.Fragment>
1394
1413
  )
1395
- )}
1414
+ })}
1396
1415
  </div>
1397
1416
  </React.Fragment>
1398
1417
  )
@@ -1433,6 +1452,7 @@ const BillingInfoContainer = React.memo(
1433
1452
  setPhoneValidationIsLoading={
1434
1453
  setPhoneValidationIsLoading
1435
1454
  }
1455
+ fill={element.type === 'phone' ? true : undefined}
1436
1456
  defaultCountry={
1437
1457
  defaultCountry || element.defaultCountry
1438
1458
  }
package/src/components/billing-info-container/utils.tsx CHANGED
@@ -26,6 +26,7 @@ export interface ILoggedInValues {
26
26
  emailLogged?: string;
27
27
  firstNameLogged?: string;
28
28
  lastNameLogged?: string;
29
+ phoneLogged?: string;
29
30
  }
30
31
 
31
32
  export interface IValues {
@@ -75,6 +76,7 @@ export const getInitialValues = (
75
76
  initialValues['holderLastName-0'] =
76
77
  propsInitialValues.lastName || userValues.lastName || ''
77
78
  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || ''
79
+ initialValues['holderPhone-0'] = propsInitialValues.phone || userValues.phone || ''
78
80
 
79
81
  return { ...initialValues, ...ticketHoldersCustomFieldsInitValues }
80
82
  }
@@ -154,7 +156,9 @@ export const createCheckoutDataBody = (
154
156
  last_name: !index
155
157
  ? item[`holderLastName-${index}`] || logedInValues.lastNameLogged || ''
156
158
  : item[`holderLastName-${index}`] || '',
157
- phone: item[`holderPhone-${index}`] || '',
159
+ phone: !index
160
+ ? item[`holderPhone-${index}`] || logedInValues.phoneLogged || ''
161
+ : item[`holderPhone-${index}`] || '',
158
162
  email: !index
159
163
  ? item[`holderEmail-${index}`] || logedInValues.emailLogged || ''
160
164
  : item[`holderEmail-${index}`] || '',
package/src/components/common/CustomField.tsx CHANGED
@@ -128,7 +128,7 @@ export const CustomField = ({
128
128
  }}
129
129
  InputLabelProps={{
130
130
  sx: customTheme?.input,
131
- shrink: isShrinked || Boolean(field.value) || isAutoFilled,
131
+ shrink: isSelectField || isShrinked || Boolean(field.value) || isAutoFilled,
132
132
  }}
133
133
  InputProps={finalInputProps}
134
134
  inputProps={{ ...inputProps, ...pInputProps }}
package/src/components/common/PhoneNumberField.tsx CHANGED
@@ -32,6 +32,7 @@ export const PhoneNumberField = ({
32
32
  setFieldValue,
33
33
  setFieldTouched,
34
34
  setErrors,
35
+ submitCount,
35
36
  },
36
37
  disableDropdown = true,
37
38
  defaultCountry = 'us',
@@ -41,6 +42,7 @@ export const PhoneNumberField = ({
41
42
  }: IPhoneNumberField) => {
42
43
  const error = _get(errors, field.name)
43
44
  const isTouched = Boolean(_get(touched, field.name))
45
+ const isSubmitAttempted = Boolean(submitCount && submitCount > 0)
44
46
 
45
47
  // eslint-disable-next-line react-hooks/exhaustive-deps
46
48
  const debounceCb = useCallback(
@@ -103,8 +105,8 @@ export const PhoneNumberField = ({
103
105
  defaultCountry={defaultCountry}
104
106
  disableDropdown={disableDropdown}
105
107
  label={label}
106
- error={!!error && (isTouched || fill)}
107
- helperText={(isTouched || fill) && error}
108
+ error={!!error && (isTouched || fill || isSubmitAttempted)}
109
+ helperText={(isTouched || fill || isSubmitAttempted) && error}
108
110
  fullWidth
109
111
  autoFormat={false}
110
112
  disableAreaCodes={true}
package/src/components/preRegistration/PreRegistrationComplete.tsx CHANGED
@@ -6,6 +6,7 @@ import _get from 'lodash/get'
6
6
  import _identity from 'lodash/identity'
7
7
  import _isEmpaty from 'lodash/isEmpty'
8
8
  import React, { FC, useEffect, useState } from 'react'
9
+ import "./style.css"
9
10
 
10
11
  import {
11
12
  getPreRegistrationInfluencers,
@@ -25,6 +26,7 @@ const isWindowDefined = typeof window !== 'undefined'
25
26
  export const PreRegistrationComplete: FC<
26
27
  IPreRegistrationCompleteProps & {
27
28
  onGetConfirmationDataError?: (error: AxiosError) => void;
29
+ skipInitialValidation?: boolean;
28
30
  themeOptions?: ThemeOptions & {
29
31
  input?: CSSProperties;
30
32
  checkbox?: CSSProperties;
@@ -42,6 +44,7 @@ export const PreRegistrationComplete: FC<
42
44
  onLoginSuccess = _identity,
43
45
  logo,
44
46
  themeOptions,
47
+ skipInitialValidation = false,
45
48
  }) => {
46
49
  const themeMui = createTheme(themeOptions)
47
50
 
@@ -65,6 +68,12 @@ export const PreRegistrationComplete: FC<
65
68
  useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
66
69
  useEffect(() => {
67
70
  const fetchConfirmationData = async () => {
71
+ // Skip validation if this is a freshly completed pre-registration
72
+ if (skipInitialValidation) {
73
+ onGetConfirmationDataSuccess()
74
+ return
75
+ }
76
+
68
77
  try {
69
78
  if (hash && isLoggedIn) {
70
79
  const shareOptionsData = await getPreRegistrationShareOptions({
@@ -98,6 +107,7 @@ export const PreRegistrationComplete: FC<
98
107
  onGetConfirmationDataError,
99
108
  onGetConfirmationDataSuccess,
100
109
  isLoggedIn,
110
+ skipInitialValidation,
101
111
  ])
102
112
 
103
113
  const onClose = () => {
@@ -121,9 +131,9 @@ export const PreRegistrationComplete: FC<
121
131
  {isLoggedIn && _isEmpaty(error) ? (
122
132
  <div className={`${classNamePrefix}_pre_registration_complete_container`}>
123
133
  <CopyMessageModal showCopyModal={showCopyModal} onClose={onClose} />
124
- <p className={`${classNamePrefix}_pre_registration_complete_header`}>
134
+ <h2 className={`${classNamePrefix}_pre_registration_complete_header preregistration_confirmation_header`}>
125
135
  {pageHeader}
126
- </p>
136
+ </h2>
127
137
  <div className={`${classNamePrefix}_pre_registration_complete_message`}>
128
138
  {pageMessage}
129
139
  </div>