🚚 [open-formulieren/open-forms#4929] Move CoSignOld component

Moved component into its own file so in the future we can more easily remove it, and to declutter index.jsx from a package entrypoint. Next, we can export the nested routes from the CoSign package without adding even more weight/content to the file itself in terms of implementation.
open-formulieren · Jan 8, 2025 · 51028bb · 51028bb
1 parent ea277d9
commit 51028bb
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 144 deletions.
diff --git a/src/components/CoSign/CoSignOld.jsx b/src/components/CoSign/CoSignOld.jsx
@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import {useContext} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {useAsync} from 'react-use';
+
+import {ConfigContext, SubmissionContext} from 'Context';
+import {get} from 'api';
+import Body from 'components/Body';
+import ErrorMessage from 'components/Errors/ErrorMessage';
+import Loader from 'components/Loader';
+import LoginOptionsDisplay from 'components/LoginOptions/LoginOptionsDisplay';
+import {getLoginUrl} from 'components/utils';
+import Types from 'types';
+import {getBEMClassName} from 'utils';
+
+const getCosignStatus = async (baseUrl, submissionUuid) => {
+  const endpoint = `${baseUrl}submissions/${submissionUuid}/co-sign`;
+  return await get(endpoint);
+};
+
+const CoSignAuthentication = ({form, submissionUuid, authPlugin}) => {
+  const loginOption = form.loginOptions.find(opt => opt.identifier === authPlugin);
+  if (!loginOption) {
+    return (
+      <ErrorMessage>
+        <FormattedMessage
+          description="Co-sign auth option not available on form"
+          defaultMessage="Something went wrong while presenting the login option. Please contact the municipality."
+        />
+      </ErrorMessage>
+    );
+  }
+
+  // add the co-sign submission parameter to the login URL
+  const loginUrl = getLoginUrl(loginOption, {coSignSubmission: submissionUuid});
+  const modifiedLoginOption = {
+    ...loginOption,
+    url: loginUrl,
+    label: (
+      <FormattedMessage
+        description="Login button label"
+        defaultMessage="Login with {provider}"
+        values={{provider: loginOption.label}}
+      />
+    ),
+  };
+
+  return (
+    <LoginOptionsDisplay
+      loginAsYourselfOptions={[modifiedLoginOption]}
+      loginAsGemachtigdeOptions={[]}
+    />
+  );
+};
+
+CoSignAuthentication.propTypes = {
+  form: Types.Form.isRequired,
+  submissionUuid: PropTypes.string.isRequired,
+  authPlugin: PropTypes.string.isRequired,
+};
+
+const CoSignOld = ({
+  submissionUuid,
+  interactive = true,
+  form = null,
+  saveStepData,
+  authPlugin = 'digid-mock',
+}) => {
+  const {baseUrl} = useContext(ConfigContext);
+  const {submission} = useContext(SubmissionContext);
+
+  if (!submissionUuid) {
+    submissionUuid = submission.id;
+  }
+
+  const {
+    loading,
+    value: coSignState,
+    error,
+  } = useAsync(
+    async () => await getCosignStatus(baseUrl, submissionUuid),
+    [baseUrl, submissionUuid]
+  );
+
+  // log errors to the console if any
+  if (error) console.error(error);
+
+  // while loading, display spinner
+  if (loading) {
+    return <Loader modifiers={['small']} />;
+  }
+  const {coSigned, representation} = coSignState;
+
+  if (!coSigned) {
+    if (!interactive) {
+      return (
+        <FormattedMessage
+          description="Not co-signed (summary) message"
+          defaultMessage="Not co-signed"
+        />
+      );
+    }
+
+    if (!form || !saveStepData) {
+      throw new Error('Interactive co-sign components require the "form" and "saveStepData" props');
+    }
+
+    return (
+      <CoSignAuthentication
+        form={form}
+        submissionUuid={submissionUuid}
+        saveStepData={saveStepData}
+        authPlugin={authPlugin}
+      />
+    );
+  }
+
+  return (
+    <Body component="div">
+      <div className={getBEMClassName('co-sign__representation')}>
+        {representation ?? (
+          <FormattedMessage
+            description="Co-signed without representation fallback message"
+            defaultMessage="Something went wrong while processing the co-sign authentication. Please contact the municipality."
+          />
+        )}
+      </div>
+    </Body>
+  );
+};
+
+CoSignOld.propTypes = {
+  interactive: PropTypes.bool,
+  form: Types.Form,
+  submissionUuid: PropTypes.string, // fall back to context if not provided
+  saveStepData: PropTypes.func,
+  authPlugin: PropTypes.string,
+};
+
+export default CoSignOld;
+export {CoSignAuthentication};
diff --git a/src/components/CoSign/Cosign.jsx b/src/components/CoSign/Cosign.jsx
@@ -61,7 +61,7 @@ const Cosign = () => {
   return (
     <ErrorBoundary useCard>
       <Routes>
-        <Route path="start" element={<CosignStart />} />
+        {/*<Route path="start" element={<CosignStart />} />*/}
         <Route
           path="check"
           element={

diff --git a/src/components/CoSign/index.jsx b/src/components/CoSign/index.jsx
@@ -1,146 +1,6 @@
-import PropTypes from 'prop-types';
-import {useContext} from 'react';
-import {FormattedMessage} from 'react-intl';
-import {useAsync} from 'react-use';
-
-import {ConfigContext, SubmissionContext} from 'Context';
-import {get} from 'api';
-import Body from 'components/Body';
-import ErrorMessage from 'components/Errors/ErrorMessage';
-import Loader from 'components/Loader';
-import LoginOptionsDisplay from 'components/LoginOptions/LoginOptionsDisplay';
-import {getLoginUrl} from 'components/utils';
-import Types from 'types';
-import {getBEMClassName} from 'utils';
-
+import CoSignOld from './CoSignOld';
 import Cosign from './Cosign';
 import CosignDone from './CosignDone';
 
-// TODO: tests!
-
-const getCosignStatus = async (baseUrl, submissionUuid) => {
-  const endpoint = `${baseUrl}submissions/${submissionUuid}/co-sign`;
-  return await get(endpoint);
-};
-
-const CoSignAuthentication = ({form, submissionUuid, authPlugin}) => {
-  const loginOption = form.loginOptions.find(opt => opt.identifier === authPlugin);
-  if (!loginOption) {
-    return (
-      <ErrorMessage>
-        <FormattedMessage
-          description="Co-sign auth option not available on form"
-          defaultMessage="Something went wrong while presenting the login option. Please contact the municipality."
-        />
-      </ErrorMessage>
-    );
-  }
-
-  // add the co-sign submission parameter to the login URL
-  const loginUrl = getLoginUrl(loginOption, {coSignSubmission: submissionUuid});
-  const modifiedLoginOption = {
-    ...loginOption,
-    url: loginUrl,
-    label: (
-      <FormattedMessage
-        description="Login button label"
-        defaultMessage="Login with {provider}"
-        values={{provider: loginOption.label}}
-      />
-    ),
-  };
-
-  return (
-    <LoginOptionsDisplay
-      loginAsYourselfOptions={[modifiedLoginOption]}
-      loginAsGemachtigdeOptions={[]}
-    />
-  );
-};
-
-CoSignAuthentication.propTypes = {
-  form: Types.Form.isRequired,
-  submissionUuid: PropTypes.string.isRequired,
-  authPlugin: PropTypes.string.isRequired,
-};
-
-const CoSignOld = ({
-  submissionUuid,
-  interactive = true,
-  form = null,
-  saveStepData,
-  authPlugin = 'digid-mock',
-}) => {
-  const {baseUrl} = useContext(ConfigContext);
-  const {submission} = useContext(SubmissionContext);
-
-  if (!submissionUuid) {
-    submissionUuid = submission.id;
-  }
-
-  const {
-    loading,
-    value: coSignState,
-    error,
-  } = useAsync(
-    async () => await getCosignStatus(baseUrl, submissionUuid),
-    [baseUrl, submissionUuid]
-  );
-
-  // log errors to the console if any
-  if (error) console.error(error);
-
-  // while loading, display spinner
-  if (loading) {
-    return <Loader modifiers={['small']} />;
-  }
-  const {coSigned, representation} = coSignState;
-
-  if (!coSigned) {
-    if (!interactive) {
-      return (
-        <FormattedMessage
-          description="Not co-signed (summary) message"
-          defaultMessage="Not co-signed"
-        />
-      );
-    }
-
-    if (!form || !saveStepData) {
-      throw new Error('Interactive co-sign components require the "form" and "saveStepData" props');
-    }
-
-    return (
-      <CoSignAuthentication
-        form={form}
-        submissionUuid={submissionUuid}
-        saveStepData={saveStepData}
-        authPlugin={authPlugin}
-      />
-    );
-  }
-
-  return (
-    <Body component="div">
-      <div className={getBEMClassName('co-sign__representation')}>
-        {representation ?? (
-          <FormattedMessage
-            description="Co-signed without representation fallback message"
-            defaultMessage="Something went wrong while processing the co-sign authentication. Please contact the municipality."
-          />
-        )}
-      </div>
-    </Body>
-  );
-};
-
-CoSignOld.propTypes = {
-  interactive: PropTypes.bool,
-  form: Types.Form,
-  submissionUuid: PropTypes.string, // fall back to context if not provided
-  saveStepData: PropTypes.func,
-  authPlugin: PropTypes.string,
-};
-
 export default CoSignOld;
-export {CoSignAuthentication, Cosign, CosignDone};
+export {Cosign, CosignDone};
diff --git a/src/components/CoSign/test.spec.jsx b/src/components/CoSign/test.spec.jsx
@@ -4,7 +4,7 @@ import {IntlProvider} from 'react-intl';
 
 import {testLoginForm} from 'components/FormStart/fixtures';
 
-import {CoSignAuthentication} from './index';
+import {CoSignAuthentication} from './CoSignOld';
 
 it('CoSign component constructs the right auth URL', () => {
   // Control the location that the test will use