tf-checkout-react 1.0.96 → 1.0.98

package/dist/tf-checkout-styles.css

@@ -1 +1 @@
-.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{border:none;font-size:18px;margin-top:5px;outline:none;width:100%}.timer,.zip_element input{background-color:#000;color:#fff}.timer{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;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .countdown{font-weight:700;margin-top:10px}.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}.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}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.my-ticket{padding:30px}.my-ticket-table{margin-top:30px}.my-ticket .loading{background-color:rgba(0,0,0,.4);height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.my-ticket .event-info,.my-ticket .loading{align-items:center;display:flex}.my-ticket thead th{font-weight:700}.my-ticket .event-info img{margin-right:10px;width:50px}.my-ticket .order-details-button{background-color:#32325d;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:10px 14px;transition:all .15s ease}.my-ticket .order-details-button:hover{background-color:#505050}.order-details{margin:0 auto;max-width:940px}.order-details .loading{align-items:center;background-color:rgba(0,0,0,.4);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%}.order-details .layout-title{font-size:24px;font-weight:400}.order-details .sub-title{font-size:18px;font-weight:400;margin:10px 0}.order-details .order-summary-box{margin-top:30px}.order-details .total-row td,.order-details th{color:#fff;font-weight:700}.order-details .tickets-box{margin-top:30px}.order-details .ticket-add-on-table{background-color:#fcf8e3}.order-details .download-button{background-color:#212529;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:block;font-family:Bebas Neue;font-size:16px;font-weight:400;line-height:normal;margin-bottom:20px;margin-top:20px;min-height:auto;outline:none;overflow:hidden;padding:12px 0;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:100%}.order-details .download-button:hover{background-color:#505050}.order-details .personal-link{padding:20px 0}
+.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.forgot-password{text-align:center}.forgot-password span{cursor:pointer}.forgot-password span:hover{text-decoration:underline}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{border:none;font-size:18px;margin-top:5px;outline:none;width:100%}.timer,.zip_element input{background-color:#000;color:#fff}.timer{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;margin:0 0 6px;max-width:300px;overflow:hidden;padding:15px 15px 15px 50px;pointer-events:auto;position:absolute;right:15px;width:300px}.timer .countdown{font-weight:700;margin-top:10px}.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}.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}.countdown p{margin:0}.countdown .title{font-weight:700}.countdown .message{font-weight:700;margin-top:20px}.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}.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%}.confirm-modal .footer{border-top:1px solid #c0bfbf;display:flex;gap:10px;justify-content:flex-end}.confirm-modal .footer button,.confirm-modal .footer button:hover{font-size:12px;min-height:unset;padding:12px 8px;text-transform:unset;width:max-content}.confirm-modal .footer button:hover{background:#505050}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.96",
+  "version": "1.0.98",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,6 +83,7 @@
     "react-bootstrap": "^2.0.2",
     "react-countdown": "^2.3.2",
     "react-inlinesvg": "^2.3.0",
-    "react-share": "^4.4.0"
+    "react-share": "^4.4.0",
+    "yup": "^0.32.11"
   }
 }

package/src/api/index.ts

