@velocitycareerlabs/velocity-registrar-app 1.25.0-dev-build.1253d0f86 → 1.25.0-dev-build.1540aaa8e

package/.env.dev

@@ -1,8 +1,8 @@
-VITE_REGISTRAR_AUTH0_DOMAIN=vnf-localdev.us.auth0.com
-VITE_REGISTRAR_AUTH0_CLIENT_ID=GKZ5MeATHcBFADukezS4Pa3hCB1XbkX6
-VITE_REGISTRAR_AUTH0_REDIRECT_URI=http://localhost:5173
+VITE_REGISTRAR_AUTH0_DOMAIN=devauth.velocitynetwork.foundation
+VITE_REGISTRAR_AUTH0_CLIENT_ID=RkHjVKfdzpdemtZeJ7lFxDMMAe4CfyYa
+VITE_REGISTRAR_AUTH0_REDIRECT_URI=https://devregistrarapp.velocitynetwork.foundation
 VITE_REGISTRAR_AUDIENCE=https://registrar.velocitynetwork.foundation
-VITE_REGISTRAR_CONNECTION=vnf-localdev-users-connection
+VITE_REGISTRAR_CONNECTION=vnf-dev-users-connection
 VITE_REGISTRAR_API=https://devregistrar.velocitynetwork.foundation/api/v0.6
 VITE_X_AUTO_ACTIVATE=true
 VITE_CHAIN_NAME=Devnet

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@velocitycareerlabs/velocity-registrar-app",
-  "version": "1.25.0-dev-build.1253d0f86",
+  "version": "1.25.0-dev-build.1540aaa8e",
   "description": "Velocity Registrar",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -60,5 +60,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "gitHead": "7f963613f230d1f27dfad8bbbe3d4bf1159618d3"
+  "gitHead": "bff19461f623080a5fb849529152fb4eb0956515"
 }

package/src/App.jsx

@@ -15,26 +15,21 @@
  *
  */
 
+import React from 'react';
 import { Route, useLocation, useNavigate } from 'react-router-dom';
 import { CustomRoutes, Resource } from 'react-admin';
-import React from 'react';
 import { Auth0Provider } from '@auth0/auth0-react';
 import OrganizationIcon from '@mui/icons-material/Business';
 import {
   OrganizationShow,
   OrganizationEdit,
-  OrganizationCreate,
 } from '@velocitycareerlabs/components-organizations-registrar/pages/organizations';
 import {
   IndividualsDashboard,
   IndividualsShow,
   IndividualsEdit,
 } from '@velocitycareerlabs/components-organizations-registrar/pages/individuals';
-import { ServicesList } from '@velocitycareerlabs/components-organizations-registrar/pages/services';
-import {
-  CreateOrganisationFromInvitation,
-  InvitationsList,
-} from '@velocitycareerlabs/components-organizations-registrar/pages/invitations';
+import { InvitationsList } from '@velocitycareerlabs/components-organizations-registrar/pages/invitations';
 import {
   PrivacyPolicy,
   TermsAndConditions,
@@ -48,7 +43,12 @@ import {
   PrivateAppRoot,
   useConfig,
 } from '@velocitycareerlabs/components-organizations-registrar';
+
 import { AuthProviderBridge } from './AuthProviderBridge.jsx';
+import { ServicesList } from './pages/services/ServiceList.jsx';
+import { OrganizationCreate } from './pages/organizations/OrganizationCreate.jsx';
+import { CreateOrganisationFromInvitation } from './pages/invitations/CreateOrganisationFromInvitation.jsx';
+import { extendedRemoteDataProvider } from './utils/remoteDataProvider';
 
 const PublicRoutes = ['/privacy-policy', '/terms-and-conditions', /^\/signatories\/[^/]+$/];
 
@@ -94,7 +94,7 @@ const PrivateRegistrarApp = () => {
       }}
     >
       <AuthProviderBridge config={config}>
-        <PrivateAppRoot>
+        <PrivateAppRoot extendedRemoteDataProvider={extendedRemoteDataProvider()}>
           <Resource
             name="organizations"
             icon={OrganizationIcon}

package/src/pages/invitations/CreateOrganisationFromInvitation.jsx

