tf-checkout-react 1.0.67 → 1.0.68

package/dist/tf-checkout-styles.css

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

package/dist/types/referral-promotion.d.ts

@@ -1,6 +1,6 @@
 export interface IReferralPromotion {
     label: string;
     price: string;
-    id: number | string;
+    id?: number | string;
     subLabel?: string;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.67",
+  "version": "1.0.68",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -63,20 +63,24 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
     "@mui/lab": "^5.0.0-alpha.55",
     "@mui/material": "^5.2.2",
+    "@mui/styles": "^5.2.2",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.21.1",
     "axios": "^0.24.0",
+    "clsx": "^1.1.1",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "material-ui-phone-number": "^3.0.0",
     "nanoid": "^3.1.30",
+    "prop-types": "^15.7.2",
     "react-bootstrap": "^2.0.2",
-    "react-inlinesvg": "^2.3.0"
+    "react-inlinesvg": "^2.3.0",
+    "react-share": "^4.4.0"
   }
 }

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

@@ -121,12 +121,12 @@ const LogicRunner: FC<{
     const fetchStates = async () => {
       try {
         const res = await getStates(values.country)
-        const mappedStates = _map(_get(res, 'data.data'), item => ({
+        const mappedStates = _map(_get(res, 'data.data'), (item, key) => ({
           label: item,
-          value: item,
+          value: key,
         }))
         setStates(mappedStates)
-        setFieldValue('state', mappedStates[0]?.label ?? '')
+        setFieldValue('state', mappedStates[0]?.value ?? '')
         onGetStatesSuccess(res.data)
       } catch (e) {
         if (axios.isAxiosError(e)) {

package/src/components/confirmationContainer/index.tsx

@@ -1,51 +1,39 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { useEffect, useRef, useState } from 'react'
 import './style.css'
-import SVG from 'react-inlinesvg'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
-
 import { IReferralPromotion } from '../../types'
 import { getConfirmationData } from '../../api'
 import { AxiosError } from 'axios'
+import SocialButtons from './social-buttons'
 
 export interface IShareButton {
   mainLabel: string;
   subLabel: string;
-  svgSrc: string;
-
-  containerClassName?: string;
-  containerInnerClassName?: string;
-  svgClassName?: string;
-  svgWidth?: string;
-  svgHeight?: string;
-  svgFill?: string;
+  icon: string;
+  link: string;
 }
 
 export interface IConfirmationPage {
-  referralPromotions: IReferralPromotion[];
-  shareLink: string;
   isReferralEnabled: boolean;
+  showDefaultShareButtons: boolean;
+  messengerAppId: string;
   shareButtons: IShareButton[];
   onGetConfirmationDataSuccess: (res: any) => void;
   onGetConfirmationDataError: (e: AxiosError) => void;
 }
 
-const defaultSvg =
-  'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg'
-
 export const ConfirmationContainer = ({
   isReferralEnabled,
-  referralPromotions = [],
+  showDefaultShareButtons,
+  messengerAppId = '',
   shareButtons = [],
-  shareLink = '',
   onGetConfirmationDataSuccess = () => {},
   onGetConfirmationDataError = () => {},
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
-  const [data, setData] = useState<any>({})
-  const showShareButtons = Boolean(shareButtons.length)
-  const showReferralPromotions = Boolean(referralPromotions.length)
+  const [data, setData] = useState<any>(null)
 
   // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
 
@@ -61,6 +49,19 @@ export const ConfirmationContainer = ({
         try {
           const response = await getConfirmationData(hash)
           const data = _get(response, 'data.data.attributes')
+          data.personal_share_sales = data.personal_share_sales.map((d: any) => {
+            const salesData: IReferralPromotion = { label: `If your friends buy ${d.sales} tickets`, price: '' }
+            if(d.price === 0) {
+              salesData.subLabel = 'Your ticket becomes'
+              salesData.price = 'FREE!'
+            } else {
+              salesData.subLabel = 'Your ticket goes down to'
+              salesData.price = data.currency.symbol + d.price?.toFixed(2)
+            }
+
+            return salesData
+          })
+          data.personal_share_sales.unshift({ label: 'Your ticket is currently', price: data.currency.symbol + data.product_price?.toFixed(2) })
           setData(data)
           onGetConfirmationDataSuccess(response.data)
         } catch (error) {
@@ -69,139 +70,107 @@ export const ConfirmationContainer = ({
       }
     })()
   }, [])
+
+  const onChangeShareLink = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newData = { ...data, personal_share_link: e.target.value }
+    setData(newData)
+  }
   
   return (
     <div className="confirmation-page">
-      <p className="title">Your Tickets are Confirmed!</p>
-      <div className="share-message-section">
-        <span className="main">Your tickets have been emailed to you</span>
-        <span className="helper">Please bring them with you to the event</span>
-      </div>
-      { data.disable_referral === false && isReferralEnabled && (
+      {data && (
         <>
-          <div className="referral_text_image_section">
-            <div className="referral_text_section">
-              <div className="referral_title_text">
-                Your ticket can become
-                <span className="strong-text"> cheaper </span>
-                or even
-                <span className="strong-text"> FREE!</span>
-              </div>
-              <div className="referral_text">
-                <span className="strong-text"> Invite friends </span>
-                and we'll refund up to
-                <span className="strong-text"> 100% </span>
-                of your ticket money, if they buy tickets as well!
-              </div>
-            </div>
-            <img
-              src="https://www.ticketfairy.com/uploaded/thumbnails/db_file_img_123847_400xauto.jpg"
-              alt="No Data"
-            />
+          <p className="title">Your Tickets are Confirmed!</p>
+          <div className="share-message-section">
+            <span className="main">Your tickets have been emailed to you</span>
+            <span className="helper">Please bring them with you to the event</span>
           </div>
-          <div className="share_wrapper">
-            <div className="share_section">
-              <div className="invitation_section">
-                <div className="invitation_title">
-                  How do you invite your friends?
+          { data.disable_referral === false && isReferralEnabled && (
+            <>
+              <div className="referral_text_image_section">
+                <div className="referral_text_section">
+                  <div className="referral_title_text">
+                    Your ticket can become
+                    <span className="strong-text"> cheaper </span>
+                    or even
+                    <span className="strong-text"> FREE!</span>
+                  </div>
+                  <div className="referral_text">
+                    <span className="strong-text"> Invite friends </span>
+                    and we'll refund up to
+                    <span className="strong-text"> 100% </span>
+                    of your ticket money, if they buy tickets as well!
+                  </div>
                 </div>
-                <div className="share_buttons">
-                  <div className="sharing-btn share-by-link">
-                    <h5 className="sharing-btn share-by-link label">
-                      Send them this link:
-                    </h5>
-                    <div
-                      aria-hidden={true}
-                      className="share-btn-inner share-by-link-copy"
-                      onClick={() =>
-                        navigator.clipboard.writeText(
-                          _get(inputRef, 'current.value')
-                        )
-                      }
-                    >
-                      <input
-                        ref={inputRef}
-                        className="share-input"
-                        value={shareLink}
-                        disabled={true}
-                      />
-                      <div className="svg_wrapper">
-                        <SVG
-                          className="share-icon"
-                          width="25px"
-                          height="25px"
-                          fill="#FFF"
-                          src={defaultSvg}
-                        />
-                      </div>
+                <img src={data.product_image} alt="No Data" />
+              </div>
+              <div className="share_wrapper">
+                <div className="share_section">
+                  <div className="invitation_section">
+                    <div className="invitation_title">
+                      How do you invite your friends?
                     </div>
-                  </div>
-                  {showShareButtons && (
-                    <div>
-                      <div className="convenient_buttons sharing-btn">
-                        or use one of these convenient buttons:
-                      </div>
-                      <div className="social-media-btns">
-                        {_map(shareButtons, shareButtonItem => (
+                    <div className="share_buttons">
+                      <div className="share-by-link">
+                        <h5 className="share-by-link label">
+                          Send them this link:
+                        </h5>
+                        <div className="share-btn-inner">
+                          <input
+                            ref={inputRef}
+                            className="share-input"
+                            value={data.personal_share_link}
+                            onChange={onChangeShareLink}
+                          />
                           <div
-                            className={`sharing-btn ${shareButtonItem.containerClassName}`}
+                            className='share-by-link-copy-icon'
+                              onClick={() => navigator.clipboard.writeText(
+                                _get(inputRef, 'current.value')
+                              )}
                           >
-                            <div
-                              aria-hidden={true}
-                              className={`share-btn-inner ${shareButtonItem.containerInnerClassName}`}
-                              onClick={() => {}}
-                            >
-                              <SVG
-                                className={
-                                  shareButtonItem.svgClassName || 'share-icon'
-                                }
-                                width={shareButtonItem.svgWidth || '40px'}
-                                height={shareButtonItem.svgHeight || '40px'}
-                                fill={shareButtonItem.svgFill || '#FFF'}
-                                src={shareButtonItem.svgSrc || defaultSvg}
-                              />
-                              <span className="share-text">
-                                {shareButtonItem.mainLabel}
-                                <br /> {shareButtonItem.subLabel}
-                              </span>
-                            </div>
+                            <img src="https://img.icons8.com/office/50/000000/copy.png" alt='copy' />
                           </div>
-                        ))}
+                        </div>
                       </div>
+                      {(showDefaultShareButtons || !!shareButtons.length) && (
+                        <SocialButtons
+                          showDefaultShareButtons={showDefaultShareButtons}
+                          name={data.product_name}
+                          appId={messengerAppId}
+                          shareLink={data.personal_share_link}
+                          shareButtons={shareButtons}
+                        />
+                      )}
                     </div>
-                  )}
+                  </div>
                 </div>
-              </div>
-            </div>
-            {showReferralPromotions && (
-              <div className="pricing-section">
-                <div className="invitation_title">How much cheaper?</div>
-                {_map(referralPromotions, pricing => {
-                  const isFree = pricing.price === 'FREE'
-                  return (
-                    <div
-                      key={pricing.id}
-                      className={`pricing-section_wrapper ${isFree &&
-                        'free_price'}`}
-                    >
-                      <div className="pricing-section_label">
-                        {pricing.label || 'Your ticket is currently'}
-                        {pricing.subLabel && (
-                          <div className="pricing-section_sublabel">
-                            {pricing.subLabel || 'Your ticket becomes'}
-                          </div>
-                        )}
-                      </div>
-                      <div className="pricing-section_price">
-                        {' '}
-                        {pricing.price}
+                <div className="pricing-section">
+                  <div className="invitation_title">How much cheaper?</div>
+                  {_map(data.personal_share_sales, (pricing, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className='pricing-section_wrapper'
+                      >
+                        <div className="pricing-section_label">
+                          {pricing.label}
+                          {pricing.subLabel && (
+                            <div className="pricing-section_sublabel">
+                              {pricing.subLabel}
+                            </div>
+                          )}
+                        </div>
+                        <div className="pricing-section_price">
+                          {' '}
+                          {pricing.price}
+                        </div>
                       </div>
-                    </div>
-                  )
-                })}
+                    )
+                  })}
+                </div>
               </div>
-            )}
-          </div>
+            </>
+          )}
         </>
       )}
     </div>

package/src/components/confirmationContainer/social-buttons.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import SVG from 'react-inlinesvg'
+import { getImage } from '../../utils/getImage'
+import { IShareButton } from'./index'
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  FacebookMessengerShareButton,
+  FacebookIcon,
+  TwitterIcon,
+  FacebookMessengerIcon,
+  WhatsappShareButton,
+  WhatsappIcon
+} from "react-share";
+
+interface SocialButtonsTypes {
+  shareLink: string;
+  name: string;
+  appId: string;
+  showDefaultShareButtons: boolean;
+  shareButtons: IShareButton[]
+}
+
+const SocialButtons = ({ showDefaultShareButtons, shareLink, name, appId, shareButtons }: SocialButtonsTypes) => {
+  return (
+    <>
+      <div className="convenient_buttons">
+        or use one of these convenient buttons:
+      </div>
+      <div className="social-media-btns">
+        {showDefaultShareButtons && (
+          <>
+            <FacebookShareButton
+              url={shareLink}
+              quote={name}
+            >
+              <div className='social-media-sharing'>
+                <div className='share-icon'>
+                  <FacebookIcon size={32} round />
+                </div>
+                <span className="share-text">
+                  Share on
+                  <br /> Facebook
+                </span>
+              </div>
+            </FacebookShareButton>
+            <TwitterShareButton
+              url={shareLink}
+              title={name}
+            >
+              <div className='social-media-sharing'>
+                <div className='share-icon'>
+                  <TwitterIcon size={32} round />
+                </div>
+                <span className="share-text">
+                  Tweet to your
+                  <br /> Followers
+                </span>
+              </div>
+            </TwitterShareButton>
+            <FacebookMessengerShareButton
+              url={shareLink}
+              appId={appId}
+            >
+              <div className='social-media-sharing'>
+                <div className='share-icon'>
+                  <FacebookMessengerIcon size={32} round />
+                </div>
+                <span className="share-text">
+                  Message friends on
+                  <br /> Facebook
+                </span>
+              </div>
+            </FacebookMessengerShareButton>
+            <WhatsappShareButton
+              url={shareLink}
+              title={name}
+            >
+              <div className='social-media-sharing'>
+                <div className='share-icon'>
+                  <WhatsappIcon size={32} round />
+                </div>
+                <span className="share-text">
+                  Message friends on
+                  <br /> Whatsapp
+                </span>
+              </div>
+            </WhatsappShareButton>
+          </>
+        )}
+        {shareButtons.map((shareButton, index) => (
+          <div className='sharing-btn' key={index}>
+            <a href={shareButton.link} target="_blank" rel="noopener noreferrer">
+              <div className='social-media-sharing'>
+                <div className='share-icon'>
+                  <SVG
+                    width='32px'
+                    height='32px'
+                    fill='#FFF'
+                    src={getImage(shareButton.icon)}
+                  />
+                </div>
+                <span className="share-text">
+                  {shareButton.mainLabel}
+                  <br /> {shareButton.subLabel}
+                </span>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default SocialButtons