Member Profiles

.environments/.env.dev

@@ -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.prod

@@ -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.qa

@@ -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

.storybook/main.ts

@@ -32,7 +32,15 @@ const config: StorybookConfig = {
         };
     }
 
-    return config;
+    return {
+        ...config,
+        plugins: config.plugins?.filter(plugin => {
+          if (plugin.constructor.name === 'ESLintWebpackPlugin') {
+            return false
+          }
+          return true
+        }),
+    };
   }
 };
 export default config;

.vscode/components.code-snippets

@@ -26,10 +26,10 @@
         "interface ${1:ComponentName}Props {",
         "}",
         "",
-        "const ${1:ComponentName}: FC<${1:ComponentName}Props> = (props: ${1:ComponentName}Props) => {",
+        "const ${1:ComponentName}: FC<${1:ComponentName}Props> = props => {",
         "",
         "  return (",
-        "    <div className={styles['wrap']}>",
+        "    <div className={styles.wrap}>",
         "    </div>",
         "  )",
         "}",

craco.config.js

@@ -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]";
@@ -35,6 +42,7 @@ module.exports = {
             '@devCenter': resolve('src/apps/dev-center/src'),
             '@gamificationAdmin': resolve('src/apps/gamification-admin/src'),
             '@talentSearch': resolve('src/apps/talent-search/src'),
+            '@profiles': resolve('src/apps/profiles/src'),
 
             '@platform': resolve('src/apps/platform/src'),
             // aliases used in SCSS files

package.json

@@ -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",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@datadog/browser-logs": "^4.21.2",
     "@heroicons/react": "^1.0.6",
+    "@popperjs/core": "^2.11.8",
     "@sprig-technologies/sprig-browser": "^2.20.1",
     "@storybook/addon-actions": "^7.0.5",
     "@storybook/react": "^7.0.5",
@@ -32,6 +33,7 @@
     "apexcharts": "^3.36.0",
     "axios": "^1.1.2",
     "browser-cookies": "^1.2.0",
+    "city-timezones": "^1.2.1",
     "classnames": "^2.3.2",
     "contentful": "^9.2.5",
     "country-calling-code": "0.0.3",
@@ -74,13 +76,15 @@
     "react-contenteditable": "^3.3.6",
     "react-css-super-themr": "^2.2.0",
     "react-date-range": "^1.1.3",
+    "react-datepicker": "^4.14.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^11.3.2",
     "react-elastic-carousel": "^0.11.5",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-markdown": "8.0.6",
+    "react-popper": "^2.3.0",
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",
     "react-responsive": "^9.0.0-beta.5",
@@ -149,6 +153,7 @@
     "@types/node": "^18.8.5",
     "@types/reach__router": "^1.3.11",
     "@types/react": "^18.0.21",
+    "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.0.6",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-helmet": "^6.1.6",

src/.eslintrc.js

@@ -71,7 +71,7 @@ module.exports = {
             parameter: true,
             memberVariableDeclaration: true,
             callSignature: true,
-            variableDeclaration: true,
+            variableDeclaration: false,
             arrayDestructuring: false,
             objectDestructuring: true,
           },

src/apps/accounts/src/config/constants.ts

@@ -0,0 +1 @@
+export const SPRIG_CES_SURVEY_ID = 'onAccountSettingsUpdate'

src/apps/accounts/src/config/index.ts

@@ -0,0 +1 @@
+export * from './constants'

src/apps/accounts/src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from './accounts-swr'
 export * from './components'
 export * from './assets'
+export * from './sprig-survey'

src/apps/accounts/src/lib/sprig-survey.ts

@@ -0,0 +1,8 @@
+import { sprigTriggerForUser } from '~/libs/shared'
+import { UserProfile } from '~/libs/core'
+
+import { SPRIG_CES_SURVEY_ID } from '../config'
+
+export function triggerSprigSurvey({ userId }: UserProfile): void {
+    sprigTriggerForUser(SPRIG_CES_SURVEY_ID, userId)
+}

src/apps/accounts/src/settings/tabs/account/AccountTab.tsx

@@ -5,6 +5,7 @@ import { UserProfile, UserTraits } from '~/libs/core'
 import { AccountRole } from './account-role'
 import { SecuritySection } from './security'
 import { UserAndPassword } from './user-and-pass'
+import { MemberAddress } from './address'
 import styles from './AccountTab.module.scss'
 
 interface AccountTabProps {
@@ -20,6 +21,8 @@ const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
 
         <UserAndPassword profile={props.profile} memberTraits={props.memberTraits} />
 
+        <MemberAddress profile={props.profile} />
+
         <SecuritySection profile={props.profile} />
     </div>
 )

src/apps/accounts/src/settings/tabs/account/account-role/AccountRole.tsx

@@ -2,6 +2,7 @@ import { Dispatch, FC, SetStateAction, useState } from 'react'
 
 import { BaseModal, Button, Collapsible } from '~/libs/ui'
 import { authUrlLogout, updatePrimaryMemberRoleAsync, UserProfile } from '~/libs/core'
+import { triggerSprigSurvey } from '~/apps/accounts/src/lib'
 
 import styles from './AccountRole.module.scss'
 
@@ -35,6 +36,7 @@ const AccountRole: FC<AccountRoleProps> = (props: AccountRoleProps) => {
                 .then(() => {
                     setMemberRole(newRole)
                     setIsRoleChangeConfirmed(true)
+                    triggerSprigSurvey(props.profile)
                 })
                 .finally(() => {
                     setIsUpdating(false)

src/apps/accounts/src/settings/tabs/account/address/MemberAddress.module.scss

@@ -0,0 +1,27 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    margin: $sp-8 0;
+
+    .content {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        margin-bottom: 0;
+
+        @include ltelg {
+            grid-template-columns: 1fr;
+        }
+
+        >p {
+            max-width: 380px;
+        }
+
+        .form {
+            .formCTAs {
+                margin-top: $sp-4;
+                padding-top: $sp-4;
+                border-top: 2px solid $black-10;
+            }
+        }
+    }
+}