@@ -0,0 +1,6 @@
+import { CreateOrganisationFromInvitation as CreateOrganization } from '@velocitycareerlabs/components-organizations-registrar/pages/invitations';
+import { SecureIntegrationPopup } from '../services/components/SecureIntegrationPopup/index.jsx';
+
+export const CreateOrganisationFromInvitation = () => {
+  return <CreateOrganization InterceptOnCreate={SecureIntegrationPopup} />;
+};

package/src/pages/organizations/OrganizationAddService.jsx

@@ -0,0 +1,6 @@
+import { OrganizationAddService as OrganizationAddServiceBase } from '@velocitycareerlabs/components-organizations-registrar/pages/organizations';
+import { SecureIntegrationPopup } from '../services/components/SecureIntegrationPopup/index.jsx';
+
+export const OrganizationAddService = (props) => {
+  return <OrganizationAddServiceBase {...props} InterceptOnCreate={SecureIntegrationPopup} />;
+};

package/src/pages/organizations/OrganizationCreate.jsx

@@ -0,0 +1,12 @@
+import { OrganizationCreate as OrganizationCreateBase } from '@velocitycareerlabs/components-organizations-registrar/pages/organizations';
+import { OrganizationAddService } from './OrganizationAddService.jsx';
+import { MockOrganization } from './components/MockOrganization.jsx';
+
+export const OrganizationCreate = () => {
+  return (
+    <OrganizationCreateBase
+      CreateServiceComponent={OrganizationAddService}
+      MockOrganization={MockOrganization}
+    />
+  );
+};

package/src/pages/organizations/components/MockOrganization.jsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { Button } from 'react-admin';
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+
+import { useConfig, chainNames } from '@velocitycareerlabs/components-organizations-registrar';
+import { initialRecordMock } from '../utils/mockOrganization';
+
+export const MockOrganization = ({ setInitialRecord }) => {
+  const config = useConfig();
+  const isMockDataAllowed = [chainNames.localnet, chainNames.devnet, chainNames.qanet].includes(
+    config.chainName,
+  );
+  const mockOrganization = useCallback(() => {
+    setInitialRecord(initialRecordMock);
+  }, [setInitialRecord]);
+
+  return isMockDataAllowed ? (
+    <Box display="flex" alignSelf="flex-end">
+      <Button
+        variant="text"
+        color="secondary"
+        size="large"
+        sx={sx.mockButton}
+        onClick={mockOrganization}
+      >
+        Mock Organization
+      </Button>
+    </Box>
+  ) : null;
+};
+
+const sx = {
+  mockButton: {
+    color: 'primary.main',
+  },
+};
+
+// eslint-disable-next-line better-mutation/no-mutation
+MockOrganization.propTypes = {
+  setInitialRecord: PropTypes.func.isRequired,
+};
+
+export default MockOrganization;

package/src/pages/organizations/utils/mockOrganization.js

@@ -0,0 +1,21 @@
+export const initialRecordMock = {
+  profile: {
+    name: `Mock Organization, Inc. ${new Date().getTime()}`,
+    website: `https://mockcompany${new Date().getTime()}.com`,
+    linkedInProfile: 'https://www.linkedin.com/company/mockcompanyid',
+    physicalAddress: { line1: '123 Mock Street' },
+    location: { countryCode: 'US' },
+    contactEmail: 'support@mockcompany.com',
+    technicalEmail: 'tech@mockcompany.com',
+    description: 'This is a mock description for local development.',
+    registrationNumbers: [{ authority: 'DunnAndBradstreet', number: '12345' }],
+    adminGivenName: 'AdminFirst',
+    adminFamilyName: 'AdminLast',
+    adminTitle: 'Administrator',
+    adminEmail: 'admin@mockcompany.com',
+    signatoryGivenName: 'SignerFirst',
+    signatoryFamilyName: 'SignerLast',
+    signatoryTitle: 'Signatory Officer',
+    signatoryEmail: 'sign@mockcompany.com',
+  },
+};

package/src/pages/services/ServiceCreateForm.jsx

