feat(opentrons-ai-client): Created the footer component with the priv…

…acy policy and EULA (#16535)

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview



<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

## Test Plan and Hands on Testing

Manually tested both links

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

<img width="1247" alt="image"
src="https://github.com/user-attachments/assets/8fc58368-da93-4e43-8c99-d549125bc242">

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

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

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 <privacyPolicyLink>Privacy Policy</privacyPolicyLink> and <EULALink>End user license agreement</EULALink>",
   "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,20 @@
+import type { Meta, 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,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<typeof renderWithProviders> => {
+  return renderWithProviders(<Footer />, {
+    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'
+    )
+  })
+})

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 (
+    <Flex
+      width="100%"
+      height="88px"
+      backgroundColor={COLORS.grey10}
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
+      paddingTop={SPACING.spacing24}
+    >
+      <FooterText>
+        <Trans
+          i18nKey={t('privacy_policy')}
+          t={t}
+          components={{
+            privacyPolicyLink: (
+              <BlueLink
+                href="https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons-Labworks-Privacy-Policy-5-4-23.docx-1.pdf"
+                target="_blank"
+                rel="noopener noreferrer"
+              />
+            ),
+            EULALink: (
+              <BlueLink
+                href="https://insights.opentrons.com/hubfs/Legal%20Documentation/Opentrons%20EULA%2020240710.pdf"
+                target="_blank"
+                rel="noopener noreferrer"
+              />
+            ),
+          }}
+        />
+        <NewLineText>{t('copyright')}</NewLineText>
+      </FooterText>
+    </Flex>
+  )
+}