tf-checkout-react 1.0.106 → 1.1.0

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

package/dist/utils/cookies.d.ts

@@ -0,0 +1,3 @@
+export declare function setCustomCookie(name: string, value: string, days?: number): void;
+export declare function getCookieByName(cname: string): string;
+export declare function deleteCookieByName(name: string): void;

package/dist/utils/createCheckoutDataBodyWithDefaultHolder.d.ts

@@ -3,5 +3,10 @@ interface ICheckoutBody {
         [key: string]: any;
     };
 }
-export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: {}, includeDob?: boolean) => ICheckoutBody;
+interface IUserCredentialsValues {
+    emailLogged?: string;
+    firstNameLogged?: string;
+    lastNameLogged?: string;
+}
+export declare const createCheckoutDataBodyWithDefaultHolder: (ticketsQuantity: number, logedInValues: {}, includeDob?: boolean, userCredentials?: IUserCredentialsValues) => ICheckoutBody;
 export {};

package/dist/utils/downloadPDF.d.ts

@@ -1 +1 @@
-export declare const downloadPDF: (pdfUrl: string) => void;
+export declare const downloadPDF: (pdfUrl: string) => Promise<any> | undefined;

package/dist/utils/getDomain.d.ts

@@ -0,0 +1 @@
+export declare function getDomain(url: string, subdomain?: string): string;

package/dist/utils/index.d.ts

@@ -3,3 +3,5 @@ export { getQueryVariable } from './getQueryVariable';
 export { ErrorFocus } from './formikErrorFocus';
 export { downloadPDF } from './downloadPDF';
 export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBodyWithDefaultHolder';
+export { setCustomCookie, getCookieByName, deleteCookieByName } from './cookies';
+export { getDomain } from './getDomain';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.106",
+  "version": "1.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -51,7 +51,18 @@
     "@types/lodash": "^4.14.176",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "5.4.0",
+    "eslint": "^7.26.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-webpack-plugin": "^3.2.0",
     "husky": "^7.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package/src/api/index.ts

@@ -1,7 +1,7 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import _get from 'lodash/get'
 
-import { CONFIGS } from '../utils'
+import { CONFIGS, getCookieByName, setCustomCookie } from '../utils'
 
 const isWindowDefined = typeof window !== 'undefined'
 
