feat(opentrons-ai-client): Created the footer component with the privacy policy and EULA

opentrons-ai-client/src/assets/localization/en/protocol_generator.json

@@ -20,6 +20,7 @@
   "pcr_flex": "PCR (Flex)",
   "pcr": "PCR",
   "pipettes": "Pipettes: Specify your pipettes, including the volume, number of channels, and whether they’re mounted on the left or right.",
+  "privacy_policy": "By continuing, you agree to the Opentrons \nPrivacy Policy\n and \nEnd user license agreement\n Copyright © 2024 Opentrons",
   "reagent_transfer_flex": "Reagent Transfer (Flex)",
   "reagent_transfer": "Reagent Transfer",
   "reload_page": "To start over and create a new protocol, simply reload the page.",

opentrons-ai-client/src/molecules/Footer/Footer.stories.tsx

@@ -0,0 +1,22 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Footer } from '.'
+import { COLORS, Flex } from '@opentrons/components'
+
+const meta: Meta<typeof Footer> = {
+    title: 'AI/Molecules/Footer',
+    component: Footer,
+    decorators: [
+        Story => (
+            <Flex
+                backgroundColor={COLORS.grey10}>
+                <Story />
+            </Flex>
+        ),
+    ]
+}
+export default meta
+
+type Story = StoryObj<typeof Footer>
+
+export const FooterExample: Story = {
+}

opentrons-ai-client/src/molecules/Footer/__tests__/Footer.test.tsx

@@ -0,0 +1,31 @@
+import { Footer } from '..';
+import { renderWithProviders } from '../../../__testing-utils__'
+import { screen } from '@testing-library/react'
+
+const render = () => {
+    return renderWithProviders(<Footer />)
+}
+
+describe('Footer', () => {
+    it('should render Footer component', () => {
+        render()
+        screen.getByText('By continuing, you agree to the Opentrons')
+        screen.getByText('Privacy Policy')
+        screen.getByText('and')
+        screen.getByText('End user license agreement')
+        screen.getByText('Copyright © 2024 Opentrons')
+    });
+
+    it('should have a link to the Privacy Policy', () => {
+        render()
+        const privacyPolicy = screen.getByText('Privacy Policy');
+        expect(privacyPolicy).toHaveAttribute('href', 'https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons-Labworks-Privacy-Policy-5-4-23.docx-1.pdf');
+    });
+
+    it('should have a link to the end user license agreement', () => {
+        render()
+        const eula = screen.getByText('End user license agreement');
+        expect(eula).toHaveAttribute('href', 'https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons%20EULA%2020240710.pdf');
+    });
+
+});

opentrons-ai-client/src/molecules/Footer/index.tsx

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components'
+import {
+    ALIGN_CENTER,
+    COLORS,
+    DIRECTION_COLUMN,
+    Flex,
+    JUSTIFY_CENTER,
+    SPACING,
+    StyledText,
+    TYPOGRAPHY,
+} from '@opentrons/components'
+import { useTranslation } from 'react-i18next'
+
+const NewLineText = styled.span`
+  display: block;
+`;
+
+const BlueLink = styled.a`
+  color: ${COLORS.blue50};
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const DISCLAIMER_TEXT_STYLE = css`
+  color: ${COLORS.grey60};
+  font-size: ${TYPOGRAPHY.fontSizeH4};
+  line-height: ${TYPOGRAPHY.lineHeight16};
+  text-align: ${TYPOGRAPHY.textAlignCenter};
+  padding-bottom: ${SPACING.spacing24};
+`;
+
+export function Footer(): JSX.Element {
+    const { t } = useTranslation('protocol_generator')
+    const privacyPolicyText = t('privacy_policy');
+    const [firstPart, privacyPolicy, and, EULA, copyright] = privacyPolicyText.split('\n');
+
+    return (
+        <Flex
+            width="100%"
+            height="88px"
+            backgroundColor={COLORS.grey10}
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            paddingTop={SPACING.spacing24}
+        >
+            <StyledText css={DISCLAIMER_TEXT_STYLE}>
+                {firstPart}
+                <BlueLink href="https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons-Labworks-Privacy-Policy-5-4-23.docx-1.pdf" target="_blank" rel="noopener noreferrer">{privacyPolicy}</BlueLink>
+                {and}
+                <BlueLink href="https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons%20EULA%2020240710.pdf" target="_blank" rel="noopener noreferrer">{EULA}</BlueLink>
+                <NewLineText>{copyright}</NewLineText>
+            </StyledText>
+        </Flex>
+    )
+}