@@ -0,0 +1,6 @@
+import { ServiceCreateForm as ServiceCreateFormBase } from '@velocitycareerlabs/components-organizations-registrar/pages/services';
+import { SecureIntegrationPopup } from './components/SecureIntegrationPopup/index.jsx';
+
+export const ServiceCreateForm = (props) => {
+  return <ServiceCreateFormBase {...props} InterceptOnCreate={SecureIntegrationPopup} />;
+};

package/src/pages/services/ServiceList.jsx

@@ -0,0 +1,6 @@
+import { ServicesList as ServicesListBase } from '@velocitycareerlabs/components-organizations-registrar/pages/services';
+import { ServiceCreateForm } from './ServiceCreateForm.jsx';
+
+export const ServicesList = () => {
+  return <ServicesListBase CreateComponent={ServiceCreateForm} />;
+};

package/src/pages/services/components/SecureIntegrationPopup/index.jsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import { useGetOne } from 'react-admin';
+import PropTypes from 'prop-types';
+import { useSelectedOrganization } from '@velocitycareerlabs/components-organizations-registrar';
+import { Popup } from '@velocitycareerlabs/components-organizations-registrar/components/common';
+import { Loading } from '@velocitycareerlabs/components-organizations-registrar/components';
+
+import { SecureMessageURL } from '../SecureMessageUrl/index.jsx';
+import { SecureTransfer } from '../SecureTransfer/index.jsx';
+import { dataResources } from '../../../../utils/remoteDataProvider';
+
+export const SecureIntegrationPopup = ({
+  isInterceptOnCreateOpen,
+  serviceId,
+  onNext,
+  onClose,
+  isIssueOrInspection,
+  selectedCAO,
+}) => {
+  const [did] = useSelectedOrganization();
+
+  const { data: secureMessageTransfer, isLoading: isCheckingCAOSecureTranferSupport } = useGetOne(
+    dataResources.SECURE_MESSAGE_SUPPORTED,
+    {
+      id: selectedCAO,
+    },
+    {
+      enabled: !!selectedCAO && isIssueOrInspection,
+    },
+  );
+
+  useEffect(() => {
+    if (secureMessageTransfer && !secureMessageTransfer?.supported) {
+      onClose();
+    }
+  }, [secureMessageTransfer, onClose]);
+
+  return isIssueOrInspection && isCheckingCAOSecureTranferSupport ? (
+    <Loading sx={styles.loading} />
+  ) : (
+    <Popup
+      onClose={() => {}}
+      title=""
+      isOpen={isInterceptOnCreateOpen}
+      mainContainerStyles={styles.mainContainer}
+      disableCloseButton={true}
+    >
+      {isIssueOrInspection ? (
+        <SecureTransfer serviceId={serviceId} did={did} onClose={onClose} />
+      ) : (
+        <SecureMessageURL did={did} onSave={() => onNext(true)} onSkip={() => onNext(true)} />
+      )}
+    </Popup>
+  );
+};
+
+const styles = {
+  mainContainer: { pt: 2 },
+  loading: { pt: '60px' },
+};
+
+// eslint-disable-next-line better-mutation/no-mutation
+SecureIntegrationPopup.propTypes = {
+  isInterceptOnCreateOpen: PropTypes.bool.isRequired,
+  serviceId: PropTypes.string.isRequired,
+  onNext: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  isIssueOrInspection: PropTypes.bool.isRequired,
+  selectedCAO: PropTypes.string,
+};

