Add configure user access step for Google

Author: LauraBeatris

packages/localizations/src/en-US.ts

@@ -603,13 +603,13 @@ export const enUS: LocalizationResource = {
           },
         },
         configureUserAccess: {
-          headerSubtitle: 'Configure users access to the enterprise application',
+          headerSubtitle: 'Enable your Google Workspace SAML workspace',
           assignUsersInstructions: {
             paragraph1:
               "Once the configuration is complete in Google, you'll be redirected to the app's overview page.",
-            step1: 'Open the <bold>User access</bold> section',
-            step2: 'Select <bold>ON</bold> for everyone',
-            step3: 'Select <bold>Save</bold>',
+            step1: 'Open the <bold>User access</bold> section.',
+            step2: 'Select <bold>ON</bold> for everyone.',
+            step3: 'Select <bold>Save</bold>.',
             paragraph2:
               'Google may take up to 24 hours to propagate these changes. The connection will remain inactive until they take effect.',
           },

packages/shared/src/types/localization.ts

@@ -1656,7 +1656,6 @@ export type __internal_LocalizationResource = {
         configureUserAccess: {
           headerSubtitle: LocalizationValue;
           assignUsersInstructions: {
-            title: LocalizationValue;
             paragraph1: LocalizationValue;
             step1: LocalizationValue;
             step2: LocalizationValue;

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlGoogleConfigureSteps.tsx

@@ -68,6 +68,16 @@ export const SamlGoogleConfigureSteps = (): JSX.Element => {
         </Step.Header>
         <SamlGoogleAttributeMappingStep />
       </Wizard.Step>
+
+      <Wizard.Step id='configure-user-access'>
+        <Step.Header
+          title={localizationKeys('configureSSO.configureStep.samlGoogle.mainHeaderTitle')}
+          description={localizationKeys('configureSSO.configureStep.samlGoogle.configureUserAccess.headerSubtitle')}
+        >
+          <InnerStepCounter />
+        </Step.Header>
+        <SamlGoogleConfigureUserAccessStep />
+      </Wizard.Step>
     </>
   );
 };
@@ -561,3 +571,78 @@ const SamlGoogleAttributeMappingStep = (): JSX.Element => {
     </>
   );
 };
+
+const SamlGoogleConfigureUserAccessStep = (): JSX.Element => {
+  const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
+
+  return (
+    <>
+      <Step.Body>
+        <Step.Section sx={theme => ({ gap: theme.space.$3 })}>
+          <Text
+            as='p'
+            colorScheme='secondary'
+            localizationKey={localizationKeys(
+              'configureSSO.configureStep.samlGoogle.configureUserAccess.assignUsersInstructions.paragraph1',
+            )}
+          />
+
+          <Col
+            elementDescriptor={descriptors.configureSSOInstructionsList}
+            as='ul'
+            sx={theme => ({
+              gap: theme.space.$1x5,
+              margin: 0,
+              paddingInlineStart: theme.space.$5,
+              listStyleType: 'disc',
+            })}
+          >
+            <Text
+              elementDescriptor={descriptors.configureSSOInstructionsListItem}
+              as='li'
+              colorScheme='secondary'
+              localizationKey={localizationKeys(
+                'configureSSO.configureStep.samlGoogle.configureUserAccess.assignUsersInstructions.step1',
+              )}
+            />
+            <Text
+              elementDescriptor={descriptors.configureSSOInstructionsListItem}
+              as='li'
+              colorScheme='secondary'
+              localizationKey={localizationKeys(
+                'configureSSO.configureStep.samlGoogle.configureUserAccess.assignUsersInstructions.step2',
+              )}
+            />
+            <Text
+              elementDescriptor={descriptors.configureSSOInstructionsListItem}
+              as='li'
+              colorScheme='secondary'
+              localizationKey={localizationKeys(
+                'configureSSO.configureStep.samlGoogle.configureUserAccess.assignUsersInstructions.step3',
+              )}
+            />
+          </Col>
+
+          <Text
+            as='p'
+            colorScheme='secondary'
+            localizationKey={localizationKeys(
+              'configureSSO.configureStep.samlGoogle.configureUserAccess.assignUsersInstructions.paragraph2',
+            )}
+          />
+        </Step.Section>
+      </Step.Body>
+
+      <Step.Footer>
+        <Step.Footer.Previous
+          onClick={() => goPrev()}
+          isDisabled={isFirstStep}
+        />
+        <Step.Footer.Continue
+          onClick={() => goNext()}
+          isDisabled={isLastStep}
+        />
+      </Step.Footer>
+    </>
+  );
+};