Merge pull request #777 from topcoder-platform/issue-744

Onboarding - Vertical Scroll bar is removed when opening Experience/education modals

Author: jmgasper

.circleci/config.yml

@@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
 # Stripe configs
 REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz
 REACT_APP_STRIPE_API_VERSION=2020-08-27
-# not really used anywhere
-REACT_APP_STRIPE_ADMIN_TOKEN=
-REACT_APP_STRIPE_CUSTOMER_TOKEN=
 
 # Vanilla Forums
 REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV

.environments/.env.dev

@@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
 # Stripe configs
 REACT_APP_STRIPE_API_KEY=pk_live_m3bCBVSfkfMOEp3unZFRsHXi
 REACT_APP_STRIPE_API_VERSION=2020-08-27
-# not really used anywhere
-REACT_APP_STRIPE_ADMIN_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIiwiYWRtaW5pc3RyYXRvciJdLCJpc3MiOiJodHRwczovL2FwaS50b3Bjb2Rlci1kZXYuY29tIiwiaGFuZGxlIjoidGVzdDEiLCJleHAiOjI1NjMwNzY2ODksInVzZXJJZCI6IjQwMDUxMzMzIiwiaWF0IjoxNDYzMDc2MDg5LCJlbWFpbCI6InRlc3RAdG9wY29kZXIuY29tIiwianRpIjoiYjMzYjc3Y2QtYjUyZS00MGZlLTgzN2UtYmViOGUwYWU2YTRhIn0.wKWUe0-SaiFVN-VR_-GwgFlvWaDkSbc8H55ktb9LAVw
-REACT_APP_STRIPE_CUSTOMER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg
 
 # Vanilla Forums
 REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV

.environments/.env.prod

@@ -5,9 +5,6 @@ REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
 # Stripe configs
 REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz
 REACT_APP_STRIPE_API_VERSION=2020-08-27
-# not really used anywhere
-REACT_APP_STRIPE_ADMIN_TOKEN=
-REACT_APP_STRIPE_CUSTOMER_TOKEN=
 
 # Vanilla Forums
 REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV

.environments/.env.qa

@@ -5,6 +5,13 @@ const BabelRcPlugin = require('@jackwilsdon/craco-use-babelrc');
 
 const isProd = process.env.APPMODE === "production";
 
+function getModeName() {
+    const index = process.argv.indexOf('--mode');
+    return index === -1 ? '' : process.argv[index + 1] || ''
+}
+
+console.log({buildMode: getModeName()});
+
 const localIdentName = isProd
     ? "[hash:base64:6]"
     : "[name]_[local]__[hash:base64:6]";

craco.config.js

@@ -4,10 +4,10 @@
   "private": true,
   "license": "ISC",
   "scripts": {
-    "dev": "craco start --mode ${REACT_APP_HOST_ENV:-dev}",
+    "dev": "craco start --mode ${LOGICAL_ENV:-dev}",
     "start": "bash start.sh",
-    "build": "export CI=false && craco build --mode ${REACT_APP_HOST_ENV:-prod}",
-    "build:dev": "craco build --mode ${REACT_APP_HOST_ENV:-dev}",
+    "build": "export CI=false && craco build --mode ${LOGICAL_ENV:-prod}",
+    "build:dev": "craco build --mode ${LOGICAL_ENV:-dev}",
     "demo": "npx http-server --port 443 -a 0.0.0.0 -S -C ./ssl/rootCA.crt -K ./ssl/rootCA.key -P https://local.topcoder-dev.com? --proxy-options.secure false ./build",
     "lint": "eslint -c ./src/.eslintrc.js 'src/**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "yarn lint --fix",

package.json

@@ -20,7 +20,6 @@ const OnboardingBaseModal: FC<OnboardingBaseModalProps> = (props: OnboardingBase
         size='body'
         title={props.title}
         classNames={{ modal: styles.infoModal }}
-        blockScroll
     >
         {props.children}
     </BaseModal>

src/apps/onboarding/src/components/onboarding-base-modal/index.tsx

@@ -1,6 +1,7 @@
 import { Navigate } from 'react-router-dom'
 
-import { ToolTitle } from '~/config/constants'
+import { EnvironmentConfig } from '~/config'
+import { AppSubdomain, ToolTitle } from '~/config/constants'
 import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '~/libs/core'
 
 const PageOnboarding: LazyLoadedComponent = lazyLoad(() => import('./pages/onboarding/index'), 'OnboardingWrapper')
@@ -18,7 +19,10 @@ const PageAccountDetails: LazyLoadedComponent = lazyLoad(
     'PageAccountDetails',
 )
 const toolTitle: string = ToolTitle.onboarding
-const onboardingRootRoute: string = '/onboarding'
+
+export const rootRoute: string = (
+    EnvironmentConfig.SUBDOMAIN === AppSubdomain.onboarding ? '' : `/${AppSubdomain.onboarding}`
+)
 
 export const onboardRouteId: string = `${toolTitle} Onbarding`
 
@@ -59,12 +63,13 @@ export const onboardingRoutes: ReadonlyArray<PlatformRoute> = [
                 route: '/account-details',
             },
         ],
+        domain: AppSubdomain.onboarding,
         element: <PageOnboarding />,
         id: onboardRouteId,
         rolesRequired: [
             UserRole.member,
         ],
-        route: onboardingRootRoute,
+        route: rootRoute,
         title: toolTitle,
     },
 ]

src/apps/onboarding/src/onboarding.routes.tsx

@@ -1,8 +1,12 @@
 @import "@libs/ui/styles/includes";
 
 .editMemberPropertyBtn {
+    padding: 0 !important;
+    padding-left: $sp-4 !important;
+    color: $black-100;
+
     svg {
-        width: 16px;
-        height: 16px;
+        width: 20px;
+        height: 20px;
     }
 }

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss

@@ -13,6 +13,7 @@ const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMember
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
         className={styles.editMemberPropertyBtn}
+        size='lg'
     />
 )