Merge pull request #935 from topcoder-platform/revert-934-PROD-4406_new-dice

Revert "Prod 4406 new dice -> dev"

Author: eisbilir

.circleci/config.yml

@@ -259,7 +259,9 @@ workflows:
                       branches:
                           only:
                               - dev
-                              - PROD-4406_new-dice
+                              - justin_fixes
+                              - talent_search_fixes
+                              - PROD-4398_integrate-userflow-remove-sprig
 
             - deployQa:
                   context: org-global

package.json

@@ -246,9 +246,5 @@
         }
       }
     ]
-  },
-  "volta": {
-    "node": "16.15.0",
-    "yarn": "1.22.19"
   }
 }

src/apps/accounts/src/lib/assets/security/credential.png

@@ -1,17 +1,17 @@
 import { ReactComponent as MFAImage } from './mfa.svg'
 import { ReactComponent as AppleStore } from './apple-store.svg'
-import credentialImage from './credential.png'
+import { ReactComponent as UnSuccessfullDiceVerificationIcon } from './unsuccessful.svg'
 import diceIdLogo from './dicelogo.png'
 import diceIdLogoBig from './dicelogobig.png'
 import diceIdLogoSmall from './dicelogosmall.png'
 import googlePlay from './google-play.png'
 
 export {
     AppleStore,
-    credentialImage,
     diceIdLogo,
     diceIdLogoBig,
     diceIdLogoSmall,
     googlePlay,
     MFAImage,
+    UnSuccessfullDiceVerificationIcon,
 }

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

@@ -1,8 +1,9 @@
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { KeyedMutator } from 'swr'
+import { noop } from 'lodash'
 
-import { Button, Collapsible, FormToggleSwitch } from '~/libs/ui'
+import { Button, Collapsible, FormToggleSwitch, IconSolid, Tooltip } from '~/libs/ui'
 import { diceIdLogo, MFAImage, SettingSection, triggerSurvey } from '~/apps/accounts/src/lib'
 import { MemberMFAStatus, updateMemberMFAStatusAsync, useMemberMFAStatus, UserProfile } from '~/libs/core'
 
@@ -22,12 +23,10 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
     } = useMemberMFAStatus(props.profile.userId)
 
     const [mfaEnabled, setMFAEnabled]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
-    const [diceEnabled, setDiceEnabled]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
     useEffect(() => {
         if (mfaStatusData) {
             setMFAEnabled(mfaStatusData.mfaEnabled)
-            setDiceEnabled(mfaStatusData.diceEnabled)
         }
     }, [mfaStatusData])
 
@@ -37,9 +36,8 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                 mfaEnabled: !mfaEnabled,
             },
         })
-            .then(response => {
-                setMFAEnabled(response.result.content.mfaEnabled)
-                setDiceEnabled(response.result.content.diceEnabled)
+            .then(() => {
+                setMFAEnabled(!mfaEnabled)
                 toast.success('Your Multi Factor Authentication (MFA) status was updated.')
                 triggerSurvey()
             })
@@ -48,27 +46,6 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
             })
     }
 
-    function handleUserDiceChange(): void {
-        if (!diceEnabled) {
-            return
-        }
-
-        updateMemberMFAStatusAsync(props.profile.userId, {
-            param: {
-                diceEnabled: !diceEnabled,
-            },
-        })
-            .then(response => {
-                setMFAEnabled(response.result.content.mfaEnabled)
-                setDiceEnabled(response.result.content.diceEnabled)
-                toast.success('Your DICE credential was disabled.')
-                triggerSurvey()
-            })
-            .catch(() => {
-                toast.error('Something went wrong. Please try again later.')
-            })
-    }
-
     function handleDiceModalStatus(): void {
         setSetupDiceModalOpen(!setupDiceModalOpen)
     }
@@ -93,6 +70,7 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                         name='mfaStatus'
                         onChange={handleUserMFAChange}
                         value={mfaEnabled}
+                        disabled={mfaStatusData?.diceEnabled}
                     />
                 )}
             />
@@ -108,11 +86,12 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                 actionElement={(
                     <div className={styles.diceBtnWrap}>
                         {
-                            diceEnabled ? (
+                            mfaStatusData?.diceEnabled ? (
                                 <FormToggleSwitch
                                     name='diceEnabled'
-                                    onChange={handleUserDiceChange}
+                                    onChange={noop}
                                     value={mfaStatusData?.diceEnabled as boolean}
+                                    disabled={mfaStatusData?.diceEnabled}
                                 />
                             ) : (
                                 <Button
@@ -125,6 +104,15 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                                 />
                             )
                         }
+                        {
+                            mfaStatusData?.diceEnabled && (
+                                <Tooltip
+                                    content='Please reach out to support@topcoder.com for deactivating Dice ID.'
+                                >
+                                    <IconSolid.InformationCircleIcon />
+                                </Tooltip>
+                            )
+                        }
                     </div>
                 )}
             />

src/apps/accounts/src/settings/tabs/account/security/Security.tsx

@@ -34,12 +34,6 @@
         margin: auto;
     }
 
-    .credentialImage {
-        height: 280px;
-        width: 400px;
-        align-self: center;
-    }
-
     .diceBigLogo {
         margin: $sp-4 0;
     }