package/src/pages/services/components/SecureMessageUrl/SaveButton/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import PropTypes from 'prop-types';
+import { Save } from '@velocitycareerlabs/components-organizations-registrar/components/common';
+
+const SaveButtonComponent = ({ saveInProgress, disabled }) => {
+  const {
+    formState: { errors },
+  } = useFormContext();
+
+  const hasValidationError = Boolean(errors?.secureMessagesUrl);
+  const isDisabled = saveInProgress || hasValidationError || disabled;
+
+  return <Save saveInProgress={saveInProgress} isDisabled={isDisabled} />;
+};
+
+// eslint-disable-next-line better-mutation/no-mutation
+SaveButtonComponent.propTypes = {
+  saveInProgress: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+export const SaveButton = React.memo(SaveButtonComponent);

package/src/pages/services/components/SecureMessageUrl/TestButton/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Button } from '@mui/material';
+import { Loading } from '@velocitycareerlabs/components-organizations-registrar/components';
+import PropTypes from 'prop-types';
+
+const TestButtonComponent = ({ onTest, testInProgress }) => {
+  const {
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const secureMessagesUrl = watch('secureMessagesUrl');
+  const hasValidationError = Boolean(errors?.secureMessagesUrl);
+
+  return (
+    <Button
+      variant="outlined"
+      sx={styles.testButton}
+      onClick={() => onTest(secureMessagesUrl)}
+      endIcon={testInProgress ? <Loading color="error" sx={styles.loader} size={26} /> : null}
+      disabled={testInProgress || !secureMessagesUrl || hasValidationError}
+    >
+      TEST
+    </Button>
+  );
+};
+
+const styles = {
+  button: { px: 4, py: 1, fontSize: '16px', width: '160px', fontWeight: '600' },
+  testButton: {
+    borderColor: 'primary.main',
+    color: 'text.main',
+    padding: '12.5px',
+    fontWeight: '600',
+    fontSize: '16px',
+  },
+};
+// eslint-disable-next-line better-mutation/no-mutation
+TestButtonComponent.propTypes = {
+  onTest: PropTypes.func.isRequired,
+  testInProgress: PropTypes.bool.isRequired,
+};
+
+export const TestButton = React.memo(TestButtonComponent);

package/src/pages/services/components/SecureMessageUrl/TestSecureMessageWarning/index.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box, Typography, Button, useTheme } from '@mui/material';
+import InfoIcon from '@mui/icons-material/Info';
+import { Popup } from '@velocitycareerlabs/components-organizations-registrar/components/common';
+import PropTypes from 'prop-types';
+
+const TestSecureMessageWarningComponent = ({ isModalOpened, onClose, onContinue }) => {
+  const theme = useTheme();
+
+  return (
+    <Popup
+      onClose={onClose}
+      title=""
+      isOpen={isModalOpened}
+      mainContainerStyles={styles.mainContainer}
+      isBackBoxVisible
+      backBoxColor={theme.palette.warning.main}
+    >
+      <InfoIcon color="warning" sx={styles.icon} />
+      <Typography sx={styles.title}>Secure message URL should be tested before saving</Typography>
+      <Typography textAlign="center">
+        They will not be available again and are critical for managing your organization data.
+      </Typography>
+      <Box sx={styles.buttonBlock}>
+        <Button variant="outlined" sx={styles.button} onClick={onClose}>
+          BACK TO TEST
+        </Button>
+        <Button variant="text" sx={[styles.button, styles.continueButton]} onClick={onContinue}>
+          CONTINUE ANYWAY
+        </Button>
+      </Box>
+    </Popup>
+  );
+};
+
+const styles = {
+  mainContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    pt: '19px',
+    maxWidth: '620px',
+  },
+  title: {
+    fontWeight: 600,
+    fontSize: '32px',
+    lineHeight: '39px',
+    textAlign: 'center',
+    mb: '32px',
+    mt: '35px',
+  },
+  button: { px: 4, py: 1, fontSize: '16px' },
+  continueButton: {
+    color: 'text.disabled',
+  },
+  buttonBlock: {
+    marginTop: '52px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+  },
+  icon: { width: '50px', height: '50px' },
+  loader: { pl: '10px' },
+};
+
+// eslint-disable-next-line better-mutation/no-mutation
+TestSecureMessageWarningComponent.propTypes = {
+  isModalOpened: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onContinue: PropTypes.func.isRequired,
+};
+
+export const TestSecureMessageWarning = React.memo(TestSecureMessageWarningComponent);

package/src/pages/services/components/SecureMessageUrl/TrackTestStatus/index.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import PropTypes from 'prop-types';
+
+const TrackTestStatusComponent = ({ tested, reset }) => {
+  const { watch } = useFormContext();
+  const secureMessagesUrl = watch('secureMessagesUrl');
+  const prevUrlRef = useRef(secureMessagesUrl);
+
+  useEffect(() => {
+    if (tested && secureMessagesUrl !== prevUrlRef.current) {
+      reset();
+    }
+    // eslint-disable-next-line better-mutation/no-mutation
+    prevUrlRef.current = secureMessagesUrl;
+  }, [secureMessagesUrl, tested, reset]);
+
+  return null;
+};
+
+// eslint-disable-next-line better-mutation/no-mutation
+TrackTestStatusComponent.propTypes = {
+  tested: PropTypes.bool,
+  reset: PropTypes.func.isRequired,
+};
+
+export const TrackTestStatus = React.memo(TrackTestStatusComponent);

