diff --git a/assets/images/form-example-connect.png b/assets/images/form-example-connect.png new file mode 100644 index 00000000..d99de54b Binary files /dev/null and b/assets/images/form-example-connect.png differ diff --git a/assets/sass/_admin-connect.scss b/assets/sass/_admin-connect.scss index e684fa4e..8ad0a098 100644 --- a/assets/sass/_admin-connect.scss +++ b/assets/sass/_admin-connect.scss @@ -41,7 +41,7 @@ text-align: left; } - &::before{ + &.connected::before { width: 46px; height: 46px; position: absolute; @@ -205,14 +205,117 @@ } } } - .ctct-connection-notice { - color: variables.$color-red; + + .ctct-connection-notice { + color: variables.$color-red; } } +.ctct-wrap { + margin: 35px auto 0; + padding: 35px 45px 0; -// Connection Details + max-width: 850px; + background-color: variables.$color-connect-background; + border-radius: 12px; + border: solid variables.$color-connect-border 1px; + box-shadow: 0 0 2px variables.$color-connect-text; + + .not-connected { + box-sizing: border-box; + + * { + box-sizing: border-box; + } + a { + color: variables.$color-connect-button-primary; + } + + + color: variables.$color-connect-text; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 20px; + + + @include mixins.wider-than('small') { + flex-direction: row; + } + + h2 { + color: variables.$color-connect-text; + font-size: 1.8rem; + line-height: 1.5; + margin-top: 0; + } + + .ctct-logo { + background: transparent url('../images/ctct_ripple.svg') no-repeat; + background-size: 75%; + height: 50px; + width: 50px; + } + .ctct-cta-left, + .ctct-cta-right { + flex: 2 1; + + .button.ctct-button { + border-radius: 8px; + color: variables.$color-connect-button-secondary; + font-size: 16px; + height: auto; + line-height: 1; + padding: 14px 30px; + transition: all 0.15s ease; + + &.button-blue { + background-color: variables.$color-connect-button-primary; + border: 1px solid color.adjust(variables.$color-connect-button-primary, $lightness: -10%); + color: variables.$color-white; + + &:hover, + &:focus { + color: variables.$color-white; + background-color: color.adjust(variables.$color-connect-button-primary, $lightness: 10%); + } + } + &.ctct-signup { + background: transparent; + border-color: variables.$color-connect-button-secondary; + color: variables.$color-connect-button-secondary; + } + } + } + + .ctct-cta-left { + flex: 2; + .cta-buttons { + display: flex; + gap: 10px; + flex-direction: column; + text-align: center; + @include mixins.wider-than('small') { + flex-direction: row; + } + @include mixins.wider-than('small') { + text-align: left; + } + } + } + + .ctct-cta-right { + flex: 1; + } + } + + .ctct-connection-notice { + color: variables.$color-red; + } +} + +// Connection Details .ctct-connected-wrap{ .ctct-connection-details{ @@ -287,27 +390,6 @@ } } - -// Connect to GA - -.ctct-connected-opt-in{ - display: none; - width: 100%; - text-align: left; - - .ctct-connect-ga-optin{ - display: flex; - flex-wrap: nowrap; - padding: 15px 0 0; - - .button{ - text-align: center; - margin: 0 10px 0 0; - width: auto; - } - } -} - .ctct-error { background: none !important; border: 1px solid variables.$color-red; diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index a537f4aa..589eb0c2 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -40,6 +40,13 @@ $color-modal-text: #555; $color-light-silver: #747e88; $color-med-gray: #999; +// connect page +$color-connect-border: #DCE2EC; +$color-connect-background: #f7f9fd; +$color-connect-text: #3F4B63; +$color-connect-button-primary: #186DED; +$color-connect-button-secondary: #8D9BB6; + // box model $padding: 1em; $radius: 4px; diff --git a/includes/class-connect.php b/includes/class-connect.php index 247cf446..4ad06249 100644 --- a/includes/class-connect.php +++ b/includes/class-connect.php @@ -149,10 +149,7 @@ public function admin_page_display() { wp_localize_script( 'ctct_form', 'ctctTexts', [ 'disconnectconfirm' => esc_html__( 'Are you sure you want to disconnect?', 'constant-contact-forms' ) ] ); wp_enqueue_script( 'ctct_form' ); - ?> -
- - get_api()->get_api_token() ) : + if ( constant_contact()->get_api()->get_api_token() ) : $heading = esc_html__( 'Account connected!', 'constant-contact-forms' ); $description = esc_html__( 'You are connected to the Constant Contact account shown below.', 'constant-contact-forms' ); @@ -161,19 +158,20 @@ public function admin_page_display() { $description = esc_html__( 'Issues with reauthentication for tokens occurred and a manual disconnect and reconnect is needed.', 'constant-contact-forms' ); } ?> -
-
-

-

- -

-
-

- +

+
+
+

+

+

-

- +

+ +

+

+ get_api()->get_account_info(); @@ -190,67 +188,72 @@ public function admin_page_display() { } catch ( Exception $ex ) { esc_html_e( 'There was an issue with retrieving connected account information. Please try again.', 'constant-contact-forms' ); } - ?> -

-
-
-

- -

-

- contact_email ) . '">' . esc_html( $account->contact_email ) . ''; - } - ?> -

-
-
-

- -

-
- - - -
+ ?> +

+
+
+

+ +

+

+ contact_email ) . '">' . esc_html( $account->contact_email ) . ''; + } + ?> +

+
+
+

+ +

+
+ + + +
+
-
- -
- - -
-
-

-

-

- -
-
- -

-

- - +
+ + + +
+
+

+

+

+ +
+
+ +

+

+ + +
-
- + -

- -

- get_api()->get_authorization_url(); + $auth_link = add_query_arg( + [ + 'rmc' => 'wp_connect_connect' + ], + $auth_link + ); + + $code_link = add_query_arg( + [ + 'post_type' => 'ctct_forms', + 'page' => 'ctct_options_settings_auth', + ], + admin_url( 'edit.php' ) + ); $env_types = [ 'local', 'development', 'staging' ]; $duplicate_account_notification = ''; @@ -260,81 +263,80 @@ public function admin_page_display() { ); } ?> - -

-

- -

+
-

- - - -

- -
- +
+