refactor(appkit): migrate PageUnauthorized component to AppKit (#1595)

* refactor(appkit): migrate PageUnauthorized component to AppKit

* Create metal-meals-compete.md

* Version Packages (#1594)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* refactor(appkit): migrate PageUnauthorized component to AppKit

* refactor(application-components): refactor after code review

* define change as minor

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/metal-meals-compete.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-components': minor
+'@commercetools-local/visual-testing-app': minor
+---
+
+refactor(application-components, visual-testing-app): migrate PageUnauthorized component to AppKit

packages/application-components/src/components/page-unauthorized/README.md

@@ -0,0 +1,20 @@
+# PageUnauthorized
+
+## Description
+
+The PageUnauthorized component can be used to inform a user that certain permissions are lacking for views of a respective Merchant Center application.
+
+## Usage
+
+```js
+import { Switch, Route } from 'react-router-dom';
+import { PageUnauthorized } from '@commercetools-frontend/application-components';
+
+const Routes = () => (
+  <Switch>
+    <Route exact path="/" component={Home} />
+    <Route path="/user" component={User} />
+    <Route path="/unauthorized" component={PageUnauthorized} />
+  </Switch>
+);
+```

packages/application-components/src/components/page-unauthorized/index.ts

@@ -0,0 +1 @@
+export { default } from './page-unauthorized';

packages/application-components/src/components/page-unauthorized/messages.ts

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  title: {
+    id: 'PageUnauthorized.title',
+    defaultMessage: 'We could not find what you are looking for',
+  },
+  paragraph1: {
+    id: 'PageUnauthorized.paragraph1',
+    defaultMessage:
+      'The Module you are looking for either does not exist for this Project or you are not authorized to view it.',
+  },
+  paragraph2: {
+    id: 'PageUnauthorized.paragraph2',
+    defaultMessage:
+      'Please contact your system administrator or the commercetools <a>Help Desk</a> if you have any further questions.',
+  },
+});

packages/application-components/src/components/page-unauthorized/page-unauthorized.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { renderComponent } from '../../test-utils';
+import PageUnauthorized from './page-unauthorized';
+
+describe('rendering', () => {
+  it('should render help desk link', () => {
+    const rendered = renderComponent(<PageUnauthorized />);
+    expect(rendered.getByText('Help Desk')).toBeInTheDocument();
+  });
+  it('should render the title', () => {
+    const rendered = renderComponent(<PageUnauthorized />);
+    expect(
+      rendered.getByText('We could not find what you are looking for')
+    ).toBeInTheDocument();
+  });
+});

packages/application-components/src/components/page-unauthorized/page-unauthorized.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import FailedAuthorizationSVG from '@commercetools-frontend/assets/images/folder-full-locked.svg';
+import MaintenancePageLayout from '../maintenance-page-layout';
+import { SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
+import messages from './messages';
+
+// eslint-disable-next-line react/display-name
+const getSupportUrlLink = (msg: string) => (
+  <a href={SUPPORT_PORTAL_URL} target="_blank" rel="noopener noreferrer">
+    {msg}
+  </a>
+);
+
+export const PageUnauthorized = () => {
+  const intl = useIntl();
+
+  return (
+    <MaintenancePageLayout
+      imageSrc={FailedAuthorizationSVG}
+      title={<FormattedMessage {...messages.title} />}
+      label={intl.formatMessage(messages.title)}
+      paragraph1={<FormattedMessage {...messages.paragraph1} />}
+      paragraph2={
+        <FormattedMessage
+          {...messages.paragraph2}
+          values={{
+            a: getSupportUrlLink,
+          }}
+        />
+      }
+    />
+  );
+};
+
+PageUnauthorized.displayName = 'PageUnauthorized';
+
+export default PageUnauthorized;

packages/application-components/src/index.ts

@@ -3,6 +3,7 @@ export { default as version } from './version';
 // Maintenance pages
 export { default as MaintenancePageLayout } from './components/maintenance-page-layout';
 export { default as PageNotFound } from './components/page-not-found';
+export { default as PageUnauthorized } from './components/page-unauthorized';
 
 // Dialogs
 export { default as InfoDialog } from './components/dialogs/info-dialog';

visual-testing-app/src/components/page-unauthorized/page-unauthorized.visualroute.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PageUnauthorized } from '@commercetools-frontend/application-components';
+import { Suite, Spec } from '../../test-utils';
+
+export const routePath = '/page-unauthorized';
+
+export const Component = () => (
+  <Suite>
+    <Spec label="PageUnauthorized" size="l" contentAlignment="center">
+      <PageUnauthorized />
+    </Spec>
+  </Suite>
+);

visual-testing-app/src/components/page-unauthorized/page-unauthorized.visualspec.ts

@@ -0,0 +1,13 @@
+import { percySnapshot } from '@percy/puppeteer';
+import { HOST } from '../../constants';
+
+describe('PageUnauthorized', () => {
+  beforeAll(async () => {
+    await page.goto(`${HOST}/page-unauthorized`);
+  });
+
+  it('Default', async () => {
+    await expect(page).toMatch('PageUnauthorized');
+    await percySnapshot(page, 'PageUnauthorized');
+  });
+});