package/src/pages/services/components/SecureMessageUrl/index.jsx

@@ -0,0 +1,157 @@
+import React, { useState, useCallback } from 'react';
+import { Form, FormDataConsumer, TextInput } from 'react-admin';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
+import PropTypes from 'prop-types';
+
+import { validateUrlOptional } from '../../utils/index.jsx';
+import { useSecureMessageTest } from '../../hooks/useSecureMessageTest';
+import { TestSecureMessageWarning } from './TestSecureMessageWarning/index.jsx';
+import { SaveButton } from './SaveButton/index.jsx';
+import { TestButton } from './TestButton/index.jsx';
+import { TrackTestStatus } from './TrackTestStatus/index.jsx';
+
+export const SecureMessageURL = ({ did, onSave: onSaveCallback, onSkip }) => {
+  const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
+
+  const { onTest, testPassed, testError, testInProgress, tested, reset, onSave, saveInProgress } =
+    useSecureMessageTest({
+      did,
+    });
+
+  const handleSave = useCallback(
+    async (data) => {
+      const { secureMessagesUrl } = data;
+      if (secureMessagesUrl && !testPassed) {
+        setIsWarningModalOpen(true);
+      } else {
+        await onSave(secureMessagesUrl, onSaveCallback);
+      }
+    },
+    [testPassed, onSave, onSaveCallback],
+  );
+
+  return (
+    <>
+      <Typography sx={styles.title} mb={2}>
+        Set a Secure Messages URL
+      </Typography>
+      <Typography>
+        Ease your client&apos;s efforts by using a Secure Messages endpoint at which a Credential
+        Agent Operator. The Secure Messages endpoint is used to securely receive clients. Ensure
+        that the webhook is active and responding before setting this value otherwise the profile
+        cannot be saved.
+      </Typography>
+      <Form onSubmit={handleSave} mode="onChange" defaultValues={{ secureMessagesUrl: '' }}>
+        <TrackTestStatus tested={tested} reset={reset} />
+        <FormDataConsumer>
+          {({ formData }) => (
+            <Stack>
+              <Box sx={styles.fields}>
+                {testPassed && (
+                  <Box sx={[styles.statusBlock, styles.successBlock]}>
+                    <CheckCircleIcon sx={[styles.statusIcon, styles.iconSuccess]} />
+                    <Typography>Secure message URL tested successfully!</Typography>
+                  </Box>
+                )}
+                {testError && (
+                  <Box sx={[styles.statusBlock, styles.errorBlock]}>
+                    <CancelIcon sx={[styles.statusIcon, styles.iconError]} />
+                    <Typography>Failed to test the secure message URL.</Typography>
+                  </Box>
+                )}
+                <TextInput
+                  source="secureMessagesUrl"
+                  label="Secure message URL"
+                  validate={[...validateUrlOptional]}
+                  parse={(value) => value?.trim() ?? ''}
+                />
+                <TestButton onTest={onTest} testInProgress={testInProgress} />
+              </Box>
+
+              <Box sx={styles.buttonBlock}>
+                <Button
+                  variant="outlined"
+                  sx={[styles.button, styles.secondaryButton]}
+                  onClick={onSkip}
+                >
+                  Skip
+                </Button>
+                <SaveButton
+                  saveInProgress={saveInProgress || testInProgress}
+                  disabled={testError}
+                />
+              </Box>
+              <TestSecureMessageWarning
+                isModalOpened={isWarningModalOpen}
+                onClose={() => setIsWarningModalOpen(false)}
+                onContinue={() => {
+                  onSave(formData.secureMessagesUrl, onSaveCallback);
+                }}
+              />
+            </Stack>
+          )}
+        </FormDataConsumer>
+      </Form>
+    </>
+  );
+};
+
+const styles = {
+  step: { color: (theme) => theme.palette.primary.main, pb: '20px', display: 'block' },
+  title: {
+    fontSize: '32px',
+    fontWeight: '600',
+    lineHeight: '38px',
+  },
+  statusBlock: {
+    display: 'flex',
+    gap: '20px',
+    alignItems: 'center',
+    padding: '11px 15px',
+    borderRadius: '4px',
+    border: '1px solid',
+    marginBottom: '32px',
+  },
+  successBlock: {
+    backgroundColor: 'success.light',
+    borderColor: 'success.main',
+  },
+  errorBlock: {
+    backgroundColor: 'error.light',
+    borderColor: 'primary.main',
+  },
+  statusIcon: {
+    fontSize: '32px',
+    padding: '2.5px',
+  },
+  iconSuccess: {
+    color: 'success.main',
+  },
+  iconError: {
+    color: 'error.main',
+  },
+  fields: {
+    padding: '32px 0 40px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0px',
+  },
+  buttonBlock: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '24px',
+  },
+  button: { px: 4, py: 1, fontSize: '16px', width: '160px', fontWeight: '600' },
+  secondaryButton: {
+    borderColor: 'secondary.light',
+    color: 'text.primary',
+  },
+};
+// eslint-disable-next-line better-mutation/no-mutation
+SecureMessageURL.propTypes = {
+  did: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onSkip: PropTypes.func.isRequired,
+};

