tf-checkout-react 1.3.49 → 1.3.50-beta.1

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}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.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}.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}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{background-color:#000;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.get-tickets-page{width:100%}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.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}.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}.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}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{background-color:#000;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page button{margin-top:inherit}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.confirmation-page .referral_text_section{margin:10px}.confirmation-page .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .convenient_buttons{margin-top:10px}.confirmation-page .social-media-btns{grid-gap:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .sharing-btn{background-color:#000;flex:1 1;min-width:130px}.confirmation-page .sharing-btn a{text-decoration:none}.confirmation-page .share-by-link{background:#000;color:#fff;padding:10px}.confirmation-page .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share-btn-inner{align-items:center;background-color:#000;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-flex;padding:0;text-align:left;width:100%}.confirmation-page .share-input{background-color:#fff;border:none;outline:none;padding:5px;text-align:left;width:300px}.confirmation-page .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .pricing-section_label{font-weight:600}.confirmation-page .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .pricing-section_price{font-weight:600;text-align:right}.confirmation-page .share-by-link-copy-icon{align-items:center;background-color:#32325d;border-radius:4px;color:#fff;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:10px;transition:all .15s ease}.confirmation-page .share-by-link-copy-icon:hover{background-color:#505050}.confirmation-page .share-by-link-copy-icon img{width:14px}.confirmation-page .social-media-sharing{background-color:#000;color:#fff;cursor:pointer;padding:10px;text-align:center}.confirmation-page .share-icon{border-radius:4px;display:inline-flex}@media only screen and (max-width:1050px){.confirmation-page .share_wrapper{column-gap:0;display:grid;grid-template-columns:unset;margin:15px}}@media only screen and (max-width:480px){.confirmation-page .social-media-btns{grid-template-columns:unset}.confirmation-page .share-input{width:250px}}body{margin:0;padding:0}.get-tickets-page{width:100%}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{align-items:center;background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;display:flex;font-size:1em;justify-content:center;margin:0 35px;padding:8px 15px;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.alert-info svg{margin-right:4px}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.event-detail__tier-state .ticket-not-started-message{color:#000;text-align:left;text-transform:none;width:50px}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.event-closed-message{font-family:Bebas Neue;letter-spacing:.5px}.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/verification.d.ts

@@ -0,0 +1,11 @@
+export interface GetNetverifyUrlResponseData {
+    netverifyUrl: string;
+}
+export interface VerificationStatusResponseData {
+    attributes: {
+        status: string;
+    };
+}
+export interface UpdateVerificationStatusResponseData {
+    status: string;
+}

package/dist/utils/index.d.ts

@@ -8,3 +8,4 @@ export { getDomain } from './getDomain';
 export { createMarkup } from './createMarkup';
 export { setLoggedUserData } from './auth';
 export { isBrowser } from './isBrowser';
+export { isJson } from './jsonUtils';

package/dist/utils/jsonUtils.d.ts

@@ -0,0 +1 @@
+export declare const isJson: (value: any) => boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.49",
+  "version": "1.3.50-beta.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -54,11 +54,11 @@
     "@types/lodash": "^4.14.176",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "5.4.0",
-    "eslint": "^7.26.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint": "^8.32.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.2",
@@ -74,7 +74,7 @@
     "size-limit": "^6.0.4",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.9.4"
   },
   "dependencies": {
     "@emotion/react": "^11.7.0",
@@ -98,6 +98,7 @@
     "react-countdown": "^2.3.2",
     "react-inlinesvg": "^2.3.0",
     "react-share": "^4.4.0",
+    "rollup-plugin-svg": "^2.0.0",
     "yup": "^0.32.11"
   }
 }

package/src/.d.ts

@@ -1,2 +1,3 @@
 declare module '*.css';
 declare module '*.png';
+declare module '*.svg';

package/src/api/index.ts

@@ -2,6 +2,11 @@ import { AxiosRequestConfig, AxiosResponse } from 'axios'
 import _get from 'lodash/get'
 
 import { pageOptions } from '../hooks/usePixel'