@@ -176,16 +176,16 @@ export const postOnCheckout = (data: any, accessToken: string) => {
 
 export const authorize = (data: FormData) =>
   publicRequest.post(
-    `/v1/oauth/authorize-rn?client_id=${CONFIGS.CLIENT_ID ||
+    `v1/oauth/authorize-rn?client_id=${CONFIGS.CLIENT_ID ||
       'e9d8f8922797b4621e562255afe90dbf'}`,
     data
   )
 
 export const register = (data: FormData) =>
-  publicRequest.post('/v1/oauth/register-rn', data)
+  publicRequest.post('v1/oauth/register-rn', data)
 
 export const getAccessToken = (data: FormData) =>
-  publicRequest.post('/v1/oauth/access_token', data)
+  publicRequest.post('v1/oauth/access_token', data)
 
 export const getPaymentData = (hash: string) => {
   const response = publicRequest
@@ -240,26 +240,39 @@ export const getProfileData = (accessToken: any) =>
 export const getCountries = () => publicRequest.get('/countries/')
 
 export const getConfirmationData = (orderHash: string) =>
-  publicRequest.get(`/v1/order/${orderHash}/payment/complete`)
+  publicRequest.get(`v1/order/${orderHash}/payment/complete`)
 
 export const getStates = (countryId: string) =>
   publicRequest.get(`/countries/${countryId}/states/`)
 
 export const getOrders = (page: number, limit: number, eventSlug: string) =>
   publicRequest.get(
-    `/v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${eventSlug}&filter[brand]=${CONFIGS.BRAND_SLUG}`
+    `v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${eventSlug}&filter[brand]=${CONFIGS.BRAND_SLUG}`
   )
 
 export const getOrderDetails = (orderId: string) =>
-  publicRequest.get(`/v1/account/order/${orderId}`)
+  publicRequest.get(`v1/account/order/${orderId}`)
 
 export const addToWaitingList = (id: number, data: any) =>
-  publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
+  publicRequest.post(`v1/event/${id}/add_to_waiting_list`, data)
 
 export const getConditions = (eventId: string) =>
   publicRequest.get(`v1/event/${eventId}/conditions`)
 
+// resale
+export const resaleTicket = (data: any, hash: string) => {
+  return publicRequest.post(`v1/ticket/${hash}/sell`, data)
+}
+
+export const removeFromResale = (hash: string) => {
+  return publicRequest.delete(`v1/ticket/${hash}/sell`)
+}
+
 export const postReferralVisits = (eventId: string, referralId: string) =>
-  publicRequest.post(`/v1/event/${eventId}/referrer/`, {
+  publicRequest.post(`v1/event/${eventId}/referrer/`, {
     referrer: `${referralId}`,
   })
+
+export const checkTicketStatus = (hash: string) => {
+  return publicRequest.post(`v1/ticket/${hash}/status/`)
+}

package/src/assets/images/email.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>

package/src/assets/images/user.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>

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

@@ -40,15 +40,12 @@ import {
   setLoggedUserData,
 } from './utils'
 import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
-import { CustomField } from '../common/CustomField'
 import axios from 'axios'
-import { CheckboxField } from '../common/CheckboxField'
+import { CustomField, CheckboxField, SelectField, FormikPhoneNumberField } from '../common/index'
 import { Alert, CircularProgress, ThemeOptions } from '@mui/material'
 import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
-import { SelectField } from '../common/SelectField'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
-import { FormikPhoneNumberField } from '../common/FormikPhoneNumberField'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
 import Backdrop from '@mui/material/Backdrop'

package/src/components/common/Loader.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CircularProgress from '@mui/material/CircularProgress'
+
+export function Loader() {
+  return (
+    <div className="loader-container">
+      <CircularProgress />
+    </div>
+  )
+}

package/src/components/common/RadioField.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Radio from '@mui/material/Radio';
+import { FieldInputProps } from 'formik'
+import { useTheme } from '@mui/styles'
+
+export interface IRadioField {
+  label: string | number | JSX.Element;
+  field?: FieldInputProps<any>;
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+export const RadioField = ({
+  label,
+  field,
+  theme,
+  ...rest
+}: IRadioField & IOtherProps) => {
+  const customTheme: any = useTheme()
+  return (
+    <FormGroup>
+      <FormControlLabel
+        control={<Radio {...field} {...rest} />}
+        label={label}
+        componentsProps={{
+          typography: customTheme?.checkbox
+        }}
+      />
+    </FormGroup>
+  )
+}

package/src/components/common/index.tsx

@@ -0,0 +1,5 @@
+export { CheckboxField } from './CheckboxField'
+export { CustomField } from './CustomField'
+export { FormikPhoneNumberField } from './FormikPhoneNumberField'
+export { Loader } from './Loader'
+export { SelectField } from './SelectField'

package/src/components/confirmModal/index.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react'
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button';
+import './style.css'
+
+interface Props {
+  message: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+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 ConfirmModal: FC<Props> = ({
+  message = '',
+  onClose = () => {},
+  onConfirm = () => {},
+}) => {
+  return (
+    <Modal
+      open={true}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className='confirm-modal'
+    >
+      <Box style={style}>
+        <p>{message}</p>
+        <div className='footer'>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button onClick={onConfirm}>OK</Button>
+        </div>
+      </Box>
+    </Modal>
+  )
+}
+
+export default ConfirmModal

package/src/components/confirmModal/style.css

@@ -0,0 +1,21 @@
+.confirm-modal .footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  border-top: 1px solid rgb(192, 191, 191);
+}
+.confirm-modal .footer button {
+  width: max-content;
+  padding: 12px 8px;
+  font-size: 12px;
+  min-height: unset;
+  text-transform: unset;
+}
+.confirm-modal .footer button:hover {
+  width: max-content;
+  padding: 12px 8px;
+  font-size: 12px;
+  background: #505050;
+  min-height: unset;
+  text-transform: unset;
+}

package/src/components/index.ts

@@ -4,3 +4,4 @@ export { PaymentContainer } from './paymentContainer'
 export { TicketsContainer } from './ticketsContainer'
 export { MyTicketsContainer } from './myTicketsContainer'
 export { OrderDetailsContainer } from './orderDetailsContainer'
+export { TicketResaleContainer } from './ticketResale'

package/src/components/orderDetailsContainer/index.tsx

@@ -12,7 +12,10 @@ import CircularProgress from '@mui/material/CircularProgress'
 import _get from 'lodash/get'
 import _has from 'lodash/has'
 import { getOrderDetails } from '../../api'
-import TicketsTable from './ticketsTable'
+import TicketsTable, { ITicketTypes } from './ticketsTable'
+import { TicketResaleModal, InitialValuesTypes } from '../ticketResaleModal'
+import ConfirmModal from '../confirmModal'
+import { resaleTicket, removeFromResale } from '../../api'
 
 interface TicketTypes {
   currency: string;
@@ -40,6 +43,9 @@ export const OrderDetailsContainer = ({
 }: OrderDetailsTypes) => {
   const [data, setData] = useState<any>({})
   const [loading, setLoading] = useState(true)
+  const [showResaleModal, setShowResaleModal] = useState(false)
+  const [showRemoveResaleModal, setShowRemoveResaleModal] = useState(false)
+  const [activeTicket, setActiveTicket] = useState<any>(null)
 
   useEffect(() => {
     (async () => {
@@ -65,6 +71,77 @@ export const OrderDetailsContainer = ({
     })()
   }, [])
 
+  const handleSellTicket = (ticket: ITicketTypes) => {
+    setActiveTicket(ticket)
+    setShowResaleModal(true)
+  }
+
+  const handleOnClose = () => {
+    setShowResaleModal(false)
+    setActiveTicket(null)
+  }
+
+  const handleOnSubmit = async (values: InitialValuesTypes) => {
+    try {
+      setLoading(true)
+      const { to, first_name, last_name, email, confirm_email, confirm } = values
+      const formData = new FormData();
+      formData.append('to', to)
+      formData.append('first_name', first_name)
+      formData.append('last_name', last_name)
+      formData.append('email', email)
+      formData.append('confirm_email', confirm_email)
+      formData.append('confirm', String(confirm))
+
+      await resaleTicket(formData, activeTicket.hash)
+      const updatedData = { ...data }
+      updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
+        if(ticket.hash === activeTicket.hash) {
+          ticket.is_sellable = false
+          ticket.is_on_sale = true
+        }
+      })
+
+      setData(updatedData)
+    } catch (error) {
+      // ...
+    } finally {
+      setShowResaleModal(false)
+      setLoading(false)
+    }
+  }
+
+  const handleRemoveFromResale = (ticket: ITicketTypes) => {
+    setShowRemoveResaleModal(true)
+    setActiveTicket(ticket)
+  }
+
+  const onCloseRemoveResale = () => {
+    setShowRemoveResaleModal(false)
+    setActiveTicket(null)
+  }
+
+  const onConfirmRemoveResale = async () => {
+    try {
+      setLoading(true)
+      await removeFromResale(activeTicket.hash)
+      const updatedData = { ...data }
+      updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
+        if(ticket.hash === activeTicket.hash) {
+          ticket.is_sellable = true
+          ticket.is_on_sale = false
+        }
+      })
+
+      setData(updatedData)
+    } catch (error) {
+      // ...
+    } finally {
+      setShowRemoveResaleModal(false)
+      setLoading(false)
+    }
+  }
+
   return (
     <div className="order-details">
       {loading ? (
@@ -97,7 +174,7 @@ export const OrderDetailsContainer = ({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {data?.items.ticket_types?.map(
+                  {data?.items?.ticket_types?.map(
                     (ticket: TicketTypes, index: number) => (
                       <TableRow key={index}>
                         <TableCell>
@@ -110,7 +187,7 @@ export const OrderDetailsContainer = ({
                       </TableRow>
                     )
                   )}
-                  {data?.items.add_ons?.map(
+                  {data?.items?.add_ons?.map(
                     (ticket: TicketTypes, index: number) => (
                       <TableRow key={index}>
                         <TableCell>
@@ -133,7 +210,11 @@ export const OrderDetailsContainer = ({
               </Table>
             </TableContainer>
           </div>
-          <TicketsTable tickets={data.tickets} />
+          <TicketsTable
+            tickets={data.tickets}
+            handleSellTicket={handleSellTicket}
+            handleRemoveFromResale={handleRemoveFromResale}
+          />
           <div className="return-button-container">
             <button
               type="button"
@@ -149,6 +230,20 @@ export const OrderDetailsContainer = ({
           </div>
         </>
       )}
+      {showResaleModal && (
+        <TicketResaleModal
+          ticket={activeTicket}
+          onClose={handleOnClose}
+          onSubmit={handleOnSubmit}
+        />
+      )}
+      {showRemoveResaleModal && (
+        <ConfirmModal
+          message="Are you sure you want to withdraw your ticket from resale?"
+          onClose={onCloseRemoveResale}
+          onConfirm={onConfirmRemoveResale}
+        />
+      )}
     </div>
   )
 }

package/src/components/orderDetailsContainer/style.css

@@ -12,6 +12,7 @@
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, .4);
+  z-index: 1400;
 }
 .order-details .layout-title {
   font-size: 24px;
@@ -39,13 +40,13 @@
 .order-details .ticket-add-on-table {
   background-color: #fcf8e3;;
 }
-.order-details .download-button {
-  width: 100%;
+.order-details .action-button {
+  width: max-content;
   font-weight: 400;
-  font-size: 16px;
+  font-size: 14px;
   line-height: normal;
   min-height: auto;
-  padding: 12px 0;
+  padding: 12px;
   border: 1px solid white;
   margin-top: 20px;
   margin-bottom: 20px;

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -12,20 +12,31 @@ interface IAddOnTypes {
   name: string;
   status: string;
 }
-interface ITicketTypes {
+export interface ITicketTypes {
   add_ons?: IAddOnTypes[];
   hash: string;
   ticket_type: string;
   holder_name: string;
   status: string;
   pdf_link: string;
+  is_sellable: boolean;
+  is_on_sale?: boolean;
+  event_name: string;
+  currency: string;
+  resale_fee_amount: number | string;
 }
 
 interface TicketsTableTypes {
   tickets: ITicketTypes[];
+  handleSellTicket: (ticket: ITicketTypes) => void;
+  handleRemoveFromResale: (ticket: ITicketTypes) => void;
 }
 
-const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => (
+const TicketsTable = ({
+  tickets = [],
+  handleSellTicket = () => {},
+  handleRemoveFromResale = () => {}
+}: TicketsTableTypes) => (
   <div className="tickets-box">
     <h4 className="sub-title">Your Tickets</h4>
     <TableContainer component={Paper}>
@@ -37,6 +48,7 @@ const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => (
             <TableCell>Ticket Holder Name</TableCell>
             <TableCell>Status</TableCell>
             <TableCell>Download</TableCell>
+            <TableCell />
           </TableRow>
         </TableHead>
         <TableBody>
@@ -50,16 +62,36 @@ const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => (
                 <TableCell>
                   <span
                     aria-hidden={true}
-                    className="download-button"
+                    className="action-button"
                     onClick={() => downloadPDF(ticket.pdf_link)}
                   >
                     Download
                   </span>
                 </TableCell>
+                <TableCell>
+                  {ticket.is_sellable && (
+                    <span
+                      aria-hidden={true}
+                      className="action-button"
+                      onClick={() => handleSellTicket(ticket)}
+                    >
+                      Sell Ticket
+                    </span>
+                  )}
+                  {ticket.is_on_sale && (
+                    <span
+                      aria-hidden={true}
+                      className="action-button"
+                      onClick={() => handleRemoveFromResale(ticket)}
+                    >
+                      Remove from Resale
+                    </span>
+                  )}
+                </TableCell>
               </TableRow>
               {!!ticket.add_ons?.length && (
                 <TableRow>
-                  <TableCell colSpan={5}>
+                  <TableCell colSpan={6}>
                     <Table className="ticket-add-on-table">
                       <TableHead>
                         <TableRow>

package/src/components/paymentContainer/index.tsx

@@ -26,6 +26,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { ThemeOptions } from '@mui/material'
 import { CSSProperties } from '@mui/styles'
 import TimerWidget from '../timerWidget'
+import { Loader } from '../common/index'
 
 const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
 
@@ -45,13 +46,6 @@ const getStripePromise = (reviewData: any) => {
   return loadStripe(stripePublishableKey, options)
 }
 
-function Loader() {
-  return (
-    <div className="loader-container">
-      <CircularProgress />
-    </div>
-  )
-}
 export interface IPaymentPage {
   paymentFields: IPaymentField[];
   handlePayment: any;

package/src/components/stripePayment/index.tsx

@@ -9,7 +9,7 @@ import {
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import _identity from 'lodash/identity'
 import _get from 'lodash/get'
-import { CheckboxField } from '../common/CheckboxField'
+import { CheckboxField } from '../common/index'
 
 import './style.css'
 import { getCurrencySymbolByCurrency } from '../../normalizers'

package/src/components/ticketResale/index.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+import _get from 'lodash/get'
+import { checkTicketStatus } from '../../api'
+import { AxiosError } from 'axios'
+
+export interface ITicketResaleContainer {
+  onCheckTicketStatusSuccess: (res: any) => void
+  onCheckTicketStatusError: (e: AxiosError) => void
+  orderHash?: string
+}
+
+export const TicketResaleContainer = ({
+  onCheckTicketStatusSuccess = () => {},
+  onCheckTicketStatusError = () => {},
+  orderHash,
+}: ITicketResaleContainer) => {
+  const isWindowDefined = typeof window !== 'undefined'
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    (async () => {
+      if (isWindowDefined) {
+        const params: URLSearchParams = new URL(`${window.location}`)
+          .searchParams
+        const hash = params.get('o') || orderHash || null
+
+        if (hash) {
+          try {
+            const response = await checkTicketStatus(hash)
+            const data = _get(response, 'data.data.attributes')
+            const age_required = _get(data, 'age_required', false)
+            const names_required = _get(data, 'names_required', false)
+            const event_id = _get(data, 'event_id')
+
+            onCheckTicketStatusSuccess(response.data)
+            window.location.href = `/billing/billing-info/?age_required=${age_required}&names_required=${names_required}&event_id=${event_id}`
+          } catch (error) {
+            console.log(error)
+            setError(error?.response?.data?.message)
+            onCheckTicketStatusError(error.response)
+          }
+        } else {
+          window.location.href = '/'
+        }
+      }
+    })()
+  }, [])
+
+  return (
+    <div className="ticket-resale-page">
+      <div className="error-block">
+        <h3>{error}</h3>
+      </div>
+    </div>
+  )
+}