package/src/pages/services/components/SecureTransfer/ConsentLabel/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Typography, Link } from '@mui/material';
+
+const ConsentLabelComponent = () => (
+  <Typography>
+    Confirm that you consent to the secure transfer of your keys to your Credential Agent Operator.{' '}
+    <Link href="./" target="_blank">
+      Click here for more information
+    </Link>
+  </Typography>
+);
+
+export const ConsentLabel = React.memo(ConsentLabelComponent);

package/src/pages/services/components/SecureTransfer/SaveButton/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useFormContext } from 'react-hook-form';
+import PropTypes from 'prop-types';
+import { Save } from '@velocitycareerlabs/components-organizations-registrar/components/common';
+
+export const SaveButton = ({ saveInProgress }) => {
+  const {
+    formState: { errors },
+    watch,
+  } = useFormContext();
+  const consent = watch('consent');
+  const hasValidationError = Boolean(Object.keys(errors).length);
+  const isDisabled = saveInProgress || hasValidationError || !consent;
+  return <Save saveInProgress={saveInProgress} isDisabled={isDisabled} label="Confirm" />;
+};
+// eslint-disable-next-line better-mutation/no-mutation
+SaveButton.propTypes = {
+  saveInProgress: PropTypes.bool.isRequired,
+};

package/src/pages/services/components/SecureTransfer/index.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { useCreate, Form, useNotify } from 'react-admin';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { CustomBooleanInput } from '@velocitycareerlabs/components-organizations-registrar/components/common';
+import PropTypes from 'prop-types';
+import { dataResources } from '../../../../utils/remoteDataProvider';
+import { SaveButton } from './SaveButton/index.jsx';
+import { ConsentLabel } from './ConsentLabel/index.jsx';
+
+const MESSAGE_CODES = {
+  keys_sent: 'keys_sent',
+  keys_not_sent: 'keys_not_sent',
+};
+
+export const SecureTransfer = ({ did, serviceId, onClose }) => {
+  const [transferKeys] = useCreate();
+  const notify = useNotify();
+
+  const [saveInProgress, setSaveInProgress] = useState(false);
+
+  const onTransfer = async () => {
+    setSaveInProgress(true);
+    try {
+      const result = await transferKeys(
+        dataResources.SECURE_MESSAGE_TRANSFER,
+        {
+          data: { serviceIds: [serviceId] },
+          meta: { organizationId: did },
+        },
+        { returnPromise: true },
+      );
+      if (result.messageCode === MESSAGE_CODES.keys_sent) {
+        notify('Succeded', { type: 'success' }, { autoHideDuration: 500 });
+        onClose(true);
+      } else {
+        notify('Error transferring keys', { type: 'warning' }, { autoHideDuration: 500 });
+      }
+    } catch (error) {
+      notify('Error transferring keys', { type: 'warning' }, { autoHideDuration: 500 });
+    } finally {
+      setSaveInProgress(false);
+    }
+  };
+
+  return (
+    <>
+      <Typography sx={styles.title} mb={2}>
+        Automatically setup your network integration
+      </Typography>
+      <Typography>This Credential Agent Operator supports the secure transfer of keys.</Typography>
+      <Form onSubmit={onTransfer} mode="onChange" defaultValues={{ secureMessagesUrl: '' }}>
+        <Stack>
+          <Box sx={styles.fields}>
+            <CustomBooleanInput source="consent" label={<ConsentLabel />} defaultValue={false} />
+          </Box>
+          <Box sx={styles.buttonBlock}>
+            <Button variant="outlined" sx={[styles.button, styles.backButton]} onClick={onClose}>
+              Skip
+            </Button>
+            <SaveButton saveInProgress={saveInProgress} />
+          </Box>
+        </Stack>
+      </Form>
+    </>
+  );
+};
+
+const styles = {
+  step: { color: (theme) => theme.palette.primary.main, pb: '20px', display: 'block' },
+  title: {
+    fontSize: '32px',
+    fontWeight: '600',
+    lineHeight: '38px',
+  },
+  fields: {
+    padding: '32px 0 40px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0px',
+  },
+  buttonBlock: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '24px',
+  },
+  button: { px: 4, py: 1, fontSize: '16px', width: '160px', fontWeight: '600' },
+  backButton: {
+    borderColor: 'secondary.light',
+    color: 'text.primary',
+  },
+  skipButton: {
+    color: 'text.disabled',
+    marginTop: '16px',
+  },
+};
+
+// eslint-disable-next-line better-mutation/no-mutation
+SecureTransfer.propTypes = {
+  did: PropTypes.string.isRequired,
+  serviceId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

package/src/pages/services/hooks/useSecureMessageTest.js

@@ -0,0 +1,86 @@
+import { useState, useCallback } from 'react';
+import { useCreate } from 'react-admin';
+import { dataResources } from '../../../utils/remoteDataProvider';
+
+export const useSecureMessageTest = ({ did }) => {
+  const [testSecureMessage] = useCreate();
+  const [testPassed, setTestPassed] = useState(false);
+  const [testError, setTestError] = useState(null);
+  const [testInProgress, setTestInProgress] = useState(false);
+  const [tested, setTested] = useState(false);
+
+  const [saveInProgress, setSaveInProgress] = useState(false);
+
+  const reset = useCallback(() => {
+    setTestPassed(false);
+    setTestError(null);
+    setTested(false);
+  }, []);
+
+  const onTest = useCallback(
+    async (secureMessagesUrl) => {
+      setTestInProgress(true);
+      setTestPassed(false);
+      setTestError(null);
+      try {
+        const result = await testSecureMessage(
+          dataResources.SECURE_MESSAGE_TEST,
+          {
+            data: { secureMessagesUrl },
+            meta: { organizationId: did },
+          },
+          { returnPromise: true },
+        );
+        if (result.status === 204) {
+          setTestPassed(true);
+        } else {
+          setTestError(true);
+        }
+      } catch (error) {
+        setTestError(error);
+      } finally {
+        setTestInProgress(false);
+        setTested(true);
+      }
+    },
+    [did, testSecureMessage],
+  );
+
+  const onSave = useCallback(
+    async (secureMessagesUrl, callback) => {
+      setSaveInProgress(true);
+      try {
+        const result = await testSecureMessage(
+          dataResources.SECURE_MESSAGE_SAVE,
+          {
+            data: { secureMessagesUrl },
+            meta: { organizationId: did },
+          },
+          { returnPromise: true },
+        );
+        if (result.status !== 204) {
+          throw new Error('Error testing secure message URL');
+        }
+        if (callback) {
+          callback(result);
+        }
+      } catch (error) {
+        setTestError(error);
+      } finally {
+        setSaveInProgress(false);
+      }
+    },
+    [did, testSecureMessage],
+  );
+
+  return {
+    onTest,
+    testPassed,
+    testError,
+    testInProgress,
+    tested,
+    reset,
+    onSave,
+    saveInProgress,
+  };
+};

package/src/pages/services/utils/index.jsx

@@ -0,0 +1,49 @@
+import { maxLength } from 'react-admin';
+
+export const REGEXP_VALID_URL = new RegExp(
+  '^' +
+    // protocol
+    '((https?):\\/\\/)' +
+    // authentication
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)@)?' +
+    // hostname or IP
+    '((\\d{1,3}\\.){3}\\d{1,3}' + // IPv4
+    '|(([a-z\\d]([a-z\\d-]*[a-z\\d])*\\.)+[a-z]{2,}))' +
+    // optional port
+    '(\\:\\d+)?' +
+    // path
+    '(\\/[-a-z\\d%_.~+]*)*' +
+    // query string
+    '(\\?[;&a-z\\d%_.~+=-]*)?' +
+    // fragment
+    '(\\#[-a-z\\d_]*)?' +
+    ')$',
+  'i',
+);
+
+export const REGEXP_HTTPS_URL = new RegExp(
+  '^https:\\/\\/' +
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)@)?' +
+    '((\\d{1,3}\\.){3}\\d{1,3}' + // IPv4
+    '|(([a-z\\d]([a-z\\d-]*[a-z\\d])*\\.)+[a-z]{2,}))' +
+    '(\\:\\d+)?' +
+    '(\\/[-a-z\\d%_.~+]*)*' +
+    '(\\?[;&a-z\\d%_.~+=-]*)?' +
+    '(\\#[-a-z\\d_]*)?)$',
+  'i',
+);
+
+const optionalUrlValidation = (value) => {
+  if (!value) {
+    return undefined;
+  }
+  if (!REGEXP_VALID_URL.test(value.trim())) {
+    return 'Please type in a valid URL';
+  }
+  if (!REGEXP_HTTPS_URL.test(value.trim())) {
+    return 'Https is required';
+  }
+  return undefined;
+};
+
+export const validateUrlOptional = [optionalUrlValidation, maxLength(1024)];