+import {
+  GetNetverifyUrlResponseData,
+  UpdateVerificationStatusResponseData,
+  VerificationStatusResponseData,
+} from '../types/verification'
 import { CONFIGS, getCookieByName, setCustomCookie } from '../utils'
 import { getQueryVariable } from '../utils/getQueryVariable'
 import { publicRequest, ttfHeaders } from '../utils/setConfigs'
@@ -419,3 +424,38 @@ export function getPixelScript(id: string | number, pageOptions: pageOptions) {
   })
   return response
 }
+
+// ID Verification
+export const getNetverifyUrl = async (): Promise<GetNetverifyUrlResponseData> => {
+  const response: AxiosResponse<
+    GetNetverifyUrlResponseData,
+    AxiosRequestConfig
+  > = await publicRequest.get('v1/authenticate/verify')
+  return response.data
+}
+
+export const checkVerificationStatus = async (): Promise<{
+  data: VerificationStatusResponseData;
+}> => {
+  const response: AxiosResponse<
+    { data: VerificationStatusResponseData },
+    AxiosRequestConfig
+  > = await publicRequest.get('v1/authenticate/get-verification-info')
+  return response.data
+}
+
+export const updateVerificationStatus = async (): Promise<{
+  data: UpdateVerificationStatusResponseData;
+}> => {
+  const response: AxiosResponse<
+    { data: UpdateVerificationStatusResponseData },
+    AxiosRequestConfig
+  > = await publicRequest.patch('v1/authenticate/verify', {
+    data: {
+      verification: {
+        verificationStatus: 'PENDING',
+      },
+    },
+  })
+  return response.data
+}

package/src/components/addonsContainer/index.tsx

@@ -19,6 +19,7 @@ import {
   createMarkup,
   getQueryVariable,
 } from '../../utils'
+import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import TimerWidget from '../timerWidget'
 import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
 import AddonComponent from './AddonComponent'