@@ -28,7 +28,7 @@ export const publicRequest: IPublicRequest = axios.create({
 publicRequest.interceptors.response.use(
   response => {
     const authGuestToken = _get(response, 'headers.authorization-guest')
-  
+
     if (isWindowDefined && authGuestToken) {
       window.localStorage.setItem('auth_guest_token', authGuestToken)
       publicRequest.setGuestToken(authGuestToken)
@@ -86,6 +86,14 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
     config.headers = updatedHeaders
   }
 
+  if (getCookieByName('X-TF-ECOMMERCE')) {
+    const updatedHeaders = {
+      ...config.headers,
+      'X-TF-ECOMMERCE': getCookieByName('X-TF-ECOMMERCE'),
+    }
+    config.headers = updatedHeaders
+  }
+
   if (CONFIGS.X_SOURCE_ORIGIN) {
     const updatedHeaders = {
       ...config.headers,
@@ -101,6 +109,18 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
   return config
 })
 
+publicRequest.interceptors.response.use((response: AxiosResponse) => {
+  const xtfCookie = _get(response, 'headers.x-tf-ecommerce')
+  const url = _get(response, 'config.url')
+  const method = _get(response, 'config.method')
+
+  if (xtfCookie && !(url === '/auth' && method === 'delete')) {
+    setCustomCookie('X-TF-ECOMMERCE', xtfCookie)
+  }
+
+  return response
+})
+
 publicRequest.setGuestToken = token =>
   (publicRequest.defaults.headers.common['Authorization-Guest'] = token)
 
@@ -130,7 +150,7 @@ export const setCustomHeader = (response: any) => {
   }
 }
 
-export const handleSetAccessToken = (token: any) => {
+export const handleSetAccessToken = (token: string) => {
   if (token) {
     if (isWindowDefined) {
       window.localStorage.setItem('access_token', token)
@@ -175,7 +195,7 @@ export const getCart = () => {
   return res
 }
 
-export const postOnCheckout = (data: any, accessToken: string) => {
+export const postOnCheckout = (data: any, accessToken?: string) => {
   const res = publicRequest.post(
     `v1/on-checkout/`,
     { data },
@@ -189,10 +209,9 @@ export const postOnCheckout = (data: any, accessToken: string) => {
   return res
 }
 
-export const authorize = (data: FormData) =>
+export const authorize = (data: { email: string, password: string }) =>
   publicRequest.post(
-    `v1/oauth/authorize-rn?client_id=${CONFIGS.CLIENT_ID ||
-      'e9d8f8922797b4621e562255afe90dbf'}`,
+    `/auth?clientId=${CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'}`,
     data
   )
 
@@ -240,7 +259,7 @@ export const handleFreeSuccess = (orderHash: string) => {
   return res
 }
 
-export const getProfileData = (accessToken: any) =>
+export const getProfileData = (accessToken?: string) =>
   publicRequest
     .get('/customer/profile/', {
       headers: {
@@ -248,9 +267,7 @@ export const getProfileData = (accessToken: any) =>
         Authorization: `Bearer ${accessToken}`,
       },
     })
-    .catch((e: any) => {
-      return e
-    })
+    .catch((e: any) => e)
 
 export const getCountries = () => publicRequest.get('/countries/')
 
@@ -275,26 +292,46 @@ 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 resaleTicket = (data: any, hash: string) =>
+  publicRequest.post(`v1/ticket/${hash}/sell`, data)
 
-export const removeFromResale = (hash: string) => {
-  return publicRequest.delete(`v1/ticket/${hash}/sell`)
-}
+export const removeFromResale = (hash: string) =>
+  publicRequest.delete(`v1/ticket/${hash}/sell`)
 
 export const postReferralVisits = (eventId: string, referralId: string) =>
   publicRequest.post(`v1/event/${eventId}/referrer/`, {
     referrer: `${referralId}`,
   })
 
-export const processTicket = (hash: string) => {
-  return publicRequest.post(`v1/ticket/${hash}/process/`)
-}
+export const logout = () => publicRequest.delete('/auth')
+
+// forgot password
+export const forgotPassword = (email: string) =>
+  publicRequest.post(`/auth/restore-password`, { email })
 
-export const declineInvitation = (hash: string) => {
-  return publicRequest.post(`v1/ticket/${hash}/decline`)
+// reset password
+interface IResetPasswordData {
+  token: string;
+  password: string;
+  confirmPassword: string;
 }
+export const resetPassword = (data: IResetPasswordData) =>
+  publicRequest.post(`/auth/reset-password`, data)
+
+export const processTicket = (hash: string) =>
+  publicRequest.post(`v1/ticket/${hash}/process/`)
+
+export const declineInvitation = (hash: string) =>
+  publicRequest.post(`v1/ticket/${hash}/decline`)
 
 export const sendRSVPInfo = (eventId: number, data: any) =>
-  publicRequest.post(`v1/event/${eventId}/send-rsvp-info`, data)
+  publicRequest.post(`v1/event/${eventId}/send-rsvp-info`, data)
+
+export const validatePhoneNumber = async (phone: string): Promise<any> => {
+  const response: AxiosResponse<
+    any,
+    AxiosRequestConfig
+  > = await publicRequest.get(`/v1/account/validate_phone?phone=${phone}`)
+
+  return response.data
+}

package/src/components/account-settings/index.tsx

@@ -0,0 +1,161 @@
+import React from "react"
+import './style.css'
+import Icon from "../../../src/assets/images/Polygon.png"
+
+
+export const AccountSettings = () => {
+    return (
+        <div className="account-settings">
+            <h2>Account Settings</h2>
+            <div className="tab">
+               <div className="tab-menu">
+                   <ul>
+                       <li className="active">ACCOUNT INFO/PASSWORD</li>
+                       <li>PRIVACY SETTINGS</li>
+                       <li>ACTIVE SESSIONS</li>
+                   </ul>
+               </div>
+                <div className="tab-content">
+                    <div className="account-info">
+
+                    </div>
+                    <div className="privacy">
+                        <p>
+                            Please note: Opting Out here doesn’t mean you’ll be removed
+                            from that Brand’s mailing list outside of Restless Nites
+                            – just from communications inside our site. You’ll have
+                            to contact them directly to break ties further.
+                        </p>
+                        <div className="pr-settings">
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="sessions">
+                       <div className="sessions-item">
+                           <div className="sessions-info">
+                               <span>Apple – Los Angeles, United States</span>
+                               <span>Chrome – Current session</span>
+                           </div>
+                           <button>
+                               Log Out
+                           </button>
+                       </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/account-settings/style.css

@@ -0,0 +1,200 @@
+.account-settings {
+    width: 600px;
+    margin: 0 auto;
+    padding: 70px 0;
+}
+
+.account-settings h2 {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 29px;
+    color: #000000;
+    position: relative;
+    margin: 0 0 18px 0;
+}
+
+.account-settings h2::before {
+    content: "";
+    width: 54px;
+    height: 2px;
+    background-color: #F28051;
+    position: absolute;
+    left: -65px;
+    top: 13px;
+}
+
+.tab .tab-menu ul {
+    margin: 0;
+    list-style-type: none;
+    padding-left: 0;
+    display: flex;
+    border-bottom: 1px solid #BDBDBD;
+}
+
+.tab .tab-menu {
+    margin-bottom: 45px;
+}
+
+.tab .tab-menu ul li {
+    margin-right: 70px;
+    font-family: Interbold;
+    font-size: 14px;
+    text-align: center;
+    color: #000000;
+    padding-bottom: 5px;
+    margin-bottom: -2px;
+    cursor: pointer;
+}
+
+.tab .tab-menu ul li.active {
+    border-bottom: 3px solid #F28051;
+}
+
+.tab .tab-menu ul li:last-child {
+    margin-right: 0;
+}
+
+.sessions {
+    background-color: #FFFFFF;
+    border-top: 2px solid #F28051;
+    border-bottom: 2px solid #F28051;
+}
+
+.sessions-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    border-bottom: 1px solid #A2A2A2;
+}
+
+.sessions .sessions-item .sessions-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.sessions .sessions-item .sessions-info span {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    color: #000000;
+}
+
+.sessions .sessions-item .sessions-info span:last-child {
+    font-size: 12px;
+    color: #858585;
+}
+
+.sessions-item button {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    color: #F28051;
+    margin: 0;
+    width: 82px;
+    height: 29px;
+    background-color: #ffffff;
+    border: 1px solid #F28051;
+    text-transform: uppercase;
+}
+
+.privacy p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.02em;
+    color: #000000;
+}
+
+.privacy .pr-settings {
+    background-color: #ffffff;
+    border-top: 2px solid #F28051;
+    border-bottom: 2px solid #F28051;
+}
+
+.privacy .pr-settings .pr-settings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 25px;
+    border-bottom: 1px solid #A2A2A2;
+}
+
+.privacy .pr-settings .pr-settings-item:last-child {
+    border-bottom: none;
+}
+
+.pr-settings-item .item-name img {
+    margin-right: 6px;
+}
+
+.pr-settings-item .item-name span {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration-line: underline;
+    color: #000000;
+}
+
+.pr-settings-item .item-box span {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    color: #000000;
+    margin-right: 6px;
+}
+
+.pr-settings-item .item-box {
+    display: flex;
+    align-items: center;
+}
+
+
+/*///////////Checkbox///////////////*/
+
+.checkbox-block {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 22px;
+    width: 22px;
+}
+
+/* Hide the browser's default checkbox */
+.checkbox-block input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 22px;
+    width: 22px;
+    background-color: #ffffff;
+    border: 1px solid #000000;
+}
+
+/* On mouse-over, add a grey background color */
+.checkbox-block:hover input ~ .checkmark {
+    background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.checkbox-block input:checked ~ .checkmark {
+    background-color: #F28051;
+}
+
+/* Show the checkmark when checked */
+.checkbox-block input:checked ~ .checkmark:after {
+    display: block;
+}