package/src/utils/remoteDataProvider.js

@@ -0,0 +1,54 @@
+export const dataResources = {
+  SECURE_MESSAGE_TEST: 'test-url',
+  SECURE_MESSAGE_SAVE: 'set-url',
+  SECURE_MESSAGE_SUPPORTED: 'are-supported',
+  SECURE_MESSAGE_TRANSFER: 'transfer-keys',
+};
+export const extendedRemoteDataProvider = () => {
+  return (client, apiUrl, baseDataProvider, dataResourcesBase) => ({
+    getOne: (resource, params) => {
+      switch (resource) {
+        case dataResources.SECURE_MESSAGE_SUPPORTED: {
+          return client(
+            `${apiUrl}/${dataResourcesBase.ORGANIZATIONS}/${params.id}/secure-cao-messages/${resource}`,
+          ).then(({ json }) => {
+            return {
+              data: { ...json, id: new Date().getTime() },
+            };
+          });
+        }
+        default: {
+          return baseDataProvider.getOne(resource, params);
+        }
+      }
+    },
+    create: (resource, params) => {
+      switch (resource) {
+        case dataResources.SECURE_MESSAGE_TEST: {
+          const url = `${apiUrl}/${dataResourcesBase.ORGANIZATIONS}/${params.meta.organizationId}/secure-cao-messages/${resource}`;
+          return client(url, {
+            method: 'POST',
+            body: JSON.stringify(params.data),
+          }).then((res) => ({ data: { ...res, status: res.status, id: Date.now() } }));
+        }
+        case dataResources.SECURE_MESSAGE_SAVE: {
+          const url = `${apiUrl}/${dataResourcesBase.ORGANIZATIONS}/${params.meta.organizationId}/secure-cao-messages/${resource}`;
+          return client(url, {
+            method: 'POST',
+            body: JSON.stringify(params.data),
+          }).then((res) => ({ data: { ...res, status: res.status, id: Date.now() } }));
+        }
+        case dataResources.SECURE_MESSAGE_TRANSFER: {
+          const url = `${apiUrl}/${dataResourcesBase.ORGANIZATIONS}/${params.meta.organizationId}/secure-cao-messages/${resource}`;
+          return client(url, {
+            method: 'POST',
+            body: JSON.stringify(params.data),
+          }).then(({ json }) => ({ data: { ...json, id: Date.now() } }));
+        }
+        default: {
+          return baseDataProvider.create(resource, params);
+        }
+      }
+    },
+  });
+};