From 7bc250406a9418a6f206fef7c4c9852ddc504aaa Mon Sep 17 00:00:00 2001
From: connected-znaim <60662281+connected-znaim@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:13:43 -0400
Subject: [PATCH] feat(opentrons-ai-client): Created the footer component with
the privacy policy and EULA (#16535)
# Overview
## Test Plan and Hands on Testing
Manually tested both links
## Changelog
The footer links to the following two urls:
Privacy policy:
"https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons-Labworks-Privacy-Policy-5-4-23.docx-1.pdf"
EULA:
"https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons%20EULA%2020240710.pdf"
## Review requests
## Risk assessment
---
.../localization/en/protocol_generator.json | 2 +
.../src/molecules/Footer/Footer.stories.tsx | 20 ++++++
.../Footer/__tests__/Footer.test.tsx | 38 ++++++++++
.../src/molecules/Footer/index.tsx | 70 +++++++++++++++++++
4 files changed, 130 insertions(+)
create mode 100644 opentrons-ai-client/src/molecules/Footer/Footer.stories.tsx
create mode 100644 opentrons-ai-client/src/molecules/Footer/__tests__/Footer.test.tsx
create mode 100644 opentrons-ai-client/src/molecules/Footer/index.tsx
diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
index 2088e495482..1d69984c345 100644
--- a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
+++ b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
@@ -3,6 +3,7 @@
"api": "API: An API level is 2.15",
"application": "Application: Your protocol's name, describing what it does.",
"commands": "Commands: List the protocol's steps, specifying quantities in microliters (uL) and giving exact source and destination locations.",
+ "copyright": "Copyright © 2024 Opentrons",
"copy_code": "Copy code",
"disclaimer": "OpentronsAI can make mistakes. Review your protocol before running it on an Opentrons robot.",
"example": "For example prompts, click the buttons in the left panel.",
@@ -22,6 +23,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 Privacy Policy and End user license agreement",
"reagent_transfer_flex": "Reagent Transfer (Flex)",
"reagent_transfer": "Reagent Transfer",
"reload_page": "To start over and create a new protocol, simply reload the page.",
diff --git a/opentrons-ai-client/src/molecules/Footer/Footer.stories.tsx b/opentrons-ai-client/src/molecules/Footer/Footer.stories.tsx
new file mode 100644
index 00000000000..78fdf2d42bc
--- /dev/null
+++ b/opentrons-ai-client/src/molecules/Footer/Footer.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Footer } from '.'
+import { COLORS, Flex } from '@opentrons/components'
+
+const meta: Meta = {
+ title: 'AI/Molecules/Footer',
+ component: Footer,
+ decorators: [
+ Story => (
+
+
+
+ ),
+ ],
+}
+export default meta
+
+type Story = StoryObj
+
+export const FooterExample: Story = {}
diff --git a/opentrons-ai-client/src/molecules/Footer/__tests__/Footer.test.tsx b/opentrons-ai-client/src/molecules/Footer/__tests__/Footer.test.tsx
new file mode 100644
index 00000000000..704855096ed
--- /dev/null
+++ b/opentrons-ai-client/src/molecules/Footer/__tests__/Footer.test.tsx
@@ -0,0 +1,38 @@
+import { Footer } from '..'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { i18n } from '../../../i18n'
+
+const render = (): ReturnType => {
+ return renderWithProviders(, {
+ i18nInstance: i18n,
+ })
+}
+
+describe('Footer', () => {
+ it('should render Footer component', () => {
+ render()
+ screen.getByText('Privacy Policy')
+ 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'
+ )
+ })
+})
diff --git a/opentrons-ai-client/src/molecules/Footer/index.tsx b/opentrons-ai-client/src/molecules/Footer/index.tsx
new file mode 100644
index 00000000000..5ef44bc733f
--- /dev/null
+++ b/opentrons-ai-client/src/molecules/Footer/index.tsx
@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+import {
+ ALIGN_CENTER,
+ COLORS,
+ Flex,
+ JUSTIFY_CENTER,
+ SPACING,
+ TYPOGRAPHY,
+} from '@opentrons/components'
+import { Trans, 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 FooterText = styled.p`
+ 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')
+
+ return (
+
+
+
+ ),
+ EULALink: (
+
+ ),
+ }}
+ />
+ {t('copyright')}
+
+
+ )
+}