Merge branch 'profiles-app' of https://github.com/topcoder-platform/platform-ui into profiles-app

Author: kkartunov

.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

@@ -53,12 +53,51 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
         setIsPhotoEditMode(true)
     }
 
+    const bottomButtons = imgUrl ? (
+        <div className='d-flex gap-8 mobile-full-width'>
+            <Button
+                size='lg'
+                secondary
+                iconToLeft
+                icon={IconOutline.UploadIcon}
+                disabled={!props.memberInfo || isSaving}
+                onClick={showEditPhoto}
+                className='mt-16 mobile-flex-1'
+            >
+                change
+            </Button>
+            <Button
+                size='lg'
+                secondary
+                iconToLeft
+                icon={IconOutline.TrashIcon}
+                disabled={!props.memberInfo || isSaving}
+                onClick={handleRemovePhoto}
+                className='mt-16 mobile-flex-1'
+            >
+                delete
+            </Button>
+        </div>
+    ) : (
+        <Button
+            size='lg'
+            secondary
+            iconToLeft
+            icon={IconOutline.UploadIcon}
+            disabled={!props.memberInfo}
+            onClick={showEditPhoto}
+            className='mt-16 mobile-flex-1'
+        >
+            add image
+        </Button>
+    )
+
     return (
         <div
-            className={classNames(styles.container, props.className, 'd-flex flex-column gap-20 align-items-start')}
+            className={classNames(styles.container, props.className, 'd-flex flex-column align-items-start')}
         >
             <h3>Photo</h3>
-            <div className='d-flex gap-30'>
+            <div className='d-flex gap-30 mt-16'>
                 <div className={classNames(
                     'd-flex',
                     styles.blockImg,
@@ -78,46 +117,14 @@ const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
                         Make a great first impression to potential customers with a
                         professional photo that represents your style.
                     </span>
-                    {imgUrl ? (
-                        <div className='d-flex gap-8'>
-                            <Button
-                                size='lg'
-                                secondary
-                                iconToLeft
-                                icon={IconOutline.UploadIcon}
-                                disabled={!props.memberInfo || isSaving}
-                                onClick={showEditPhoto}
-                                className='mt-16'
-                            >
-                                change
-                            </Button>
-                            <Button
-                                size='lg'
-                                secondary
-                                iconToLeft
-                                icon={IconOutline.TrashIcon}
-                                disabled={!props.memberInfo || isSaving}
-                                onClick={handleRemovePhoto}
-                                className='mt-16'
-                            >
-                                delete
-                            </Button>
-                        </div>
-                    ) : (
-                        <Button
-                            size='lg'
-                            secondary
-                            iconToLeft
-                            icon={IconOutline.UploadIcon}
-                            disabled={!props.memberInfo}
-                            onClick={showEditPhoto}
-                            className='mt-16'
-                        >
-                            add image
-                        </Button>
-                    )}
+                    <div className='mobile-hide'>
+                        {bottomButtons}
+                    </div>
                 </div>
             </div>
+            <div className='desktop-hide full-width d-flex'>
+                {bottomButtons}
+            </div>
 
             {
                 isPhotoEditMode && props.memberInfo && (

src/apps/onboarding/src/components/FieldAvatar/index.tsx

@@ -3,11 +3,12 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import moment from 'moment'
 
-import { BaseModal, Button, InputText } from '~/libs/ui'
+import { Button, InputText } from '~/libs/ui'
 
 import DateInput from '../DateInput'
 import EducationInfo, { emptyEducationInfo } from '../../models/EducationInfo'
 import FormField from '../FormField'
+import OnboardingBaseModal from '../onboarding-base-modal'
 
 import styles from './styles.module.scss'
 
@@ -59,7 +60,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
     }, [props.editingEducation])
 
     return (
-        <BaseModal
+        <OnboardingBaseModal
             buttons={(
                 <div className='d-flex gap-16'>
                     <Button
@@ -97,12 +98,9 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
                 </div>
             )}
             onClose={props.onClose || _.noop}
-            open
-            size='body'
             title={props.editingEducation ? 'Edit Education' : 'Add Education'}
-            classNames={{ modal: styles.infoModal }}
         >
-            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start')}>
+            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start mobile-gap-16')}>
                 <div className='full-width'>
                     <InputText
                         name='collegeName'
@@ -183,7 +181,7 @@ const ModalAddEducation: FC<ModalAddEducationProps> = (props: ModalAddEducationP
                     </div>
                 </div>
             </div>
-        </BaseModal>
+        </OnboardingBaseModal>
     )
 }
 

src/apps/onboarding/src/components/modal-add-education/index.tsx

@@ -4,6 +4,10 @@
     padding: 35px 32px 32px 32px !important;
     max-width: 600px !important;
 
+    @include ltemd {
+        max-width: 375px !important;
+    }
+
     :global(.react-responsive-modal-closeButton) {
         display: flex;
         right: 32px;

src/apps/onboarding/src/components/modal-add-education/styles.module.scss

@@ -3,12 +3,13 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import moment from 'moment'
 
-import { BaseModal, Button, InputSelect, InputText } from '~/libs/ui'
+import { Button, InputSelect, InputText } from '~/libs/ui'
 import { FormInputCheckbox } from '~/apps/self-service/src/components/form-elements'
 
 import { INDUSTRIES_OPTIONS } from '../../config'
 import DateInput from '../DateInput'
 import FormField from '../FormField'
+import OnboardingBaseModal from '../onboarding-base-modal'
 import WorkInfo, { emptyWorkInfo } from '../../models/WorkInfo'
 
 import styles from './styles.module.scss'
@@ -69,7 +70,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
     }, [props.editingWork])
 
     return (
-        <BaseModal
+        <OnboardingBaseModal
             buttons={(
                 <div className='d-flex gap-16'>
                     <Button
@@ -110,12 +111,9 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                 </div>
             )}
             onClose={props.onClose || _.noop}
-            open
-            size='body'
             title={props.editingWork ? 'Edit Experience' : 'Add Experience'}
-            classNames={{ modal: styles.infoModal }}
         >
-            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start')}>
+            <div className={classNames(styles.modalContent, 'd-flex flex-column align-items-start mobile-gap-16')}>
                 <div className='full-width'>
                     <InputText
                         name='company'
@@ -227,7 +225,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                         </FormField>
                     </div>
                 </div>
-                <div className='mt-16'>
+                <div className='mt-16 mobile-mt-0'>
                     <FormInputCheckboxMiddleware
                         label='I am currently working in this role'
                         checked={workInfo.currentlyWorking}
@@ -241,7 +239,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                     />
                 </div>
             </div>
-        </BaseModal>
+        </OnboardingBaseModal>
     )
 }