@@ -42,6 +43,7 @@ export interface IAddonContainterProps {
   onConfirmSelectionSuccess?: (res: any) => void;
   onConfirmSelectionError?: (error: any) => void;
   onCountdownFinish?: () => void;
+  onPendingVerification?: () => void;
 }
 
 export interface ObjectLiteral {
@@ -59,6 +61,7 @@ export const AddonsContainter = ({
   onConfirmSelectionSuccess = _identity,
   onConfirmSelectionError = _identity,
   onCountdownFinish = _identity,
+  onPendingVerification = _identity,
 }: IAddonContainterProps) => {
   const eventId = getQueryVariable('event_id')
   const [addons, setAddons] = useState<any>([])
@@ -72,6 +75,7 @@ export const AddonsContainter = ({
   ] = useState<any>({})
   const [loading, setLoading] = useState(true)
   const [cartExpirationTime, setCartExpirationTime] = useState(0)
+  const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
 
   useEffect(() => {
     const getAddonsPageInfo = async () => {
@@ -209,8 +213,10 @@ export const AddonsContainter = ({
       const phoneIsRequired = pageConfigsData.phone_required ?? false
       const hasAddOn = pageConfigsData.has_add_on ?? false
       const freeTicket = pageConfigsData.free_ticket ?? false
-      const collectOptionalWalletAddress = pageConfigsData.collect_optional_wallet_address ?? false
-      const collectMandatoryWalletAddress = pageConfigsData.collect_mandatory_wallet_address ?? false
+      const collectOptionalWalletAddress =
+        pageConfigsData.collect_optional_wallet_address ?? false
+      const collectMandatoryWalletAddress =
+        pageConfigsData.collect_mandatory_wallet_address ?? false
 
       if (skipBillingPage && enableBillingInfoAutoCreate) {
         const ticketsQuantity = window.localStorage.getItem('quantity')
@@ -252,8 +258,12 @@ export const AddonsContainter = ({
             collect_mandatory_wallet_address: collectMandatoryWalletAddress,
           })
         } catch (error) {
-          onPostCheckoutError(error)
-          onConfirmSelectionError(error)
+          if (error.response?.data?.data?.hasUnverifiedOrder) {
+            setPendingVerificationMessage(error.response?.data?.message)
+          } else {
+            onPostCheckoutError(error)
+            onConfirmSelectionError(error)
+          }
         }
       } else {
         if (isWindowDefined) {
@@ -435,6 +445,12 @@ export const AddonsContainter = ({
           </Formik>
         </div>
       </div>
+      <VerificationPendingModal
+        message={pendingVerificationMessage}
+        onClose={() => {
+          onPendingVerification()
+        }}
+      />
     </>
   )
 }

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

@@ -46,6 +46,7 @@ import { getQueryVariable } from '../../utils/getQueryVariable'
 import { combineValidators, requiredValidator } from '../../validators'
 import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
+import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import { LoginModal } from '../loginModal'
 import { SignupModal } from '../signupModal'
 import TimerWidget from '../timerWidget'
@@ -110,6 +111,8 @@ export interface IBillingInfoPage {
   brandOptIn?: boolean;
   showPoweredByImage?: boolean;
   isCountryCodeEditable?: boolean;
+
+  onPendingVerification?: () => void;
 }
 
 const LogicRunner: FC<{
@@ -249,6 +252,7 @@ export const BillingInfoContainer = React.memo(
     brandOptIn = false,
     showPoweredByImage = false,
     isCountryCodeEditable = true,
+    onPendingVerification = _identity,
   }: IBillingInfoPage) => {
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
@@ -326,6 +330,11 @@ export const BillingInfoContainer = React.memo(
     const hideWalletAddressField =
       !collectOptionalWalletAddress && !collectMandatoryWalletAddress
 
+    const [
+      pendingVerificationMessage,
+      setPendingVerificationMessage,
+    ] = useState()
+
     // Get prevProps
     const prevData = useRef(data)
 
@@ -455,6 +464,9 @@ export const BillingInfoContainer = React.memo(
             setLoading(false)
           } catch (e) {
             onSubmitError(e)
+            if (e.response?.data?.data?.hasUnverifiedOrder) {
+              setPendingVerificationMessage(e.response?.data?.message)
+            }
           }
         } else {
           setLoading(false)
@@ -625,7 +637,10 @@ export const BillingInfoContainer = React.memo(
                   })
                 } catch (e) {
                   setLoading(false)
-                  if (axios.isAxiosError(e)) {
+
+                  if (e.response?.data?.data?.hasUnverifiedOrder) {
+                    setPendingVerificationMessage(e.response?.data?.message)
+                  } else if (axios.isAxiosError(e)) {
                     const error = e?.response?.data?.message
                     if (_includes(error, 'You must be aged')) {
                       formikHelpers.setFieldError('holderAge', error)
@@ -684,7 +699,9 @@ export const BillingInfoContainer = React.memo(
                 )
               } catch (e) {
                 setLoading(false)
-                if (axios.isAxiosError(e)) {
+                if (e.response?.data?.data?.hasUnverifiedOrder) {
+                  setPendingVerificationMessage(e.response?.data?.message)
+                } else if (axios.isAxiosError(e)) {
                   if (
                     e.response?.status === 401 ||
                     e.response?.data?.error === 'invalid_token'
@@ -1058,6 +1075,12 @@ export const BillingInfoContainer = React.memo(
             showPoweredByImage={showPoweredByImage}
           />
         )}
+        <VerificationPendingModal
+          message={pendingVerificationMessage}
+          onClose={() => {
+            onPendingVerification()
+          }}
+        />
       </ThemeProvider>
     )
   }

package/src/components/common/ModalComponent/index.tsx

@@ -0,0 +1,68 @@
+import { Modal as MuiModal } from '@mui/material'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import _map from 'lodash/map'
+import React, { FC } from 'react'
+
+export interface Action {
+  id: string;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  variant?: "text" | "contained" | "outlined";
+}
+
+interface Props {
+  onClose?: () => void;
+  actions: Action[];
+  modalClassName?: string;
+}
+
+const style: React.CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto',
+}
+
+const Modal: FC<Props> = ({
+  onClose,
+  actions = [],
+  children,
+  modalClassName = '',
+}) => (
+  <MuiModal
+    open={true}
+    onClose={onClose}
+    aria-labelledby="modal-modal-title"
+    aria-describedby="modal-modal-description"
+    className={`confirm-modal ${modalClassName}`}
+  >
+    <Box style={style}>
+      <div className="modal-body">{children}</div>
+      <div className="footer">
+        {_map(actions, (action: Action) => (
+          <Button
+            key={action.id}
+            onClick={action.onClick}
+            disabled={action.disabled || action.loading}
+            variant={action.variant || "text"}
+          >
+            {action.loading ? <CircularProgress size="22px" /> : action.label}
+          </Button>
+        ))}
+      </div>
+    </Box>
+  </MuiModal>
+)
+
+export default Modal

package/src/components/common/dist/PhoneNumberField.js

@@ -0,0 +1,96 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.PhoneNumberField = void 0;
+var TextField_1 = require("@mui/material/TextField");
+var debounce_1 = require("lodash/debounce");
+var get_1 = require("lodash/get");
+var react_1 = require("react");
+var api_1 = require("../../api");
+exports.PhoneNumberField = function (_a) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? 'text' : _b, field = _a.field, _c = _a.form, errors = _c.errors, setFieldError = _c.setFieldError, setStatus = _c.setStatus;
+    var error = get_1["default"](errors, field.name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var debounceCb = react_1.useCallback(debounce_1["default"](function (cb) { return void cb(); }, 1000), []);
+    react_1.useEffect(function () {
+        var _a;
+        if (field.value) {
+            setStatus((_a = {}, _a[field.name] = true, _a));
+        }
+        debounceCb(function () { return __awaiter(void 0, void 0, void 0, function () {
+            var error_1, message;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 3, 4, 5]);
+                        if (!field.value) return [3 /*break*/, 2];
+                        return [4 /*yield*/, api_1.validatePhoneNumber(field.value)];
+                    case 1:
+                        _b.sent();
+                        _b.label = 2;
+                    case 2:
+                        setFieldError(field.name, '');
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_1 = _b.sent();
+                        message = get_1["default"](error_1, 'response.data.message', 'Invalid phone number');
+                        setFieldError(field.name, message);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setStatus((_a = {}, _a[field.name] = false, _a));
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); });
+        // eslint-disable-next-line
+    }, [field.value]);
+    return (react_1["default"].createElement(TextField_1["default"], __assign({}, field, { id: field.name, label: label, type: type, fullWidth: true, error: !!error, helperText: error, value: field.value || '', inputProps: { pattern: '[+0-9]/d+' } })));
+};

package/src/components/idVerificationContainer/VerificationPendingModal.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+
+import Modal, { Action } from '../common/ModalComponent'
+
+interface IDVerificationProps {
+  message?: string | null;
+  displayModal?: boolean;
+  actions?: Action[];
+  onClose?: () => void;
+}
+
+export const VerificationPendingModal = (props: IDVerificationProps) => {
+  const { message, displayModal, actions, onClose } = props
+  const [showModal, setShowModal] = useState(false)
+
+  useEffect(() => {
+    if (displayModal === undefined) {
+      setShowModal(Boolean(message))
+    }
+  }, [message, displayModal])
+
+  return showModal || displayModal ? (
+    <div>
+      <Modal
+        modalClassName="id-verification-modal"
+        actions={
+          actions || [
+            {
+              id: 'okay',
+              label: 'OK',
+              variant: 'contained',
+              onClick: () => {
+                setShowModal(false)
+
+                if (onClose) {
+                  onClose()
+                }
+              },
+            },
+          ]
+        }
+      >
+        <div>{message}</div>
+      </Modal>
+    </div>
+  ) : null
+}

package/src/components/idVerificationContainer/constants.ts

@@ -0,0 +1,17 @@
+/* eslint-disable max-len */
+export const VERIFICATION_STATUSES = {
+  PENDING: 'PENDING',
+  APPROVED: 'APPROVED_VERIFIED',
+  FAILED: 'FAILED',
+}
+
+export const TRANSACTION_STATUSES = {
+  ERROR: 'ERROR',
+  SUCCESS: 'SUCCESS',
+}
+
+export const VERIFICATION_MESSAGES = {
+  PENDING: 'Your ID verification is currently being processed. We will notify you as soon as it is completed. Thank you for your patience.',
+  APPROVED: 'Your ID verification is approved!',
+  FAILED: 'Unfortunately your ID verification has failed. Please try again.',
+}