From cc7290cbbde91deb970ba6c810b6585397d3aac7 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 2 Feb 2023 15:11:28 +0530 Subject: [PATCH 1/3] add logic to handle commerce plan and shared commerce priority customers --- includes/Data/Data.php | 27 +++++++- includes/Data/Flows.php | 26 ++++++++ includes/Data/Plugins.php | 117 +++++++++++++++++++++++----------- includes/LoginRedirect.php | 24 +++++-- includes/ModuleController.php | 14 ++-- 5 files changed, 161 insertions(+), 47 deletions(-) diff --git a/includes/Data/Data.php b/includes/Data/Data.php index def2d711d..8a29b2143 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -68,8 +68,28 @@ public static function current_plan() { } $current_flow = Flows::get_flow_from_params(); + if ( false !== $current_flow ) { + return array( + 'flow' => $current_flow, + 'subtype' => Flows::is_commerce_priority() ? 'wc_priority' : null, + 'type' => null, + ); + } + + $current_flow = Flows::get_flow_from_plugins(); + if ( false !== $current_flow ) { + switch ( $current_flow ) { + case 'ecommerce': + return array( + 'flow' => 'ecommerce', + 'subtype' => 'wc_priority', + 'type' => null, + ); + } + } + return array( - 'flow' => ( false !== $current_flow ) ? $current_flow : Flows::get_default_flow(), + 'flow' => Flows::get_default_flow(), 'subtype' => null, 'type' => null, ); @@ -87,6 +107,11 @@ public static function current_flow() { return $current_flow; } + $current_flow = Flows::get_flow_from_plugins(); + if ( false !== $current_flow ) { + return $current_flow; + } + $customer_data = self::customer_data(); $current_flow = Flows::get_flow_from_customer_data( $customer_data ); if ( false !== $current_flow ) { diff --git a/includes/Data/Flows.php b/includes/Data/Flows.php index b15b9765b..bca3616d2 100644 --- a/includes/Data/Flows.php +++ b/includes/Data/Flows.php @@ -1,6 +1,8 @@ array( + 'jetpack' => array( 'approved' => true, 'path' => 'jetpack/jetpack.php', ), - 'woocommerce' => array( + 'woocommerce' => array( 'approved' => true, 'path' => 'woocommerce/woocommerce.php', ), - 'wordpress-seo' => array( + 'wordpress-seo' => array( 'approved' => true, 'path' => 'wordpress-seo/wp-seo.php', ), - 'wpforms-lite' => array( + 'wpforms-lite' => array( 'approved' => true, 'path' => 'wpforms-lite/wpforms.php', ), - 'google-analytics-for-wordpress' => array( + 'google-analytics-for-wordpress' => array( 'approved' => true, 'path' => 'google-analytics-for-wordpress/googleanalytics.php', ), - 'optinmonster' => array( + 'optinmonster' => array( 'approved' => true, 'path' => 'optinmonster/optin-monster-wp-api.php', ), - 'yith-woocommerce-ajax-search' => array( + 'yith-woocommerce-ajax-search' => array( 'approved' => true, 'path' => 'yith-woocommerce-ajax-search/init.php', ), - 'creative-mail-by-constant-contact' => array( + 'creative-mail-by-constant-contact' => array( 'approved' => true, 'path' => 'creative-mail-by-constant-contact/creative-mail-plugin.php', ), @@ -100,18 +100,19 @@ final class Plugins { ), ); - /** - * @var array Initial plugins to be installed classified based on the hosting plan. - * - * Key 'default' contains a list of default plugins to be installed irrespective of the plan. - * Key contains a Key 'default' and a list of Key 's. - * Key => 'default' contains a list of default plugin installs for . - * Key => contains a list of plugins to be installed for a particular . - * - * The final queue of Plugins to be installed makes use of a max heap and hence the greater the number the earlier - * a Plugin will be placed for install in the queue. This will also allow us to - * prevent entering negative numbers when queueing a plugin for earlier installs. - */ + /** + * Initial plugins to be installed classified based on the hosting plan. + * Key 'default' contains a list of default plugins to be installed irrespective of the plan. + * Key contains a Key 'default' and a list of Key 's. + * Key => 'default' contains a list of default plugin installs for . + * Key => contains a list of plugins to be installed for a particular . + * + * The final queue of Plugins to be installed makes use of a max heap and hence the greater the number the earlier + * a Plugin will be placed for install in the queue. This will also allow us to + * prevent entering negative numbers when queueing a plugin for earlier installs. + * + * @var array + */ protected static $init_list = array( 'default' => array( array( @@ -146,12 +147,14 @@ final class Plugins { ), ), 'ecommerce' => array( - 'default' => array( + 'default' => array( array( 'slug' => 'woocommerce', 'activate' => true, 'priority' => 260, ), + ), + 'wc_standard' => array( array( 'slug' => 'nfd_slug_yith_woocommerce_customize_myaccount_page', 'activate' => true, @@ -178,27 +181,64 @@ final class Plugins { 'priority' => 258, ), ), - 'wc_premium' => array( + 'wc_premium' => array( + array( + 'slug' => 'nfd_slug_yith_woocommerce_customize_myaccount_page', + 'activate' => true, + 'priority' => 257, + ), + array( + 'slug' => 'nfd_slug_yith_woocommerce_gift_cards', + 'activate' => true, + 'priority' => 100, + ), + array( + 'slug' => 'nfd_slug_yith_woocommerce_wishlist', + 'activate' => true, + 'priority' => 80, + ), + array( + 'slug' => 'nfd_slug_yith_shippo_shippings_for_woocommerce', + 'activate' => true, + 'priority' => 259, + ), + array( + 'slug' => 'nfd_slug_yith_paypal_payments_for_woocommerce', + 'activate' => true, + 'priority' => 258, + ), array( 'slug' => 'nfd_slug_ecomdash_wordpress_plugin', 'activate' => true, 'priority' => 20, ), ), + 'wc_priority' => array(), ), ); - // [TODO] Think about deprecating this approach and move to nfd_slugs for url based installs. + // [TODO] Think about deprecating this approach and move to nfd_slugs for url based installs. + /** + * Contains a whitelist of zip url's. + * + * @var array + */ protected static $urls = array( 'https://downloads.wordpress.org/plugin/google-analytics-for-wordpress.8.5.3.zip' => true, ); - + /** + * Contains a list of approved domains for zip based installs. + * + * @var array + */ protected static $domains = array( 'downloads.wordpress.org' => true, 'nonapproveddomain.com' => null, ); /** + * Returns a list of whitelisted WordPress Plugin slugs. + * * @return array */ public static function get_wp_slugs() { @@ -206,6 +246,8 @@ public static function get_wp_slugs() { } /** + * Returns a list of whitelisted Plugin URL's. + * * @return array */ public static function get_urls() { @@ -213,6 +255,8 @@ public static function get_urls() { } /** + * Returns a list of whitelisted Plugin URL domains. + * * @return array */ public static function get_domains() { @@ -240,7 +284,7 @@ public static function get() { */ public static function get_squashed() { return array_merge( - array_filter( self::$wp_slugs, array( __CLASS__, 'check_approved' ) ) , + array_filter( self::$wp_slugs, array( __CLASS__, 'check_approved' ) ), array_filter( self::$nfd_slugs, array( __CLASS__, 'check_approved' ) ) ); } @@ -260,14 +304,13 @@ public static function get_approved() { } /** - * @param array $value - * - * Checks if $value has been approved. + * Checks if a Plugin slug has been approved. * + * @param array $value The Plugin slug that will be checked. * @return boolean */ private static function check_approved( $value ) { - return $value['approved'] === true; + return true === $value['approved']; } /** @@ -284,7 +327,7 @@ public static function get_init() { if ( isset( self::$init_list[ $plan_flow ]['default'] ) ) { $init_list = array_merge( $init_list, self::$init_list[ $plan_flow ]['default'] ); } - if ( $plan_subtype !== 'default' && isset( self::$init_list[ $plan_flow ][ $plan_subtype ] ) ) { + if ( 'default' !== $plan_subtype && isset( self::$init_list[ $plan_flow ][ $plan_subtype ] ) ) { $init_list = array_merge( $init_list, self::$init_list[ $plan_flow ][ $plan_subtype ] ); } } diff --git a/includes/LoginRedirect.php b/includes/LoginRedirect.php index a7c583313..65c18f3fa 100644 --- a/includes/LoginRedirect.php +++ b/includes/LoginRedirect.php @@ -1,15 +1,26 @@ diff( $install_date ); + $interval_in_hours = ( $interval->days * 24 ) + $interval->h; if ( ! ( $redirect_option - && \get_option( Options::get_option_name( 'coming_soon', false ), 'true' ) ) === 'true' ) { + && \get_option( Options::get_option_name( 'coming_soon', false ), 'true' ) === 'true' + && ( $interval_in_hours <= 72 ) ) ) { return $redirect; } if ( self::is_administrator( $user ) ) { - return \admin_url( '/index.php?page=' . 'nfd-onboarding' ); + return \admin_url( '/index.php?page=nfd-onboarding' ); } return $redirect; diff --git a/includes/ModuleController.php b/includes/ModuleController.php index d1cec8210..49b93584c 100644 --- a/includes/ModuleController.php +++ b/includes/ModuleController.php @@ -8,6 +8,7 @@ use function NewfoldLabs\WP\ModuleLoader\activate; use function NewfoldLabs\WP\ModuleLoader\deactivate; + /** * Class ModuleController */ @@ -50,9 +51,6 @@ public static function module_switcher() { // Check if the Module Does Exist if ( ModuleRegistry::get( $module_name ) ) { - // Enable the Redirect for Onboarding SPA - LoginRedirect::enable_redirect(); - // Activate the Module activate( $module_name ); } @@ -75,7 +73,7 @@ public static function is_ecom_customer( $customer_data ) { // August 18 $new_cust_date = gmdate( 'Y-m-d H:i:s', strtotime( '2022-08-18T15:30:00.000Z' ) ); - if ( isset( $customer_data['plan_subtype'] ) && isset( $customer_data['signup_date'] ) ) { + if ( isset( $customer_data['signup_date'] ) ) { // Convert the Customer Signup Date to a Php known format $cust_signup_date = gmdate( 'Y-m-d H:i:s', strtotime( $customer_data['signup_date'] ) ); @@ -84,7 +82,13 @@ public static function is_ecom_customer( $customer_data ) { $is_new_cust = $cust_signup_date >= $new_cust_date; // Check if the Customer has an Ecom Plan - $has_ecom_plan = Flows::is_ecommerce_plan( $customer_data['plan_subtype'] ); + $has_ecom_plan = false; + if ( isset( $customer_data['plan_subtype'] ) ) { + $has_ecom_plan = Flows::is_ecommerce_plan( $customer_data['plan_subtype'] ); + } + if ( ! $has_ecom_plan ) { + $has_ecom_plan = Flows::is_commerce_priority(); + } if ( $has_ecom_plan && $is_new_cust ) { return true; From 4c36dd698bb29464b91246f8188f84597ca69f12 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 2 Feb 2023 15:38:09 +0530 Subject: [PATCH 2/3] handle commerce priority in site features as well --- includes/Data/SiteFeatures.php | 236 ++++++++++++++++++++------------- 1 file changed, 146 insertions(+), 90 deletions(-) diff --git a/includes/Data/SiteFeatures.php b/includes/Data/SiteFeatures.php index 4e290f47d..3ef0a7a34 100644 --- a/includes/Data/SiteFeatures.php +++ b/includes/Data/SiteFeatures.php @@ -16,96 +16,139 @@ public static function get_site_features() { return array( 'wp-setup' => array(), 'ecommerce' => array( - 'jetpack' => array( - 'slug' => 'jetpack', - 'icon' => '--site-features-security', - 'title' => 'Security, Speed & Growth', - 'subtitle' => 'Powered by Jetpack', - 'desc' => 'Jetpack includes dozens of powerful, unique capabilities for your WordPress sites from Automattic.', - 'selected' => false, - 'shown' => true, + 'default' => array( + 'jetpack' => array( + 'slug' => 'jetpack', + 'icon' => '--site-features-security', + 'title' => 'Security, Speed & Growth', + 'subtitle' => 'Powered by Jetpack', + 'desc' => 'Jetpack includes dozens of powerful, unique capabilities for your WordPress sites from Automattic.', + 'selected' => false, + 'shown' => true, + ), + 'wpforms-lite' => array( + 'slug' => 'wpforms-lite', + 'icon' => '--site-features-form', + 'title' => 'Forms', + 'subtitle' => 'Powered by WP Forms', + 'desc' => 'Five million people build smarter forms and surveys with WPForms from Awesome Motive.', + 'selected' => false, + 'shown' => true, + ), + 'google-analytics-for-wordpress' => array( + 'slug' => 'google-analytics-for-wordpress', + 'icon' => '--site-features-analytics', + 'title' => 'Site Traffic', + 'subtitle' => 'Powered by MonsterInsights', + 'desc' => 'See the opportunities in your website analytics traffic data using MonsterInsights from Awesome Motive.', + 'selected' => false, + 'shown' => true, + ), + 'wordpress-seo' => array( + 'slug' => 'wordpress-seo', + 'icon' => '--site-features-share', + 'title' => 'Search Engine Optimization', + 'subtitle' => 'Powered by Yoast', + 'desc' => 'Get more traffic to your WordPress site with powerful analysis and tools from our colleagues at Yoast.', + 'selected' => false, + 'shown' => true, + ), + 'creative-mail-by-constant-contact' => array( + 'slug' => 'creative-mail-by-constant-contact', + 'icon' => '--site-features-email', + 'title' => 'Email Newsletters', + 'subtitle' => 'Powered by Creative Email', + 'desc' => 'A professional logo builder, marketing automations with WooCommerce and social management -- CreativeMail is a whole lot more than mail from Constant Contact.', + 'selected' => false, + 'shown' => true, + ), + 'optinmonster' => array( + 'slug' => 'optinmonster', + 'icon' => '--site-features-lead', + 'title' => 'Lead Generation', + 'subtitle' => 'Powered by Optin Monster', + 'desc' => 'Connect with website visitors using a proven kit of tools for growth using this offering from Awesome Motive.', + 'selected' => false, + 'shown' => true, + ), ), - 'wpforms-lite' => array( - 'slug' => 'wpforms-lite', - 'icon' => '--site-features-form', - 'title' => 'Forms', - 'subtitle' => 'Powered by WP Forms', - 'desc' => 'Five million people build smarter forms and surveys with WPForms from Awesome Motive.', - 'selected' => false, - 'shown' => true, + 'wc_standard' => array( + 'yith-woocommerce-ajax-search' => array( + 'slug' => 'yith-woocommerce-ajax-search', + 'icon' => '--site-features-search', + 'title' => 'Enhanced Product Search', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Give your visitors great search experiences with this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), + 'nfd_slug_yith_woocommerce_ajax_product_filter' => array( + 'slug' => 'nfd_slug_yith_woocommerce_ajax_product_filter', + 'icon' => '--site-features-filter', + 'title' => 'Enhanced Product Filters', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Give your visitors powerful tools to discover your great products with this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), + 'nfd_slug_yith_woocommerce_booking' => array( + 'slug' => 'nfd_slug_yith_woocommerce_booking', + 'icon' => '--site-features-bookingcalendar', + 'title' => 'Bookings & Appointments', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Have visitors book meetings and services with you, accepting payment and more using this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), + 'nfd_slug_yith_woocommerce_wishlist' => array( + 'slug' => 'nfd_slug_yith_woocommerce_wishlist', + 'icon' => '--site-features-wishlist', + 'title' => 'Product Wishlists', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Let discerning shoppers curate their selections with a system of favorites using this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), ), - 'google-analytics-for-wordpress' => array( - 'slug' => 'google-analytics-for-wordpress', - 'icon' => '--site-features-analytics', - 'title' => 'Site Traffic', - 'subtitle' => 'Powered by MonsterInsights', - 'desc' => 'See the opportunities in your website analytics traffic data using MonsterInsights from Awesome Motive.', - 'selected' => false, - 'shown' => true, - ), - 'wordpress-seo' => array( - 'slug' => 'wordpress-seo', - 'icon' => '--site-features-share', - 'title' => 'Search Engine Optimization', - 'subtitle' => 'Powered by Yoast', - 'desc' => 'Get more traffic to your WordPress site with powerful analysis and tools from our colleagues at Yoast.', - 'selected' => false, - 'shown' => true, - ), - 'creative-mail-by-constant-contact' => array( - 'slug' => 'creative-mail-by-constant-contact', - 'icon' => '--site-features-email', - 'title' => 'Email Newsletters', - 'subtitle' => 'Powered by Creative Email', - 'desc' => 'A professional logo builder, marketing automations with WooCommerce and social management -- CreativeMail is a whole lot more than mail from Constant Contact.', - 'selected' => false, - 'shown' => true, - ), - 'yith-woocommerce-ajax-search' => array( - 'slug' => 'yith-woocommerce-ajax-search', - 'icon' => '--site-features-search', - 'title' => 'Enhanced Product Search', - 'subtitle' => 'Powered by YITH', - 'desc' => 'Give your visitors great search experiences with this exclusive offering from our colleagues at YITH.', - 'selected' => false, - 'shown' => true, - ), - 'nfd_slug_yith_woocommerce_ajax_product_filter' => array( - 'slug' => 'nfd_slug_yith_woocommerce_ajax_product_filter', - 'icon' => '--site-features-filter', - 'title' => 'Enhanced Product Filters', - 'subtitle' => 'Powered by YITH', - 'desc' => 'Give your visitors powerful tools to discover your great products with this exclusive offering from our colleagues at YITH.', - 'selected' => false, - 'shown' => true, - ), - 'nfd_slug_yith_woocommerce_booking' => array( - 'slug' => 'nfd_slug_yith_woocommerce_booking', - 'icon' => '--site-features-bookingcalendar', - 'title' => 'Bookings & Appointments', - 'subtitle' => 'Powered by YITH', - 'desc' => 'Have visitors book meetings and services with you, accepting payment and more using this exclusive offering from our colleagues at YITH.', - 'selected' => false, - 'shown' => true, - ), - 'nfd_slug_yith_woocommerce_wishlist' => array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'icon' => '--site-features-wishlist', - 'title' => 'Product Wishlists', - 'subtitle' => 'Powered by YITH', - 'desc' => 'Let discerning shoppers curate their selections with a system of favorites using this exclusive offering from our colleagues at YITH.', - 'selected' => false, - 'shown' => true, - ), - 'optinmonster' => array( - 'slug' => 'optinmonster', - 'icon' => '--site-features-lead', - 'title' => 'Lead Generation', - 'subtitle' => 'Powered by Optin Monster', - 'desc' => 'Connect with website visitors using a proven kit of tools for growth using this offering from Awesome Motive.', - 'selected' => false, - 'shown' => true, + 'wc_premium' => array( + 'yith-woocommerce-ajax-search' => array( + 'slug' => 'yith-woocommerce-ajax-search', + 'icon' => '--site-features-search', + 'title' => 'Enhanced Product Search', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Give your visitors great search experiences with this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), + 'nfd_slug_yith_woocommerce_ajax_product_filter' => array( + 'slug' => 'nfd_slug_yith_woocommerce_ajax_product_filter', + 'icon' => '--site-features-filter', + 'title' => 'Enhanced Product Filters', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Give your visitors powerful tools to discover your great products with this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), + 'nfd_slug_yith_woocommerce_booking' => array( + 'slug' => 'nfd_slug_yith_woocommerce_booking', + 'icon' => '--site-features-bookingcalendar', + 'title' => 'Bookings & Appointments', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Have visitors book meetings and services with you, accepting payment and more using this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), + 'nfd_slug_yith_woocommerce_wishlist' => array( + 'slug' => 'nfd_slug_yith_woocommerce_wishlist', + 'icon' => '--site-features-wishlist', + 'title' => 'Product Wishlists', + 'subtitle' => 'Powered by YITH', + 'desc' => 'Let discerning shoppers curate their selections with a system of favorites using this exclusive offering from our colleagues at YITH.', + 'selected' => false, + 'shown' => true, + ), ), + 'wc_priority' => array(), ), ); } @@ -116,11 +159,24 @@ public static function get_site_features() { * @return array */ private static function mark_initial_plugins() { - $flow = Data::current_flow(); + $plan_data = Data::current_plan(); + $plan_flow = $plan_data['flow']; + $plan_subtype = $plan_data['subtype']; $installed_plugins = Plugins::get_init(); - // Get a Copy of the list for alteration - $site_features_marked = self::get_site_features()[ $flow ]; + $site_features_marked = array(); + if ( $plan_flow && isset( self::get_site_features()[ $plan_flow ] ) ) { + if ( isset( self::get_site_features()[ $plan_flow ]['default'] ) ) { + $site_features_marked = array_merge( $site_features_marked, self::get_site_features()[ $plan_flow ]['default'] ); + } + if ( 'default' !== $plan_subtype && isset( self::get_site_features()[ $plan_flow ][ $plan_subtype ] ) ) { + $site_features_marked = array_merge( $site_features_marked, self::get_site_features()[ $plan_flow ][ $plan_subtype ] ); + } + } + + if ( empty( $site_features_marked ) ) { + return array(); + } foreach ( $installed_plugins as $installed_plugin ) { if ( isset( $site_features_marked[ $installed_plugin['slug'] ] ) ) { From 93032525381b372b75444ee4be74cb3fdc23eb85 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 7 Feb 2023 18:32:04 +0530 Subject: [PATCH 3/3] fix site features checkbox dropdown --- .../CheckboxTemplate/CheckboxItem/index.js | 5 +- .../CheckboxItem/stylesheet.scss | 229 +++++++++--------- 2 files changed, 121 insertions(+), 113 deletions(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js index 35368719f..b2c91c1b1 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js @@ -109,7 +109,10 @@ const CheckboxItem = ( { { showDescription && ( - +
{ desc }
 ) } diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index 5649992ef..5a607410f 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -7,115 +7,120 @@ $main-border-main: var(--nfd-onboarding-primary-alt); $box-shadow: var(--nfd-onboarding-light-gray-highlighted); .checkbox-item { - margin: 12px; - padding: 16px; - margin-top: 16px; - background: $main-color-light; - border: 1px solid $white-offset; - width: clamp(15rem, 25vw, 35rem); - box-shadow: 0px 2px 8px 2px rgba(204, 204, 204, 0.175295); - - &-container{ - display: flex; - align-items: center; - justify-content: flex-start; - } - - &-checkbox{ - padding: 6px; - display: flex; - align-items: center; - justify-content: center; - } - - &__contents{ - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - &-icon{ - width: 45px; - height: 45px; - display: flex; - margin-right: 16px; - border-radius: 50%; - align-items: center; - background: #F0F0F0; - justify-content: center; - - &--selected { - background: $main-color-dark !important; - } - - &--shown { - background: #F0F0F0; - } - } - - &-text { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - - &-title{ - color: #0D0D0D; - line-height: 18px; - margin-bottom: 6px; - font-size: clamp(0.9rem, 2vw, 1rem); - - &--selected { - color: $main-color-dark; - } - } - - &-subtitle { - color: #343434; - font-weight: 200; - line-height: 18px; - font-size: clamp(0.82rem, 2vw, 0.9rem); - } - } - - &-help { - cursor: pointer; - } - - } - - &--selected { - background: rgba($main-color, 0.2); - border: 1px solid rgba($main-color, 0.6); - box-shadow: 0px 2px 8px 2px rgba($white-offset, 0.8); - } - - &--shown { - border-bottom: none; - background: $box-shadow; - border-radius: 2px 2px 0px 0px; - border-top: 1px solid rgba($main-color, 0.1); - border-left: 1px solid rgba($main-color, 0.1); - border-right: 1px solid rgba($main-color, 0.1); - } - - &__desc { - z-index: 2; - padding: 16px; - border-top: none; - margin-left: 12px; - margin-top: -12px; - position: absolute; - font-style: italic; - background: $box-shadow; - border-radius: 0px 0px 2px 2px; - transform-origin: top center; - width: clamp(15rem, 25vw, 35rem); - font-size: clamp(0.82rem, 2vw, 0.9rem); - border-left: 1px solid rgba($main-color, 0.1); - border-right: 1px solid rgba($main-color, 0.1); - border-bottom: 1px solid rgba($main-color, 0.1); - box-shadow: 0px 11px 8px -3px rgba($main-color, 0.20); - } -} \ No newline at end of file + margin: 12px; + padding: 16px; + margin-top: 16px; + background: $main-color-light; + border: 1px solid $white-offset; + width: clamp(15rem, 25vw, 35rem); + box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); + + &-container { + display: flex; + align-items: center; + justify-content: flex-start; + } + + &-checkbox { + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + } + + &__contents { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + &-icon { + width: 45px; + height: 45px; + display: flex; + margin-right: 16px; + border-radius: 50%; + align-items: center; + background: #f0f0f0; + justify-content: center; + + &--selected { + background: $main-color-dark !important; + } + + &--shown { + background: #f0f0f0; + } + } + + &-text { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + + &-title { + color: #0d0d0d; + line-height: 18px; + margin-bottom: 6px; + font-size: clamp(0.9rem, 2vw, 1rem); + + &--selected { + color: $main-color-dark; + } + } + + &-subtitle { + color: #343434; + font-weight: 200; + line-height: 18px; + font-size: clamp(0.82rem, 2vw, 0.9rem); + } + } + + &-help { + cursor: pointer; + } + + } + + &--selected { + background: rgba($main-color, 0.2); + border: 1px solid rgba($main-color, 0.6); + box-shadow: 0 2px 8px 2px rgba($white-offset, 0.8); + } + + &--shown { + border-bottom: none; + background: $box-shadow; + border-radius: 2px 2px 0 0; + border-top: 1px solid rgba($main-color, 0.1); + border-left: 1px solid rgba($main-color, 0.1); + border-right: 1px solid rgba($main-color, 0.1); + } + + &__dropdown { + position: relative; + z-index: 2; + } + + &__desc { + z-index: 2; + padding: 16px; + border-top: none; + margin-left: 12px; + margin-top: -12px; + position: absolute; + font-style: italic; + background: $box-shadow; + border-radius: 0 0 2px 2px; + transform-origin: top center; + width: clamp(15rem, 25vw, 35rem); + font-size: clamp(0.82rem, 2vw, 0.9rem); + border-left: 1px solid rgba($main-color, 0.1); + border-right: 1px solid rgba($main-color, 0.1); + border-bottom: 1px solid rgba($main-color, 0.1); + box-shadow: 0 11px 8px -3px rgba($main-color, 0.2); + } +}