diff --git a/assets/css/admin.css b/assets/css/admin.css index 6a50d400..81b99b01 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -3,13 +3,16 @@ @import url('../fonts/graphik/fonts.css'); :root { - --mailchimp-color-text: #241c15; + --mailchimp-color-text: #21262a; + --mailchimp-color-text-gray: #757575; --mailchimp-color-white: #fff; --mailchimp-color-border: #ffe01b; --mailchimp-color-header-bg: #fbeeca; - --mailchimp-color-link: #007c89; + --mailchimp-color-link: #017e89; + --mailchimp-color-link-hover: #006771; --mailchimp-color-text-light: #373737; --mailchimp-color-text-lightest: #5d5c5d; + --mailchimp-border-color: #D3D0C8; --mailchimp-max-width: 56.25rem; /* 900 pixels */ } @@ -39,29 +42,13 @@ table.mc-user, } /* Sections */ -table.mc-widefat, .mailchimp-sf-user-sync-page table.form-table { +table.mc-widefat { background: var(--mailchimp-color-white); border: 2px solid var(--mailchimp-color-header-bg) !important; border-radius: 6px; margin: 2.75rem 0 2.25rem; } -.mailchimp-sf-user-sync-page table.form-table { - border-collapse: separate; - border-spacing: 0px; -} - -.mailchimp-sf-user-sync-page table.form-table tr:first-child, -table.mc-widefat tr:first-child { - background: var(--mailchimp-color-header-bg); -} - -.mailchimp-sf-user-sync-page table.form-table tr:first-child th, -table.mc-widefat tr:first-child th { - color: var(--mailchimp-color-text); - font-weight: 500; -} - /* Buttons */ #wpbody .button-secondary { border-color: var(--mailchimp-color-link); @@ -189,8 +176,6 @@ table.mc-list-select { } /* Table */ -.mailchimp-sf-user-sync-page table.form-table td, -.mailchimp-sf-user-sync-page table.form-table th, table.mc-widefat td, table.mc-widefat th { padding: 18px; @@ -198,8 +183,6 @@ table.mc-widefat th { text-shadow: none; } -.mailchimp-sf-user-sync-page table.form-table .last-row td, -.mailchimp-sf-user-sync-page table.form-table .last-row th, table.mc-widefat .last-row td, table.mc-widefat .last-row th { border-bottom: none !important; @@ -211,11 +194,6 @@ table.mc-widefat th { width: 130px; } -.mailchimp-sf-user-sync-page table.form-table th { - color: var(--mailchimp-color-text-light); - font-weight: 500; -} - table.mc-widefat td label { display: block; font-size: 0.75rem; @@ -230,7 +208,6 @@ table.mc-widefat td { line-height: 1.125 !important; } -.mailchimp-sf-user-sync-page table.form-table td input, table.mc-widefat td input { display: inline-block; font-style: normal; @@ -251,6 +228,36 @@ table.mc-widefat.mc-api tr:first-child { background: var(--mailchimp-color-header-bg) !important; } +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table { + table-layout: fixed; +} + +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th:first-child, +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table trtd:first-child { + width: 48px; +} + +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th:last-child, +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td:last-child { + width: 120px; +} + +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th { + margin: 0px; + padding: 12px; + border-radius: 0px; +} + +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td { + font-size: 14px; + padding: 12px; + word-wrap: break-word; +} + +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td strong { + word-wrap: break-word; +} + a.mc-api-key { color: var(--mailchimp-color-white); display: block; @@ -291,8 +298,8 @@ th.mailchimp-connect { background: transparent; color: #000; margin-left: 0; - font-weight: 500; - padding: 5px 12px; + font-weight: 500; + padding: 5px 12px; } .mailchimp-sf-nav-tab-wrapper a.nav-tab:hover { @@ -324,7 +331,7 @@ th.mailchimp-connect { } #mailchimp-sf-settings-page .flex { - display:flex; + display:flex; } #mailchimp-sf-settings-page .gap-x-6 { @@ -336,11 +343,11 @@ th.mailchimp-connect { } #mailchimp-sf-settings-page .justify-between { - justify-content: space-between; + justify-content: space-between; } #mailchimp-sf-settings-page .items-center { - align-items: center; + align-items: center; } #mailchimp-sf-settings-page .opacity-25 { @@ -361,9 +368,8 @@ th.mailchimp-connect { #mailchimp-sf-settings-page .wizard-steps { color: rgba(36, 28, 21); - font-size: 13px; - line-height: 18px; - margin-top: 4px; + font-size: 14px; + line-height: 18px; } #mailchimp-sf-settings-page .wizard-steps .deselected { @@ -393,41 +399,63 @@ th.mailchimp-connect { } .mailchimp-sf-header { - padding: 14px 12px; + padding: 14px 36px; background: #fff; border-top: 4px solid var(--mailchimp-color-border); - border-bottom: 1px solid rgba(36, 28, 21, 0.15); + border-bottom: 1px solid var(--mailchimp-border-color); column-gap: 34px; margin-left: -20px; } -.mailchimp-sf-header h3 { +.toplevel_page_mailchimp_sf_options .mailchimp-sf-header { + column-gap: unset; +} + +.mailchimp-sf-header h3, +.mailchimp-sf-user-sync-settings-field-label { font-family: "Means Web", serif; margin-bottom: 0px; margin-top: 0px; - font-weight: 400; + font-weight: 300; font-size: 20px; line-height: 1.2em; + letter-spacing: -0.72px; +} + +.mailchimp-sf-user-sync-settings-field-label { + margin-bottom: 24px; + line-height: 1.25em; +} + +.mailchimp-user-sync-subscriber-status .mailchimp-sf-user-sync-settings-field-label, +.mailchimp-user-sync-user-roles .mailchimp-sf-user-sync-settings-field-label, +.mailchimp-user-sync-user-sync-errors .mailchimp-sf-user-sync-settings-field-label { + border-bottom: 1px solid var(--mailchimp-border-color); + padding-bottom: 20px; } .mailchimp-sf-header .logo { - margin: 2px 0px; + margin: 6px 0px; } .mailchimp-sf-header .mailchimp-sf-create-account-plus { margin: 0px 10px; - font-family: "Means Web", serif; - font-size: 44px; - color: #8C8C8C; - font-weight: 300; + font-family: "Means Web", serif; + font-size: 44px; + color: #8C8C8C; + font-weight: 300; } -body.admin_page_mailchimp_sf_create_account, -body.toplevel_page_mailchimp_sf_options { +body.admin_page_mailchimp_sf_create_account { background-color: #F6F6F4; font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; } +body.toplevel_page_mailchimp_sf_options { + background-color: #fff; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; +} + body.admin_page_mailchimp_sf_create_account a, body.toplevel_page_mailchimp_sf_options a { color: var(--mailchimp-color-link); @@ -435,7 +463,7 @@ body.toplevel_page_mailchimp_sf_options a { body.admin_page_mailchimp_sf_create_account a:hover, body.toplevel_page_mailchimp_sf_options a:hover { - color: #006570; + color: var(--mailchimp-color-link-hover); } body.admin_page_mailchimp_sf_create_account #footer-upgrade, @@ -459,16 +487,16 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { .mailchimp-sf-content-box { background-color: #ffffff; - border-radius: 12px; - border: 1px solid rgba(36, 28, 21, 0.15); - padding: 52px 64px; + border-radius: 12px; + border: 1px solid rgba(36, 28, 21, 0.15); + padding: 52px 64px; } #mailchimp-sf-settings-page .email-opener { font-size: 16px; - line-height: 24px; - font-weight: 500; - text-decoration: underline; + line-height: 24px; + font-weight: 500; + text-decoration: underline; } #mailchimp-sf-settings-page .h4 { @@ -512,42 +540,22 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { margin-top: 36px; } -.button.mailchimp-sf-button { - all: unset; - box-sizing: border-box; - display: inline-flex; - align-items: center; - gap: 10px; - padding: 12px 32px; - position: relative; - background-color: var(--mailchimp-color-link); - border-radius: 38px; - font-weight: 500; - color: #ffffff; - font-size: 13px; - text-align: center; - letter-spacing: 0; - line-height: 20px; - white-space: nowrap; - cursor: pointer; -} - .button.mailchimp-sf-button.button-secondary { color: var(--mailchimp-color-link); - background-color: #fff; - border: 1px solid var(--mailchimp-color-link); + background-color: #fff; + border: 1px solid var(--mailchimp-color-link); } .button.mailchimp-sf-button:hover, .button.mailchimp-sf-button:focus, .button.mailchimp-sf-button:active { color: #ffffff; - background-color: #006570; + background-color: var(--mailchimp-color-link-hover); text-decoration: none; } .button.mailchimp-sf-button:focus { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #006570; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--mailchimp-color-link-hover); } .button.mailchimp-sf-button.button-secondary:hover, @@ -601,7 +609,7 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { .mailchimp-sf-create-account__body .terms a { color: var(--mailchimp-color-link); font-weight: 500; - text-decoration: none; + text-decoration: none; } .mailchimp-sf-create-account__body .terms p { @@ -612,7 +620,7 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { } .mailchimp-sf-create-account__body .terms p:last-child { - margin-bottom: 32px; + margin-bottom: 32px; } .mailchimp-sf-create-account__body .terms a:hover { @@ -679,9 +687,9 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { width: 100%; font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; font-size: 16px; - color: #000; - line-height: 1.5em; - font-weight: 400; + color: #000; + line-height: 1.5em; + font-weight: 400; } .mailchimp-sf-form-wrapper fieldset input[type="text"]:focus, @@ -779,7 +787,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { } @media screen and (max-width: 782px) { - .mailchimp-sf-header { + .mailchimp-sf-header, + .mailchimp-sf-settings-page-hero-wrapper { margin-left: -10px; } } @@ -829,8 +838,13 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { line-height: 1.4; } -.button.mailchimp-cancel-user-sync-button { +a.mailchimp-sf-button.mailchimp-cancel-user-sync-button { margin-left: auto; + color: var(--mailchimp-color-text); +} + +a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover { + color: var(--mailchimp-color-text); } @media screen and (max-width: 480px) { @@ -839,7 +853,7 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { align-items: flex-start; } - .button.mailchimp-cancel-user-sync-button { + .mailchimp-cancel-user-sync-button { margin-left: 0px; margin-top: 10px; } @@ -849,15 +863,17 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { margin-top: 2rem; } -.mailchimp-sf-user-sync-errors-header { - display: flex; - justify-content: space-between; - align-items: center; +.mailchimp-sf-user-sync-errors-footer { + display: block; + margin: 1em 0; + text-align: right; } .mailchimp-sf-user-sync-error-action { min-width: 120px; text-align: right; + display: flex; + align-items: center; } .mailchimp-sf-start-user-sync-wrapper { @@ -892,3 +908,767 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade { text-decoration: none; } +#mailchimp-sf-settings-page .user-profile-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 24px; + margin-left: auto; +} + +#mailchimp-sf-settings-page .user-profile-wrapper form { + margin: 0px; +} + +#mailchimp-sf-settings-page .user-profile { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + gap: 8px; +} + +#mailchimp-sf-settings-page .user-profile-avatar { + height: 40px; + line-height: 1; +} + +#mailchimp-sf-settings-page .user-profile-avatar img { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid var(--mailchimp-border-color); + box-sizing: border-box; +} + +#mailchimp-sf-settings-page .user-profile-details { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 0px; + gap: 2px; +} + +#mailchimp-sf-settings-page .user-profile-details .user-profile-name { + font-size: 16px; + font-weight: 500; + line-height: 18px; + color: var(--mailchimp-color-text); +} + +#mailchimp-sf-settings-page .user-profile-details .user-profile-email { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: var(--mailchimp-color-text); +} + +/* Settings Page Hero */ +.mailchimp-sf-settings-page-hero-wrapper { + margin-left: -20px; + background-color: #fff; + border-bottom: 1px solid rgba(36, 28, 21, 0.15); +} + +#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: 32px 40px; + gap: 32px; +} + +.mailchimp-sf-settings-page-hero-title-wrapper, +.mailchimp-sf-settings-page-hero-content-wrapper { + flex: 1; +} + +.mailchimp-sf-settings-page-hero-title { + font-family: "Means Web", serif; + font-size: 36px; + line-height: 1.1em; + margin-bottom: 24px; + margin-top: 0px; + font-weight: 300; + letter-spacing: -0.72px; +} + +.mailchimp-sf-settings-page-hero-description, +.mailchimp-sf-settings-list-note { + font-size: 16px; + font-weight: 500; + line-height: 18px; + color: var(--mailchimp-color-text); +} + +.mailchimp-sf-settings-list-note { + margin-top: 0px; + margin-bottom: 8px; +} + +.mailchimp-sf-settings-page-hero-content h3 { + font-family: "Means Web", serif; + font-size: 20px; + line-height: 1.25em; + font-weight: 300; + letter-spacing: -0.72px; +} + +.mailchimp-sf-settings-page-hero-content p, +.mailchimp-sf-settings-list-description { + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text); +} + +.mailchimp-sf-settings-list-description { + font-size: 14px; + margin-top: 0px; + color: var(--mailchimp-color-text-gray); +} + +.mailchimp-sf-settings-page-hero-content-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0px 24px; + gap: 24px; + background: #EEEEEA; + border-radius: 8px; + box-sizing: border-box; +} + +.mailchimp-sf-settings-page-hero-content, +.mailchimp-sf-settings-page-hero-content-image { + flex: 1; +} + +.mailchimp-sf-settings-page-hero-content-image { + line-height: 0; + margin-top: 24px; + align-self: end; +} + +.mailchimp-sf-settings-page-hero-content-image img { + width: 100%; + height: auto; +} + +/* Settings List Select */ +.mailchimp-sf-settings-list-select-wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +/* Buttons */ +.mailchimp-sf-button, +.button.mailchimp-sf-button { + all: unset; + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: 10px; + padding: 0 18px; + position: relative; + background-color: #f0f4f6; + border-radius: 6px; + font-weight: 400; + color: var(--mailchimp-color-text); + font-size: 16px; + line-height: 16px; + text-align: center; + letter-spacing: 0; + white-space: nowrap; + cursor: pointer; + text-align: center; + vertical-align: middle; + -ms-transition: all 0.2s; + transition: all 0.2s; + height: 40px; + border: 1px solid transparent; + white-space: nowrap; + justify-content: center; +} + +.mailchimp-sf-button:hover, .mailchimp-sf-button:active { + background-color: #d5dee3 +} + +.mailchimp-sf-button:focus { + background-color: #d5dee3; + outline: 2px solid var(--mailchimp-color-link); +} + +.mailchimp-sf-button[disabled] { + pointer-events: none; + opacity: .4; +} + +.mailchimp-sf-button.button-primary, +.mailchimp-sf-button.btn-primary { + background-color: var(--mailchimp-color-link); + border-color: var(--mailchimp-color-link); + color: #fff; +} + +body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.button-primary:hover, +body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover { + color: #fff; +} + +.mailchimp-sf-button.button-primary:hover, +.mailchimp-sf-button.button-primary:active, +.mailchimp-sf-button.btn-primary:hover, +.mailchimp-sf-button.btn-primary:active { + background-color: var(--mailchimp-color-link-hover); +} + +.mailchimp-sf-button.button-primary:focus, +.mailchimp-sf-button.btn-primary:focus { + background-color: var(--mailchimp-color-link-hover); + border-color: var(--mailchimp-color-link-hover); + outline: 2px solid var(--mailchimp-color-link-hover); + box-shadow: none; +} + +.mailchimp-sf-button.btn-small { + font-size: 14px; + height: 36px; +} + +.mailchimp-sf-section-footer { + text-align: right; +} + +.mailchimp-sf-section-footer p.submit { + margin: 0px; + padding: 0px; + text-align: right; +} + +.mailchimp-sf-section-footer .mailchimp-sf-button { + margin: 16px 0px; +} + +/* Settings Page */ +.mailchimp-sf-settings-page { + max-width: 1200px; + margin: 0 auto; + padding: 32px 20px; +} + +.mailchimp-sf-settings-list-wrapper { + margin-bottom: 20px; +} + +/* Main Settings */ +.mailchimp-sf-main-settings-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.mailchimp-sf-main-setings-wrapper, +.mailchimp-sf-user-sync-page-wrapper { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 16px; +} + +.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings, +.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page { + flex: 3; +} + +.mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer, +.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column { + flex: 1; + width: 100%; +} + +.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column { + min-width: 250px; +} + +.mailchimp-sf-main-settings, +.mailchimp-sf-user-sync-page { + max-width: 800px; +} + +table.widefat.mailchimp-sf-settings-table { + margin-top: 16px; + width: 100%; + border-radius: 8px; + border: 1px solid var(--mailchimp-border-color); +} + +.mailchimp-sf-settings-table thead tr th { + background-color: var(--mailchimp-color-header-bg); + padding: 24px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.mailchimp-sf-settings-form-previewer .mailchimp-sf-settings-table thead tr th { + background-color: #EEEEEA; +} + +.mailchimp-sf-settings-table thead tr th h2 { + color: var(--mailchimp-color-text); + font-family: "Means Web", serif; + font-weight: 300; + letter-spacing: -0.72px; + font-size: 24px; + line-height: 1.25em; + margin: 0; +} + +.mailchimp-sf-settings-table tbody tr th { + padding: 24px 0px 0px 24px; +} + +.mailchimp-sf-settings-table tr th.mailchimp-sf-option-header { + width: 145px; +} + +.mailchimp-sf-settings-table tbody tr:last-child th { + padding-bottom: 24px; +} + +.mailchimp-sf-settings-table tbody tr td { + padding: 24px 24px 0px 24px; +} + +.mailchimp-sf-settings-table tbody tr:last-child td { + padding-bottom: 24px; +} + +.mailchimp-sf-settings-table tbody tr th, +.mailchimp-sf-settings-table tbody tr th label { + font-weight: 500; + font-size: 16px; + line-height: 18px; + color: var(--mailchimp-color-text); + word-wrap: normal; +} + +.mailchimp-sf-settings-table tbody tr td p.description { + font-size: 12px; + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text-gray); + margin: 0px; +} + +.mailchimp-sf-settings-table tbody tr td, +p.mailchimp-sf-settings-table-description { + font-size: 16px; + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text); + word-wrap: normal; +} + +.mailchimp-sf-settings-table tbody tr td strong { + word-wrap: normal; +} + +p.mailchimp-sf-settings-table-description { + padding: 0px; + margin: 0px; + margin-top: 12px; +} + +table.widefat.mailchimp-sf-settings-table ul { + margin: 0px; + padding: 0px; +} + +.mailchimp-sf-user-sync-settings-fields { + display: flex; + flex-direction: column; + gap: 24px; +} + +/* Input fields */ +#mailchimp-sf-settings-page select { + font-size: 14px; + padding: 10px 32px 10px 10px; + height: 40px; + background-color: #fff; + border-radius: 6px; + border: 1px solid #c3ced5; + color: var(--mailchimp-color-text); + line-height: 1.2em; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; + font-weight: 400; + transition: all 0.2s; + min-width: 200px; +} + +#mailchimp-sf-settings-page select:hover { + background-color: #f8fafb; + border-color: #3c4348; +} + +#mailchimp-sf-settings-page select:focus { + background-color: #fff; + border-color: var(--mailchimp-color-link); + -webkit-box-shadow: none; + box-shadow: none; + outline-offset: -2px; + outline: 2px solid var(--mailchimp-color-link); +} + +#mailchimp-sf-settings-page input[type="text"] { + font-size: 16px; + padding: 10px 12px; + height: 40px; + background-color: #fff; + border-radius: 4px; + border: 1px solid var(--mailchimp-border-color); + color: var(--mailchimp-color-text); + line-height: 1.35em; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; + font-weight: 400; + transition: all 0.2s; +} + +#mailchimp-sf-settings-page input[type="text"]:hover { + background-color: #f8fafb; + border-color: #3c4348; + outline: none; +} + +#mailchimp-sf-settings-page input[type="text"]:focus { + outline-offset: -2px; + outline: 2px solid var(--mailchimp-color-link); +} + +#mailchimp-sf-settings-page textarea { + font-size: 16px; + padding: 10px 12px; + background-color: #fff; + border-radius: 4px; + border: 1px solid var(--mailchimp-border-color); + color: var(--mailchimp-color-text); + line-height: 1.35em; + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif; + font-weight: 400; + transition: all 0.2s; + min-width: 200px; +} + +#mailchimp-sf-settings-page textarea:hover { + background-color: #f8fafb; + border-color: #3c4348; + outline: none; +} + +#mailchimp-sf-settings-page textarea:focus { + outline-offset: -2px; + outline: 2px solid var(--mailchimp-color-link); +} + +.mailchimp-sf-ch-wrapper { + display: inline-block; + margin: 0.5rem; +} + +input[type=checkbox].mailchimp-sf-checkbox { + appearance: none; + width: 24px; + height: 24px; + border: 1px solid var(--mailchimp-border-color); + border-radius: 6px; + cursor: pointer; + position: relative; + transition: all 0.2s; + box-shadow: none; + margin: 0px; +} + +input[type=checkbox].mailchimp-sf-checkbox:focus { + outline: 2px solid var(--mailchimp-color-link); +} + +input[type=checkbox].mailchimp-sf-checkbox:checked { + background-color: var(--mailchimp-color-link); + border-color: var(--mailchimp-color-link); +} + +input[type=checkbox].mailchimp-sf-checkbox:checked::before { + content: ""; + width: auto; + height: auto; +} + +input[type=checkbox].mailchimp-sf-checkbox:checked:after { + content: ""; + width: 12px; + height: 5px; + border-radius: 0.5px; + transform: rotate(-45deg); + border-left: 2px solid #fff; + border-bottom: 2px solid #fff; + margin: 6px 4px; + display: block; +} + +input[type=checkbox].mailchimp-sf-checkbox[disabled] { + opacity: 0.3; + cursor: not-allowed; +} + +input[type=radio].mailchimp-sf-radio { + appearance: none; + width: 28px; + height: 28px; + border: 1px solid var(--mailchimp-border-color); + border-radius: 50%; + cursor: pointer; + position: relative; + box-shadow: none; +} + +input[type=radio].mailchimp-sf-radio:checked { + border: 2px solid var(--mailchimp-color-link); +} + +input[type=radio].mailchimp-sf-radio:checked:before { + display: none; +} + +input[type=radio].mailchimp-sf-radio:checked:after { + content: ""; + display: block; + width: 16px; + height: 16px; + background-color: var(--mailchimp-color-link); + border-radius: 50%; + margin: 4px; +} + +.widefat td p.radio-description { + font-size: 16px; + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text-gray); + margin-top: 8px; + margin-left: 36px; + margin-bottom: 24px; +} + +.mailchimp-sf-user-sync-user-roles { + display: flex; + flex-wrap: wrap; + gap: 24px; +} + +.mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{ + flex: 1 1 45%; +} + +span.mailchimp-sf-last-sync-time { + vertical-align: middle; + margin-left: 12px; + color: var(--mailchimp-color-text-gray); +} + +.mailchimp-sf-toggle-switch { + position: relative; + display: inline-block; + width: 40px; + height: 24px; + min-width: 40px; +} + +.mailchimp-sf-toggle-switch input[type="checkbox"] { + opacity: 0; + width: 0; + height: 0; +} + +.mailchimp-sf-toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--mailchimp-border-color); + transition: .4s; + border-radius: 24px; +} + +.mailchimp-sf-toggle-slider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 2px; + bottom: 2px; + background-color: white; + transition: .4s; + border-radius: 50%; +} + +input:checked + .mailchimp-sf-toggle-slider { + background-color: var(--mailchimp-color-link); +} + +input:checked + .mailchimp-sf-toggle-slider:before { + transform: translateX(16px); +} + +#mailchimp-sf-settings-page .input-checkbox-wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; +} + +#mailchimp-sf-settings-page .input-checkbox-wrapper label { + font-size: 14px; + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text-gray); + margin: 0px; +} + +#mailchimp-sf-settings-page .mailchimp-sf-user-sync-settings-fields .input-checkbox-wrapper label { + font-size: 16px; +} + +.mailchimp-sf-settings-table tbody tr td.mailchimp-sf-note { + font-size: 12px; + font-weight: 400; + line-height: 1.35em; + color: var(--mailchimp-color-text-gray); + margin: 0px; +} + +.mailchimp-sf-form-preview-content { + position: relative; +} + +.toplevel_page_mailchimp_sf_options .notice { + display: none; +} + +.toplevel_page_mailchimp_sf_options .mailchimp-sf-settings-page .notice { + display: block; +} + +@media screen and (max-width: 992px) { + .mailchimp-sf-main-setings-wrapper, + .mailchimp-sf-user-sync-page-wrapper { + flex-direction: column; + } + + .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings, + .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page { + flex: 1; + } +} + +@media screen and (max-width: 782px) { + #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero { + flex-direction: column; + padding: 32px 20px 32px 30px; + } + + .mailchimp-sf-settings-page { + padding: 32px 10px; + } + + .mailchimp-sf-header { + padding: 14px 20px; + } +} + +@media screen and (max-width: 480px) { + .mailchimp-sf-header { + flex-direction: column; + gap: 8px; + } + + .mailchimp-sf-settings-list-select-wrapper { + flex-direction: column; + align-items: flex-start; + } + + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select, + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select, + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button, + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button input { + width: 100%; + } + + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select { + max-width: 100%; + } + + #mailchimp-sf-settings-page .user-profile-wrapper { + margin: 0 auto; + gap: 12px; + } + + .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{ + flex: 1 1 100%; + } + + .mailchimp-sf-user-sync-error-action { + flex-direction: column; + min-width: 0; + } + + #mailchimp-sf-settings-page .mailchimp-sf-list-settings .input-checkbox-wrapper { + flex-direction: column; + align-items: flex-start; + } + + .mailchimp-sf-settings-table tbody tr th { + padding-left: 16px; + } + + .mailchimp-sf-settings-table tbody tr td { + padding: 24px 16px 0px 16px; + } + + .mailchimp-sf-settings-table tr th.mailchimp-sf-option-header { + width: auto; + } + + span.mailchimp-sf-last-sync-time { + display: block; + margin-left: 0px; + margin-top: 12px; + } + + .mailchimp-sf-user-sync-page table.widefat.mailchimp-sf-settings-table { + table-layout: fixed; + } + + .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table { + table-layout: auto; + } + + .mailchimp-sf-user-sync-errors { + width: 100%; + overflow-x: scroll; + } +} diff --git a/assets/css/images/mailchimp-header.png b/assets/css/images/mailchimp-header.png deleted file mode 100644 index 3b3c3245..00000000 Binary files a/assets/css/images/mailchimp-header.png and /dev/null differ diff --git a/assets/images/settings-block.png b/assets/images/settings-block.png new file mode 100644 index 00000000..a5db7cc5 Binary files /dev/null and b/assets/images/settings-block.png differ diff --git a/assets/js/admin.js b/assets/js/admin.js index bbcba3fa..9e48a421 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -63,7 +63,7 @@ }, { text: params.modal_button_try_again, - class: 'button mailchimp-sf-button', + class: 'button mailchimp-sf-button button-primary', click() { $(this).dialog('close'); setConnectButtonLoading(); @@ -420,14 +420,14 @@ const userSyncSettingsPage = $('.mailchimp-sf-user-sync-page'); if (userSyncSettingsPage.length > 0) { const syncExistingContactsOnly = $( - 'tr.mailchimp-user-sync-existing-contacts-only input[type="checkbox"]', + 'input[type="checkbox"][name="mailchimp_sf_user_sync_settings[existing_contacts_only]"]', ); if (syncExistingContactsOnly) { syncExistingContactsOnly.change(function () { if (this.checked) { - $('tr.mailchimp-user-sync-subscriber-status').hide(); + $('div.mailchimp-user-sync-subscriber-status').hide(); } else { - $('tr.mailchimp-user-sync-subscriber-status').show(); + $('div.mailchimp-user-sync-subscriber-status').show(); } }); @@ -491,7 +491,7 @@ $('#mailchimp-sf-clear-user-sync-errors').on('click', function (e) { e.preventDefault(); $(this).prop('disabled', true); - $('.mailchimp-sf-user-sync-errors-header-actions .spinner').addClass('is-active'); + $('.mailchimp-sf-user-sync-errors-footer-actions .spinner').addClass('is-active'); $.ajax({ url: params.ajax_url, @@ -504,7 +504,7 @@ success(response) { if (response && response.success) { $(tableSelector + ' tbody').html(noErrorsFoundRow); - $('.mailchimp-sf-user-sync-errors-header-actions .spinner').removeClass( + $('.mailchimp-sf-user-sync-errors-footer-actions .spinner').removeClass( 'is-active', ); } else { @@ -554,3 +554,151 @@ }); }); })(jQuery); // eslint-disable-line no-undef + +// Form settings. +(function ($) { + /** + * Initialize form settings functionality + */ + function initFormSettings() { + const $form = $('#mailchimp-sf-settings-form'); + const $userSyncForm = $('.mailchimp-sf-user-sync-form'); + const $submitButtons = $('input[type="submit"].mailchimp-sf-button-submit'); + const params = window.mailchimp_sf_admin_params || {}; + const ajaxUrl = params.ajax_url || ''; + const ajaxNonce = params.preview_form_nonce || ''; + + // Initially hide all submit buttons + $submitButtons.hide(); + + /** + * Toggle submit buttons visibility based on form state + * + * @param {jQuery} $changedInput - The input that was changed + */ + function toggleSubmitButtons($changedInput) { + $changedInput + .closest('.mailchimp-sf-section') + .find('.mailchimp-sf-button-submit') + .show(); + $changedInput + .closest('.mailchimp-sf-section') + .find('.mailchimp-sf-section-footer') + .slideDown({ duration: 200 }); + } + + function blockElement(elementSelector) { + const $el = $(elementSelector); + $el.append( + '
' + + '
' + + '
', + ); + } + + function unblockElement(elementSelector) { + $(elementSelector + ' .block-overlay').remove(); + } + + /** + * Debounce function + * + * @param {Function} func - The function to debounce + * @param {number} delay - The delay in milliseconds + * @returns {Function} The debounced function + */ + function debounce(func, delay) { + let timeout; + return function (...args) { + clearTimeout(timeout); + timeout = setTimeout(() => { + func.apply(this, args); + }, delay); + }; + } + + /** + * Preview the form. + */ + function previewForm() { + const $previewer = $('.mailchimp-sf-form-preview'); + if ($previewer.length === 0) { + return; + } + + // Loading overlay. + blockElement('.mailchimp-sf-form-preview-content'); + + const fields = {}; + const groups = {}; + $form.find('input[name^="mc_mv_"]').each(function () { + const $input = $(this); + fields[$input.data('tag')] = $input.is(':checked'); + }); + $form.find('input[name^="mc_show_interest_groups_"]').each(function () { + const $input = $(this); + groups[$input.data('group-id')] = $input.is(':checked'); + }); + + const previewData = { + header: $('#mc_header_content').val(), + sub_heading: $('#mc_subheader_content').val(), + submit_text: $('#mc_submit_text').val(), + fields, + groups, + display_unsub_link: $('#mc_use_unsub_link').is(':checked'), + }; + + $.ajax({ + url: ajaxUrl, + type: 'POST', + data: { + action: 'mailchimp_sf_preview_form', + nonce: ajaxNonce, + preview_data: previewData, + }, + success(response) { + if (response.success && response.data) { + unblockElement('.mailchimp-sf-form-preview-content'); + $previewer.html(response.data); + } else { + unblockElement('.mailchimp-sf-form-preview-content'); + $previewer.html( + '
' + + params.generic_error + + '
', + ); + } + }, + error(jqXHR, textStatus, errorThrown) { + // eslint-disable-next-line no-console + console.error('Error: ', textStatus, ', Details: ', errorThrown); + unblockElement('.mailchimp-sf-form-preview-content'); + $previewer.html( + '
' + + params.generic_error + + '
', + ); + }, + }); + } + + const debouncedPreviewForm = debounce(previewForm, 300); + + // Watch for changes on all form elements + $form.on('input change', 'input, textarea, select', function () { + const $changedInput = $(this); + toggleSubmitButtons($changedInput); + debouncedPreviewForm(); + }); + + // Watch for changes on user sync form elements + $userSyncForm.on('input change', 'input, textarea, select', function () { + const $changedInput = $(this); + toggleSubmitButtons($changedInput); + }); + } + + // Initialize when document is ready + $(document).ready(initFormSettings); +})(jQuery); // eslint-disable-line no-undef diff --git a/includes/admin/class-mailchimp-user-sync.php b/includes/admin/class-mailchimp-user-sync.php index cab21f09..467b185b 100644 --- a/includes/admin/class-mailchimp-user-sync.php +++ b/includes/admin/class-mailchimp-user-sync.php @@ -69,8 +69,6 @@ public function init() { add_action( 'wp_ajax_mailchimp_sf_delete_user_sync_error', [ $this, 'delete_user_sync_error' ] ); // Render the user sync status and errors. add_action( 'mailchimp_sf_user_sync_before_form', [ $this, 'render_user_sync_status' ] ); - add_action( 'mailchimp_sf_user_sync_before_form', [ $this, 'render_user_sync_start_cta' ] ); - add_action( 'mailchimp_sf_user_sync_after_form', [ $this, 'render_user_sync_errors' ] ); $settings = $this->get_user_sync_settings(); // If auto user sync is enabled, keep listening to user register and profile update actions. @@ -99,7 +97,8 @@ public function register_settings() { * @since 1.9.0 */ public function setup_fields_sections() { - $section_id = $this->option_name . '_section'; + $section_id = $this->option_name . '_section'; + $user_sync_errors = $this->get_user_sync_errors(); add_settings_section( $section_id, '', @@ -107,61 +106,66 @@ public function setup_fields_sections() { $this->option_name ); - add_settings_field( - 'user_sync_title', - __( 'User sync settings', 'mailchimp' ), - '__return_empty_string', - $this->option_name, - $section_id - ); - add_settings_field( 'enable_user_sync', - __( 'Enable auto user sync', 'mailchimp' ), + __( 'Enable Sync', 'mailchimp' ), array( $this, 'enable_user_sync_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-enable-user-sync', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-enable-user-sync', ] ); add_settings_field( 'existing_contacts_only', - __( 'Sync existing contacts only', 'mailchimp' ), + __( 'Sync Existing Contacts Only', 'mailchimp' ), array( $this, 'existing_contacts_only_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-existing-contacts-only', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-existing-contacts-only', ] ); add_settings_field( 'subscriber_status', - __( 'Subscriber status', 'mailchimp' ), + __( 'Subscriber Status', 'mailchimp' ), array( $this, 'subscriber_status_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-subscriber-status', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-subscriber-status', ] ); add_settings_field( 'user_roles', - __( 'Roles to sync', 'mailchimp' ), + __( 'Roles to Sync', 'mailchimp' ), array( $this, 'user_roles_field' ), $this->option_name, $section_id, [ - 'class' => 'mailchimp-user-sync-user-roles', + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-user-roles', ] ); + if ( ! empty( $user_sync_errors ) ) { + add_settings_field( + 'user_sync_errors', + __( 'User Sync Errors', 'mailchimp' ), + array( $this, 'render_user_sync_errors' ), + $this->option_name, + $section_id, + [ + 'class' => 'mailchimp-user-sync-settings-field mailchimp-user-sync-user-sync-errors', + ] + ); + } + add_settings_field( 'sync_all_users', - __( 'Sync users', 'mailchimp' ), + '', array( $this, 'sync_all_users_button' ), $this->option_name, $section_id @@ -221,27 +225,32 @@ public function user_roles_field() { $settings = $this->get_user_sync_settings( 'user_roles' ); $user_roles = get_editable_roles(); - foreach ( $user_roles as $role_name => $role_details ) { - $value = $settings[ $role_name ] ?? ''; - - // Render checkbox. - printf( - '

- -

', - esc_attr( $this->option_name . '[user_roles][' . $role_name . ']' ), - esc_attr( $role_name ), - checked( $value, $role_name, false ), - esc_html( $role_details['name'] ) - ); - } ?> -

- -

+
+ $role_details ) { + $value = $settings[ $role_name ] ?? ''; + + // Render checkbox. + printf( + ' +
+
+ +
+ +
+ ', + esc_attr( $this->option_name . '[user_roles][' . $role_name . ']' ), + esc_attr( $role_name ), + checked( $value, $role_name, false ), + esc_html( $role_details['name'] ) + ); + } + ?> +
get_user_sync_settings( 'enable_user_sync' ); ?> - - > -

- -

+
+ + +
get_user_sync_settings( 'subscriber_status' ); ?> -
+
-

- +

+

-
+
-

+

-
+
-

+

-

+

get_users_count(); echo wp_kses( @@ -341,10 +355,21 @@ public function existing_contacts_only_field() { $settings = $this->get_user_sync_settings(); $existing_contacts_only = isset( $settings['existing_contacts_only'] ) ? $settings['existing_contacts_only'] : 0; ?> - /> -

- -

+
+
+ + > +
+ +
- - + + -

- -

+ + + + + 'mailchimp_sf_options', - 'tab' => 'user_sync', - ), + array( 'page' => 'mailchimp_sf_options' ), admin_url( 'admin.php' ) ); @@ -465,10 +502,7 @@ public function cancel_user_sync() { wp_safe_redirect( esc_url_raw( add_query_arg( - array( - 'page' => 'mailchimp_sf_options', - 'tab' => 'user_sync', - ), + array( 'page' => 'mailchimp_sf_options' ), admin_url( 'admin.php' ) ) ) @@ -496,10 +530,7 @@ public function skip_user_sync_cta() { wp_safe_redirect( esc_url_raw( add_query_arg( - array( - 'page' => 'mailchimp_sf_options', - 'tab' => 'user_sync', - ), + array( 'page' => 'mailchimp_sf_options' ), admin_url( 'admin.php' ) ) ) @@ -665,7 +696,7 @@ public function render_user_sync_start_cta() {

- + @@ -723,7 +754,7 @@ public function render_user_sync_progress() { ); ?> - +
@@ -802,7 +833,7 @@ public function delete_user_sync_errors( $id ) { /** * Render the user sync errors. - * Note: This is only renders last 100 records. + * Note: This is only renders last 25 records. * * @since 1.9.0 */ @@ -813,18 +844,10 @@ public function render_user_sync_errors() { return; } - // Get last 100 records - $errors = array_slice( $errors, -100 ); - + // Get last 25 records + $errors = array_slice( $errors, -25 ); ?>
-
-

-
- - -
-
@@ -848,7 +871,7 @@ public function render_user_sync_errors() { @@ -856,15 +879,13 @@ public function render_user_sync_errors() { } ?> - - - - - - - -
- +
+
+
+ + +
+
+ + + +
-

-
+
+
- - - - -
+ + + + +
+
- - - - + + + +
-
+
\ No newline at end of file diff --git a/includes/admin/templates/login-button.php b/includes/admin/templates/login-button.php index 4629a45f..971c9664 100644 --- a/includes/admin/templates/login-button.php +++ b/includes/admin/templates/login-button.php @@ -7,7 +7,7 @@ $button_text = $login_button_text ?? __( 'Log in', 'mailchimp' ); ?> -
+
+ + /** + * Render the user sync status, start cta etc... + */ + do_action( 'mailchimp_sf_user_sync_before_form' ); - __( 'Settings', 'mailchimp' ), - 'user_sync' => __( 'User Sync', 'mailchimp' ), - ) - ?> - - + -
-
-
- - +
+
+ +
+ + - - - - - - - - - - - - - - - - -
- - -
- -
- - -
-
- -
- - - -
-
- - - - - -
onclick="showMe('mc-custom-styling')"/>
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - /> - -
- - - - px -
- - - # - - # -
- - - # - - # -
- - - # - - # -
-
- - - - - - - - - - - - - - - - - - - - - -
id="mc_double_optin" class="code" /> - -
id="mc_update_existing" class="code" /> - -
id="mc_use_unsub_link" class="code" /> - -
- Note: If you haven\'t already, please add your website URL to your Mailchimp Audience account settings so users can properly return to your site after subscribing.', 'mailchimp' ), - 'https://mailchimp.com/help/change-or-update-the-return-to-our-website-button/' - ), - [ - 'a' => [ - 'href' => [], - 'target' => [], - 'rel' => [], - ], - 'strong' => [], - ] - ) - ?> -
-
-
+ + + + + + + + + + - if ( ! is_array( $mv ) || count( $mv ) === 0 ) { - ?> -
-
+

+
+ + + +

+ +

- +
- - -
-
- -
- - - - - - - - - - - - - - + - + + + + + +
- -
+ + - - - /> - -  —  - + +

+
+ +

+ + + +
-
+ +
+ +
-
-

+
+ + + + + + + + + + + +
+

+
- + } else { + ?> +
+ + + + + + + + + + + + + -
+

+
- - - + foreach ( $mv as $mv_var ) { + ?> - + + + + + +
- - - /> + + + data-tag=""/>
+ +
+ +
+
+ + +
+ + + + + + + + - - - - + + + -
    • - - - - -
    +

    +
    -
      +
    - + + + +
      + +
      • + +
    + + + data-group-id=""/> + + + + + + +
    + +
    +
    + - + ?> + +
    + + + + + + + + + + + + + +
    +

    +
    + + + +
    +
    + onclick="showMe('mc-custom-styling')"/> +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    +
    + + +
    +
    + /> +
    + +
    +
    + + + +

    + px +

    +
    + + + # + +

    + # +

    +
    + + + # + +

    + # +

    +
    + + + # + +

    + # +

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    +
    + + +
    +
    + id="mc_double_optin" class="mailchimp-sf-checkbox" /> +
    + +
    +
    + + +
    +
    + id="mc_update_existing" class="mailchimp-sf-checkbox" /> +
    + +
    +
    + + +
    +
    + id="mc_use_unsub_link" class="mailchimp-sf-checkbox" /> +
    + +
    +
    + Note: If you haven\'t already, please add your website URL to your Mailchimp Audience account settings so users can properly return to your site after subscribing.', 'mailchimp' ), + 'https://mailchimp.com/help/change-or-update-the-return-to-our-website-button/' + ), + [ + 'a' => [ + 'href' => [], + 'target' => [], + 'rel' => [], + ], + 'strong' => [], + ] + ) + ?> +
    +
    + +
    +
    + +
    +
    +
    + + + + + + + + + + + +
    +

    +
    +
    + +
    +
    +
    +
    diff --git a/includes/admin/templates/user-sync.php b/includes/admin/templates/user-sync.php index 03b51866..d1da07b3 100644 --- a/includes/admin/templates/user-sync.php +++ b/includes/admin/templates/user-sync.php @@ -5,26 +5,73 @@ * @package Mailchimp */ +global $wp_settings_sections, $wp_settings_fields; ?> -
    - -
    +
    +
    + + + + + + + + + + + + +
    +

    +

    +
    +
    + +
    + '; + if ( ! empty( $field['args']['label_for'] ) ) { + echo ''; + } else { + echo '' . esc_html( $field['title'] ) . ''; + } + echo '
    '; + + echo '
    '; + call_user_func( $field['callback'], $field['args'] ); + echo '
    '; + ?> +
    + + +
    + +
    + +
    + + - - - +
    +
    diff --git a/includes/class-mailchimp-admin.php b/includes/class-mailchimp-admin.php index 819a1523..3805336a 100644 --- a/includes/class-mailchimp-admin.php +++ b/includes/class-mailchimp-admin.php @@ -42,6 +42,7 @@ public function init() { add_action( 'wp_ajax_mailchimp_sf_oauth_finish', array( $this, 'finish_oauth_process' ) ); add_action( 'wp_ajax_mailchimp_sf_create_account', array( $this, 'mailchimp_create_account' ) ); add_action( 'wp_ajax_mailchimp_sf_check_login_session', array( $this, 'check_login_session' ) ); + add_action( 'wp_ajax_mailchimp_sf_preview_form', array( $this, 'preview_subscribe_form' ) ); add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_page_scripts' ) ); add_action( 'admin_menu', array( $this, 'add_admin_menu_pages' ) ); @@ -284,6 +285,57 @@ public function check_login_session() { } } + /** + * Preview the subscribe form. + * + * This function is called via AJAX. + * + * This function previews the subscribe form on the settings page based on the form settings. + */ + public function preview_subscribe_form() { + // Check the nonce for security + check_ajax_referer( 'mailchimp_sf_preview_form_nonce', 'nonce' ); + + // Validate the permissions. + if ( ! current_user_can( 'manage_options' ) ) { + wp_send_json_error( array( 'message' => esc_html__( 'You do not have permission to perform this action.', 'mailchimp' ) ) ); + } + + $fields = isset( $_POST['preview_data']['fields'] ) ? array_map( 'sanitize_text_field', wp_unslash( $_POST['preview_data']['fields'] ) ) : array(); + $fields = array_map( + function ( $ele ) { + return 'true' === $ele; + }, + $fields + ); + $groups = isset( $_POST['preview_data']['groups'] ) ? array_map( 'sanitize_text_field', wp_unslash( $_POST['preview_data']['groups'] ) ) : array(); + $groups = array_map( + function ( $ele ) { + return 'true' === $ele; + }, + $groups + ); + + $preview_data = array( + 'header' => isset( $_POST['preview_data']['header'] ) ? sanitize_text_field( wp_unslash( $_POST['preview_data']['header'] ) ) : get_option( 'mc_header_content' ), + 'sub_heading' => isset( $_POST['preview_data']['sub_heading'] ) ? sanitize_text_field( wp_unslash( $_POST['preview_data']['sub_heading'] ) ) : get_option( 'mc_subheader_content' ), + 'submit_text' => isset( $_POST['preview_data']['submit_text'] ) ? sanitize_text_field( wp_unslash( $_POST['preview_data']['submit_text'] ) ) : get_option( 'mc_submit_text' ), + 'fields' => $fields, + 'groups' => $groups, + 'display_unsub_link' => isset( $_POST['preview_data']['display_unsub_link'] ) ? 'true' === sanitize_text_field( wp_unslash( $_POST['preview_data']['display_unsub_link'] ) ) : get_option( 'mc_use_unsub_link' ), + ); + + ob_start(); + mailchimp_sf_signup_form( + array( + 'is_preview' => true, + 'preview_data' => $preview_data, + ) + ); + $form = ob_get_clean(); + wp_send_json_success( $form ); + } + /** * Verify and save the OAuth token. * @@ -492,6 +544,7 @@ public function enqueue_admin_page_scripts( $hook_suffix ) { 'user_sync_status_nonce' => wp_create_nonce( 'mailchimp_sf_user_sync_status' ), 'delete_user_sync_error_nonce' => wp_create_nonce( 'mailchimp_sf_delete_user_sync_error' ), 'no_errors_found' => esc_html__( 'No errors found', 'mailchimp' ), + 'preview_form_nonce' => wp_create_nonce( 'mailchimp_sf_preview_form_nonce' ), ); // Create account page specific data. diff --git a/includes/class-mailchimp-user-sync-backgroud-process.php b/includes/class-mailchimp-user-sync-backgroud-process.php index abd38211..79fd78d9 100644 --- a/includes/class-mailchimp-user-sync-backgroud-process.php +++ b/includes/class-mailchimp-user-sync-backgroud-process.php @@ -132,6 +132,9 @@ public function run( $item = array() ) { ), 'success' ); + + // Update the last sync time. + update_option( 'mailchimp_sf_last_sync_time', time() ); } $this->clear_running_sync(); return; @@ -193,6 +196,10 @@ public function run( $item = array() ) { ), 'success' ); + + // Update the last sync time. + update_option( 'mailchimp_sf_last_sync_time', time() ); + $this->clear_running_sync(); return; } diff --git a/mailchimp_widget.php b/mailchimp_widget.php index 1154082a..6950af20 100644 --- a/mailchimp_widget.php +++ b/mailchimp_widget.php @@ -21,6 +21,8 @@ function mailchimp_sf_signup_form( $args = array() ) { $after_title = isset( $args['after_title'] ) ? $args['after_title'] : ''; $before_widget = isset( $args['before_widget'] ) ? $args['before_widget'] : ''; $after_widget = isset( $args['after_widget'] ) ? $args['after_widget'] : ''; + $is_preview = isset( $args['is_preview'] ) ? (bool) $args['is_preview'] : false; + $preview_data = isset( $args['preview_data'] ) ? $args['preview_data'] : array(); $mv = get_option( 'mc_merge_vars' ); $igs = get_option( 'mc_interest_groups' ); @@ -65,6 +67,9 @@ function mailchimp_sf_signup_form( $args = array() ) { } $header = get_option( 'mc_header_content' ); + if ( $is_preview && ! empty( $preview_data ) ) { + $header = $preview_data['header'] ?? $header; + } // See if we have custom header content if ( ! empty( $header ) ) { @@ -79,6 +84,9 @@ function mailchimp_sf_signup_form( $args = array() ) { } $sub_heading = trim( get_option( 'mc_subheader_content' ) ); + if ( $is_preview && ! empty( $preview_data ) ) { + $sub_heading = $preview_data['sub_heading'] ?? $sub_heading; + } ?>
    @@ -108,7 +116,11 @@ function mailchimp_sf_signup_form( $args = array() ) { $num_fields = 0; foreach ( (array) $mv as $mv_var ) { $opt = 'mc_mv_' . $mv_var['tag']; - if ( $mv_var['required'] || get_option( $opt ) === 'on' ) { + if ( $is_preview && ! empty( $preview_data ) ) { + if ( $mv_var['required'] || ( isset( $preview_data['fields'][ $mv_var['tag'] ] ) && $preview_data['fields'][ $mv_var['tag'] ] ) ) { + ++$num_fields; + } + } elseif ( $mv_var['required'] || get_option( $opt ) === 'on' ) { ++$num_fields; } } @@ -120,7 +132,13 @@ function mailchimp_sf_signup_form( $args = array() ) { // Loop over our vars, and output the ones that are set to display foreach ( $mv as $mv_var ) { - echo mailchimp_form_field( $mv_var, $num_fields ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function + $opt = 'mc_mv_' . $mv_var['tag']; + $should_display = 'on' === get_option( $opt ); + if ( $is_preview && ! empty( $preview_data ) ) { + $should_display = $preview_data['fields'][ $mv_var['tag'] ] ?? $should_display; + } + + echo mailchimp_form_field( $mv_var, $num_fields, $should_display ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function } // Show an explanation of the * if there's more than one field @@ -136,7 +154,11 @@ function mailchimp_sf_signup_form( $args = array() ) { if ( is_array( $igs ) && ! empty( $igs ) ) { foreach ( $igs as $ig ) { if ( is_array( $ig ) && isset( $ig['id'] ) ) { - if ( ( $igs && get_option( 'mc_show_interest_groups_' . $ig['id'] ) === 'on' ) ) { + $should_display = 'on' === get_option( 'mc_show_interest_groups_' . $ig['id'] ); + if ( $is_preview && ! empty( $preview_data ) ) { + $should_display = $preview_data['groups'][ $ig['id'] ] ?? $should_display; + } + if ( ( $igs && $should_display ) ) { if ( 'hidden' !== $ig['type'] ) { ?>
    @@ -181,6 +203,11 @@ function mailchimp_sf_signup_form( $args = array() ) { mailchimp_sf_honeypot_field(); $submit_text = get_option( 'mc_submit_text' ); + + // Preview. + if ( $is_preview && ! empty( $preview_data ) ) { + $submit_text = $preview_data['submit_text'] ?? $submit_text; + } ?> datacenter . '.list-manage.com'; ?> diff --git a/tests/cypress/e2e/block.test.js b/tests/cypress/e2e/block.test.js index a492046b..be1b6361 100644 --- a/tests/cypress/e2e/block.test.js +++ b/tests/cypress/e2e/block.test.js @@ -10,7 +10,8 @@ describe('Block Tests', () => { // Hide all interest groups cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('input[id^="mc_show_interest_groups_"]').uncheck(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('input[id^="mc_show_interest_groups_"]').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); }); it('Admin can create a Signup form using Mailchimp block', () => { diff --git a/tests/cypress/e2e/connect.test.js b/tests/cypress/e2e/connect.test.js index 78eeae4e..0c5a3670 100644 --- a/tests/cypress/e2e/connect.test.js +++ b/tests/cypress/e2e/connect.test.js @@ -9,8 +9,8 @@ describe('Admin can connect to "Mailchimp" Account', () => { // Logout if already connected. cy.get('body').then(($body) => { - if ($body.find('input[value="Logout"]').length > 0) { - cy.get('input[value="Logout"]').click(); + if ($body.find('input[value="Log out"]').length > 0) { + cy.get('input[value="Log out"]').click(); } }); @@ -18,8 +18,8 @@ describe('Admin can connect to "Mailchimp" Account', () => { cy.mailchimpLogin(); // Logout exists - cy.get('.mc-user h3').contains('Logged in as: '); - cy.get('input[value="Logout"]').should('exist'); + cy.get('.user-profile-name').should('be.visible'); + cy.get('input[value="Log out"]').should('exist'); // Mailchimp lists exists and has at least one audience cy.get('#mc_list_id').should('exist'); diff --git a/tests/cypress/e2e/logout.test.js b/tests/cypress/e2e/logout.test.js index 563f7773..366784ad 100644 --- a/tests/cypress/e2e/logout.test.js +++ b/tests/cypress/e2e/logout.test.js @@ -13,7 +13,7 @@ describe('Logout tests', () => { return true; }); - cy.get('input[value="Logout"]').click(); + cy.get('input[value="Log out"]').click(); // connect to "Mailchimp" Account button should be visible. cy.get('#mailchimp_sf_oauth_connect').should('exist'); diff --git a/tests/cypress/e2e/settings/admin.test.js b/tests/cypress/e2e/settings/admin.test.js index 5df2e46a..17e8188f 100644 --- a/tests/cypress/e2e/settings/admin.test.js +++ b/tests/cypress/e2e/settings/admin.test.js @@ -17,7 +17,7 @@ describe('Admin can login and make sure plugin is activated', () => { // Check Heading cy.get('#adminmenu li#toplevel_page_mailchimp_sf_options').click(); - cy.get('#wpbody .mailchimp-sf-header h3').contains('Mailchimp List Subscribe Form'); + cy.get('#wpbody h1.mailchimp-sf-settings-page-hero-title').contains('Settings'); }); it('Admin can see "Create account" button and Can visit "Create account" settings page.', () => { diff --git a/tests/cypress/e2e/settings/list.test.js b/tests/cypress/e2e/settings/list.test.js index 2c1d76f6..059be20f 100644 --- a/tests/cypress/e2e/settings/list.test.js +++ b/tests/cypress/e2e/settings/list.test.js @@ -37,12 +37,13 @@ describe('Mailchimp lists ', () => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); // Verify that list can be saved - cy.get('.mc-h2').contains('Your Lists'); cy.selectList('10up'); - cy.get('.notice.notice-success.is-dismissible').first().contains('Success!'); // Verify that the settings are visible if a list is saved - cy.get('input[value="Update Subscribe Form Settings"]').should('exist'); + cy.get('h2.mailchimp-sf-settings-table-title') + .first() + .contains('Form copy') + .should('be.visible'); }); it('Admin that has never saved a list can not see the form on the front end', () => { diff --git a/tests/cypress/e2e/settings/settings.test.js b/tests/cypress/e2e/settings/settings.test.js index adb63701..ec841fc6 100644 --- a/tests/cypress/e2e/settings/settings.test.js +++ b/tests/cypress/e2e/settings/settings.test.js @@ -25,7 +25,7 @@ describe('Admin can update plugin settings', () => { cy.get('#mc_header_content').clear().type(header); cy.get('#mc_subheader_content').clear().type(subHeader); cy.get('#mc_submit_text').clear().type(button); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify content options [shortcodePostURL, blockPostPostURL].forEach((url) => { @@ -40,8 +40,7 @@ describe('Admin can update plugin settings', () => { // Ensure that all current merge tags are up to date and saved cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('#mc_list_id').select('10up'); - cy.get('input[value="Update List"]').click(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('input[value="Fetch list settings"]').click(); // Uncheck all optional merge fields cy.get('#mc_mv_FNAME').uncheck(); @@ -49,7 +48,8 @@ describe('Admin can update plugin settings', () => { cy.get('#mc_mv_ADDRESS').uncheck(); cy.get('#mc_mv_BIRTHDAY').uncheck(); cy.get('#mc_mv_COMPANY').uncheck(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_mv_COMPANY').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify [shortcodePostURL, blockPostPostURL].forEach((url) => { @@ -68,7 +68,8 @@ describe('Admin can update plugin settings', () => { cy.get('#mc_mv_ADDRESS').check(); cy.get('#mc_mv_BIRTHDAY').check(); cy.get('#mc_mv_COMPANY').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_mv_COMPANY').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify [shortcodePostURL, blockPostPostURL].forEach((url) => { @@ -84,7 +85,8 @@ describe('Admin can update plugin settings', () => { it('Admin can update groups settings', () => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('input[id^="mc_show_interest_groups_"]').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('input[id^="mc_show_interest_groups_"]').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify [shortcodePostURL, blockPostPostURL].forEach((url) => { @@ -96,7 +98,8 @@ describe('Admin can update plugin settings', () => { // Reset cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('input[id^="mc_show_interest_groups_"]').uncheck(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('input[id^="mc_show_interest_groups_"]').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); [shortcodePostURL, blockPostPostURL].forEach((url) => { cy.visit(url); @@ -113,7 +116,8 @@ describe('Admin can update plugin settings', () => { // Remove mailchimp JavaScript support. cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('#mc_use_unsub_link').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_use_unsub_link').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify [shortcodePostURL, blockPostPostURL].forEach((url) => { @@ -124,7 +128,8 @@ describe('Admin can update plugin settings', () => { // Reset cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('#mc_use_unsub_link').uncheck(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_use_unsub_link').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); [shortcodePostURL, blockPostPostURL].forEach((url) => { cy.visit(url); @@ -136,7 +141,8 @@ describe('Admin can update plugin settings', () => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('#mc_double_optin').uncheck(); cy.get('#mc_update_existing').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_update_existing').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify [shortcodePostURL, blockPostPostURL].forEach((url) => { @@ -155,7 +161,8 @@ describe('Admin can update plugin settings', () => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('#mc_double_optin').check(); cy.get('#mc_update_existing').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_update_existing').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); }); it('Form data should persist if validation fails', () => { @@ -185,7 +192,7 @@ describe('Admin can update plugin settings', () => { // Step 2: Set an option different from the default const customHeader = 'My Custom Header'; cy.get('#mc_header_content').clear().type(customHeader); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('input[value="Save Changes"]:visible').first().click(); // Verify the custom header is saved cy.get('.notice.notice-success.is-dismissible') @@ -194,7 +201,7 @@ describe('Admin can update plugin settings', () => { cy.get('#mc_header_content').should('have.value', customHeader); // Step 3: Log out of the Mailchimp account - cy.get('input[value="Logout"]').click(); + cy.get('input[value="Log out"]').click(); // Verify the logout was successful cy.get('#mailchimp_sf_oauth_connect').should('exist'); @@ -264,8 +271,8 @@ describe('Admin can update plugin settings', () => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.mailchimpLogout(); cy.mailchimpLogin(); - cy.get('.mc-user h3').contains('Logged in as: '); - cy.get('input[value="Logout"]').should('exist'); + cy.get('.user-profile-name').should('be.visible'); + cy.get('input[value="Log out"]').should('exist'); cy.selectList('10up'); @@ -286,4 +293,66 @@ describe('Admin can update plugin settings', () => { }); }); }); + + it('Admin can view form preview on the settings page', () => { + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + cy.get('h2.mailchimp-sf-settings-table-title') + .contains('Form preview') + .should('be.visible'); + }); + + it('Form preview should reflect changes made on the settings page', () => { + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + cy.get('#mc_header_content').clear().type('My Custom Header'); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview .mc_custom_border_hdr').should( + 'have.text', + 'My Custom Header', + ); + + cy.get('#mc_subheader_content').clear().type('My Custom Subheader'); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview #mc_subheader').contains('My Custom Subheader'); + + cy.get('#mc_submit_text').clear().type('My Custom Button'); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview #mc_signup_submit').contains('My Custom Button'); + + // Field options + cy.get('#mc_mv_FNAME').uncheck(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview input#mc_mv_FNAME').should('not.exist'); + + cy.get('#mc_mv_LNAME').uncheck(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview input#mc_mv_LNAME').should('not.exist'); + + cy.get('#mc_mv_FNAME').check(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview input#mc_mv_FNAME').should('exist'); + + cy.get('#mc_mv_LNAME').check(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview input#mc_mv_LNAME').should('exist'); + + // Unsubscribe link + cy.get('#mc_use_unsub_link').check(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview #mc_unsub_link').should('exist'); + + cy.get('#mc_use_unsub_link').uncheck(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview #mc_unsub_link').should('not.exist'); + + // Groups + cy.get('input[id^="mc_show_interest_groups_"]').check(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview .mc_interests_header').should('exist'); + cy.get('.mailchimp-sf-form-preview .mc_interest').should('exist'); + + cy.get('input[id^="mc_show_interest_groups_"]').uncheck(); + cy.wait(1000); + cy.get('.mailchimp-sf-form-preview .mc_interests_header').should('not.exist'); + cy.get('.mailchimp-sf-form-preview .mc_interest').should('not.exist'); + }); }); diff --git a/tests/cypress/e2e/user-sync.test.js b/tests/cypress/e2e/user-sync.test.js index 2301a519..8afcf83f 100644 --- a/tests/cypress/e2e/user-sync.test.js +++ b/tests/cypress/e2e/user-sync.test.js @@ -7,17 +7,17 @@ describe('User Sync Tests', () => { cy.mailchimpLoginIfNotAlreadyLoggedIn(); }); - it('Admin can see User Sync settings page', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + it('Admin can see User Sync settings', () => { + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('.mailchimp-sf-user-sync-page').should('be.visible'); - cy.get('.form-table th').first().should('contain', 'User sync settings'); + cy.get('.mailchimp-sf-user-sync-page h2').first().should('contain', 'User sync settings'); }); it('Admin can save User Sync settings', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); // Enable auto user sync - cy.get('#enable_user_sync').check(); + cy.get('#enable_user_sync').check({ force: true }); // Select subscriber role cy.get('input[name="mailchimp_sf_user_sync_settings[user_roles][subscriber]"]').check(); @@ -28,29 +28,18 @@ describe('User Sync Tests', () => { ).check(); // Save settings + cy.get('#existing_contacts_only').trigger('change'); cy.get('#mailchimp_sf_user_sync_settings_submit').click(); // Verify success message cy.get('.notice-success').should('be.visible'); }); - it('Admin can see Start user sync CTA and skip it', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); - - // Verify CTA is visible - cy.get('.mailchimp-sf-start-user-sync-box').should('be.visible'); - - // Skip CTA - cy.get('a.skip-user-sync-cta').click(); - - // Verify CTA is hidden - cy.get('.mailchimp-sf-start-user-sync-box').should('not.exist'); - }); - ['subscribed', 'pending', 'transactional'].forEach((status) => { it(`[${status}] Admin can start user sync and validate sync results`, () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); - cy.get('#enable_user_sync').uncheck(); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + cy.get('#enable_user_sync').uncheck({ force: true }); + cy.get('#existing_contacts_only').trigger('change'); cy.get('#mailchimp_sf_user_sync_settings_submit').click(); cy.deleteWPSubscriberUser(); @@ -63,7 +52,7 @@ describe('User Sync Tests', () => { ); // Select subscriber role - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get( 'input[name="mailchimp_sf_user_sync_settings[existing_contacts_only]"]', ).uncheck(); @@ -73,10 +62,13 @@ describe('User Sync Tests', () => { ).check(); cy.get('.mailchimp-user-sync-user-roles input[type="checkbox"]').uncheck(); cy.get('input[name="mailchimp_sf_user_sync_settings[user_roles][subscriber]"]').check(); + cy.get('#existing_contacts_only').trigger('change'); cy.get('#mailchimp_sf_user_sync_settings_submit').click(); // Start sync - cy.get('a.button.button-secondary').contains('Synchronize all users').click(); + cy.get('a.mailchimp-sf-button.mailchimp-sf-button-submit.btn-primary') + .contains('Manual Sync') + .click(); // Verify sync started cy.get('.mailchimp-sf-sync-progress').should('be.visible'); @@ -86,7 +78,7 @@ describe('User Sync Tests', () => { if (attempts >= 9) return; cy.wait(10000); - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('body').then(($body) => { if ($body.find('.mailchimp-sf-sync-progress').length === 0) { return; @@ -112,8 +104,9 @@ describe('User Sync Tests', () => { }); it('Admin can sync existing contacts only', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); - cy.get('#enable_user_sync').uncheck(); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + cy.get('#enable_user_sync').uncheck({ force: true }); + cy.get('#existing_contacts_only').trigger('change'); cy.get('#mailchimp_sf_user_sync_settings_submit').click(); cy.deleteWPSubscriberUser(); @@ -126,14 +119,17 @@ describe('User Sync Tests', () => { `wp user create ${email} ${email} --role=subscriber --first_name=${firstName} --last_name=${lastName}`, ); - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); // Enable existing contacts only cy.get('input[name="mailchimp_sf_user_sync_settings[existing_contacts_only]"]').check(); + cy.get('#existing_contacts_only').trigger('change'); cy.get('#mailchimp_sf_user_sync_settings_submit').click(); cy.get('.notice-success').should('be.visible'); // Start sync - cy.get('a.button.button-secondary').contains('Synchronize all users').click(); + cy.get('a.mailchimp-sf-button.mailchimp-sf-button-submit.btn-primary') + .contains('Manual Sync') + .click(); // Verify sync started cy.get('.mailchimp-sf-sync-progress').should('be.visible'); @@ -143,7 +139,7 @@ describe('User Sync Tests', () => { if (attempts >= 9) return; cy.wait(10000); - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('body').then(($body) => { if ($body.find('.mailchimp-sf-sync-progress').length === 0) { return; @@ -164,15 +160,18 @@ describe('User Sync Tests', () => { }); it('Admin can see error logs of user sync and delete specific error log', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); - cy.get('#enable_user_sync').uncheck(); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + cy.get('#enable_user_sync').uncheck({ force: true }); + cy.get('#existing_contacts_only').trigger('change'); cy.get('.mailchimp-user-sync-user-roles input[type="checkbox"]').uncheck(); cy.get('input[name="mailchimp_sf_user_sync_settings[existing_contacts_only]"]').uncheck(); cy.get('input[name="mailchimp_sf_user_sync_settings[user_roles][administrator]"]').check(); cy.get('#mailchimp_sf_user_sync_settings_submit').click(); // Start sync - cy.get('a.button.button-secondary').contains('Synchronize all users').click(); + cy.get('a.mailchimp-sf-button.mailchimp-sf-button-submit.btn-primary') + .contains('Manual Sync') + .click(); // Verify sync started cy.get('.mailchimp-sf-sync-progress').should('be.visible'); @@ -182,7 +181,7 @@ describe('User Sync Tests', () => { if (attempts >= 9) return; cy.wait(10000); - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.get('body').then(($body) => { if ($body.find('.mailchimp-sf-sync-progress').length === 0) { return; @@ -200,7 +199,9 @@ describe('User Sync Tests', () => { // Verify error logs section cy.get('.mailchimp-sf-user-sync-errors').should('be.visible'); - cy.get('.mailchimp-sf-user-sync-errors-header h2').should('contain', 'User Sync Errors'); + cy.get( + '.mailchimp-user-sync-user-sync-errors .mailchimp-sf-user-sync-settings-field-label', + ).should('contain', 'User Sync Errors'); // Verify error log cy.get('.mailchimp-sf-user-sync-errors-table tbody tr').should('have.length', 1); @@ -220,10 +221,12 @@ describe('User Sync Tests', () => { }); it('Admin can cancel inprogress user sync', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); // Start sync - cy.get('a.button.button-secondary').contains('Synchronize all users').click(); + cy.get('a.mailchimp-sf-button.mailchimp-sf-button-submit.btn-primary') + .contains('Manual Sync') + .click(); // Cancel sync cy.get('.mailchimp-cancel-user-sync-button').click(); @@ -233,8 +236,9 @@ describe('User Sync Tests', () => { }); it('New user and user update should sync to Mailchimp', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); - cy.get('#enable_user_sync').check(); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + cy.get('#enable_user_sync').check({ force: true }); + cy.get('#existing_contacts_only').trigger('change'); cy.get('.mailchimp-user-sync-user-roles input[type="checkbox"]').uncheck(); cy.get('input[name="mailchimp_sf_user_sync_settings[existing_contacts_only]"]').uncheck(); cy.get('input[name="mailchimp_sf_user_sync_settings[user_roles][subscriber]"]').check(); @@ -250,7 +254,7 @@ describe('User Sync Tests', () => { if (attempts >= 9) return; cy.wait(10000); - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.getContactInMailchimp(email).then((res) => { if (res && res.id) { return; @@ -271,7 +275,7 @@ describe('User Sync Tests', () => { if (attempts >= 9) return; cy.wait(10000); - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options&tab=user_sync'); + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); cy.getContactInMailchimp(email).then((res) => { if (res && res.merge_fields?.FNAME) { cy.wrap(res.merge_fields?.FNAME).should('eq', firstName); diff --git a/tests/cypress/e2e/validation/address.test.js b/tests/cypress/e2e/validation/address.test.js index 5ddc2942..8f7221e5 100644 --- a/tests/cypress/e2e/validation/address.test.js +++ b/tests/cypress/e2e/validation/address.test.js @@ -31,7 +31,7 @@ describe('Address Field Validation', () => { // Set address fields (Addr 1 and City) as required cy.getListId('10up').then((listId) => { cy.updateMergeFieldByTag(listId, 'ADDRESS', { required: true }).then(() => { - cy.selectList('10up'); // Refresh list in WordPress + cy.selectList('10up', true); // Refresh list in WordPress }); }); }); @@ -40,7 +40,7 @@ describe('Address Field Validation', () => { // Cleanup: Reset address fields to optional cy.getListId('10up').then((listId) => { cy.updateMergeFieldByTag(listId, 'ADDRESS', { required: false }).then(() => { - cy.selectList('10up'); // Refresh list in WordPress + cy.selectList('10up', true); // Refresh list in WordPress }); }); }); diff --git a/tests/cypress/e2e/validation/email.test.js b/tests/cypress/e2e/validation/email.test.js index 7d5246a8..175da63c 100644 --- a/tests/cypress/e2e/validation/email.test.js +++ b/tests/cypress/e2e/validation/email.test.js @@ -27,7 +27,8 @@ describe('General merge field validation', () => { // Disable all merge fields cy.toggleMergeFields('uncheck'); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_mv_FNAME').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); }); it('Invalid email addresses fail validation', () => { diff --git a/tests/cypress/e2e/validation/validate-unrequired-fields.test.js b/tests/cypress/e2e/validation/validate-unrequired-fields.test.js index d14bf41b..f4411ecf 100644 --- a/tests/cypress/e2e/validation/validate-unrequired-fields.test.js +++ b/tests/cypress/e2e/validation/validate-unrequired-fields.test.js @@ -19,7 +19,8 @@ describe('Validate unrequired fields', () => { // Enable all merge fields cy.toggleMergeFields('check'); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_mv_FNAME').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); }); after(() => { diff --git a/tests/cypress/support/commands/mailchimpLogin.js b/tests/cypress/support/commands/mailchimpLogin.js index e439639f..fe217a75 100644 --- a/tests/cypress/support/commands/mailchimpLogin.js +++ b/tests/cypress/support/commands/mailchimpLogin.js @@ -4,8 +4,8 @@ Cypress.Commands.add('mailchimpLogout', () => { // Logout if already connected. cy.get('body').then(($body) => { - if ($body.find('input[value="Logout"]').length > 0) { - cy.get('input[value="Logout"]').click(); + if ($body.find('input[value="Log out"]').length > 0) { + cy.get('input[value="Log out"]').click(); } }); }); @@ -72,10 +72,10 @@ Cypress.Commands.add('mailchimpLoginIfNotAlreadyLoggedIn', () => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); // Log into Mailchimp account if we need to. cy.get('body').then(($body) => { - const hasLogout = $body.find('input[value="Logout"]').length > 0; + const hasLogout = $body.find('input[value="Log out"]').length > 0; if (!hasLogout) { cy.mailchimpLogin(); - cy.get('.mc-user h3').contains('Logged in as: '); + cy.get('.user-profile-name').should('be.visible'); } else { cy.log('Already logged into Mailchimp account'); } diff --git a/tests/cypress/support/commands/settings.js b/tests/cypress/support/commands/settings.js index ff1e6d39..b6fb730f 100644 --- a/tests/cypress/support/commands/settings.js +++ b/tests/cypress/support/commands/settings.js @@ -11,10 +11,19 @@ * // Select a Mailchimp list named "10up List" * cy.selectList('10up List'); */ -Cypress.Commands.add('selectList', (listName) => { +Cypress.Commands.add('selectList', (listName, force = false) => { cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); - cy.get('#mc_list_id').select(listName, { force: true }); - cy.get('input[value="Update List"]').click(); + cy.get('#mc_list_id option:selected') + .invoke('text') + .then((value) => { + if (value === listName && !force) { + // Value matches, you can log or perform actions + cy.log('Select has the expected value'); + } else { + cy.get('#mc_list_id').select(listName, { force: true }); + cy.get('input[value="Fetch list settings"]').click(); + } + }); }); /** @@ -43,7 +52,8 @@ function setDoubleOptInOption(enabled) { } else { cy.get('#mc_double_optin').uncheck(); } - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_double_optin').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); } Cypress.Commands.add('setSettingsOption', setSettingsOption); @@ -54,7 +64,8 @@ function setSettingsOption(selector, enabled) { } else { cy.get(selector).uncheck(); } - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get(selector).trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); } /** @@ -88,7 +99,8 @@ function toggleMergeFields(action) { cy.get(field).should('exist')[action](); }); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + cy.get('#mc_mv_FNAME').trigger('change'); + cy.get('input[value="Save Changes"]:visible').first().click(); }); } @@ -118,7 +130,7 @@ Cypress.Commands.add('setMergeFieldsRequired', (required, listName = '10up', fie // Set all merge fields to required in the Mailchimp test user account cy.getListId(listName).then((listId) => { cy.updateMergeFieldsByList(listId, { required }, fields).then(() => { - cy.selectList(listName); // Ensure list is selected, refreshes Mailchimp data with WP + cy.selectList(listName, true); // Ensure list is selected, refreshes Mailchimp data with WP }); }); });