feat(protocol-designer, components): analytics opt-in modal and footer

closes AUTH-967, AUTH-888, AUTH-792

components/src/modals/Modal.tsx

@@ -6,6 +6,7 @@ import { ModalHeader } from './ModalHeader'
 import { ModalShell } from './ModalShell'
 import type { IconProps } from '../icons'
 import type { StyleProps } from '../primitives'
+import type { Position } from './ModalShell'
 
 type ModalType = 'info' | 'warning' | 'error'
 
@@ -21,6 +22,8 @@ export interface ModalProps extends StyleProps {
   children?: React.ReactNode
   footer?: React.ReactNode
   zIndexOverlay?: number
+  showOverlay?: boolean
+  position?: Position
 }
 
 /**
@@ -38,6 +41,8 @@ export const Modal = (props: ModalProps): JSX.Element => {
     titleElement1,
     titleElement2,
     zIndexOverlay,
+    position,
+    showOverlay,
     ...styleProps
   } = props
 
@@ -72,9 +77,10 @@ export const Modal = (props: ModalProps): JSX.Element => {
       backgroundColor={COLORS.white}
     />
   )
-
   return (
     <ModalShell
+      position={position}
+      showOverlay={showOverlay}
       zIndexOverlay={zIndexOverlay}
       width={styleProps.width ?? '31.25rem'}
       header={modalHeader}

components/src/modals/ModalShell.tsx

@@ -2,8 +2,10 @@ import type * as React from 'react'
 import styled from 'styled-components'
 import {
   ALIGN_CENTER,
+  ALIGN_END,
   CURSOR_DEFAULT,
   JUSTIFY_CENTER,
+  JUSTIFY_END,
   OVERFLOW_AUTO,
   POSITION_ABSOLUTE,
   POSITION_RELATIVE,
@@ -15,6 +17,7 @@ import { styleProps } from '../primitives'
 
 import type { StyleProps } from '../primitives'
 
+export type Position = 'center' | 'bottomRight'
 export interface ModalShellProps extends StyleProps {
   /** Modal content */
   children: React.ReactNode
@@ -28,6 +31,10 @@ export interface ModalShellProps extends StyleProps {
   fullPage?: boolean
   /** Optional zIndex for the overlay */
   zIndexOverlay?: number
+  /** Optional position to make the modal appear at the center or bottom right */
+  position?: Position
+  /** Optional visible overlay */
+  showOverlay?: boolean
 }
 
 /**
@@ -49,19 +56,22 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
     fullPage = false,
     children,
     zIndexOverlay = 1,
+    position = 'center',
+    showOverlay = true,
     ...styleProps
   } = props
 
   return (
     <Overlay
+      showOverlay={showOverlay}
       zIndex={zIndexOverlay}
       aria-label="BackgroundOverlay_ModalShell"
       onClick={(e: React.MouseEvent) => {
         e.stopPropagation()
         if (onOutsideClick != null) onOutsideClick(e)
       }}
     >
-      <ContentArea zIndex={zIndex}>
+      <ContentArea zIndex={zIndex} position={position}>
         <ModalArea
           aria-label="ModalShell_ModalArea"
           isFullPage={fullPage}
@@ -78,22 +88,27 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
     </Overlay>
   )
 }
-const Overlay = styled.div<{ zIndex: string | number }>`
+const Overlay = styled.div<{ zIndex: string | number; showOverlay: boolean }>`
   position: ${POSITION_ABSOLUTE};
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: ${({ zIndex }) => zIndex};
-  background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
+  background-color: ${({ showOverlay }) =>
+    showOverlay
+      ? `${COLORS.black90}${COLORS.opacity40HexCode}`
+      : COLORS.transparent};
   cursor: ${CURSOR_DEFAULT};
 `
 
-const ContentArea = styled.div<{ zIndex: string | number }>`
+const ContentArea = styled.div<{ zIndex: string | number; position: Position }>`
   display: flex;
   position: ${POSITION_ABSOLUTE};
-  align-items: ${ALIGN_CENTER};
-  justify-content: ${JUSTIFY_CENTER};
+  align-items: ${({ position }) =>
+    position === 'center' ? ALIGN_CENTER : ALIGN_END};
+  justify-content: ${({ position }) =>
+    position === 'center' ? JUSTIFY_CENTER : JUSTIFY_END};
   top: 0;
   right: 0;
   bottom: 0;

components/src/organisms/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.tsx

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+import { EndUserAgreementFooter } from '../index'
+
+const render = () => {
+  return renderWithProviders(<EndUserAgreementFooter />)
+}
+
+describe('EndUserAgreementFooter', () => {
+  it('should render text and links', () => {
+    render()
+    screen.getByText('Copyright © 2024 Opentrons')
+    expect(
+      screen.getByRole('link', { name: 'privacy policy' })
+    ).toHaveAttribute('href', 'https://opentrons.com/privacy-policy')
+    expect(
+      screen.getByRole('link', { name: 'end user license agreement' })
+    ).toHaveAttribute('href', 'https://opentrons.com/eula')
+  })
+})

components/src/organisms/EndUserAgreementFooter/index.tsx

@@ -0,0 +1,47 @@
+import { StyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
+import { Flex, Link } from '../../primitives'
+import { DIRECTION_COLUMN, TEXT_DECORATION_UNDERLINE } from '../../styles'
+import { SPACING } from '../../ui-style-constants'
+
+const PRIVACY_POLICY_URL = 'https://opentrons.com/privacy-policy'
+const EULA_URL = 'https://opentrons.com/eula'
+
+//  TODO(ja: 10/22/24): figure out the i18n stuff since components package.json does not have i18n and
+//  should not have i18n (since other projects use it). Due to the links, we would need access to both t and Trans
+export function EndUserAgreementFooter(): JSX.Element {
+  return (
+    <Flex
+      backgroundColor={COLORS.grey20}
+      padding={SPACING.spacing24}
+      width="100%"
+      alignItems="center"
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing8}
+    >
+      <StyledText desktopStyle="captionRegular">
+        By continuing, you agree to the Opentrons{' '}
+        <Link
+          external
+          href={PRIVACY_POLICY_URL}
+          color={COLORS.black90}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
+        >
+          privacy policy
+        </Link>{' '}
+        and{' '}
+        <Link
+          external
+          href={EULA_URL}
+          color={COLORS.black90}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
+        >
+          end user license agreement
+        </Link>
+      </StyledText>
+      <StyledText desktopStyle="captionRegular">
+        Copyright © 2024 Opentrons
+      </StyledText>
+    </Flex>
+  )
+}

components/src/organisms/index.ts

@@ -1,2 +1,3 @@
 export * from './DeckLabelSet'
+export * from './EndUserAgreementFooter'
 export * from './Toolbox'

protocol-designer/src/ProtocolEditor.tsx

@@ -16,7 +16,7 @@ import { PrereleaseModeIndicator } from './components/PrereleaseModeIndicator'
 import { PortalRoot as TopPortalRoot } from './components/portals/TopPortal'
 import { FileUploadMessageModal } from './components/modals/FileUploadMessageModal/FileUploadMessageModal'
 import { LabwareUploadMessageModal } from './components/modals/LabwareUploadMessageModal/LabwareUploadMessageModal'
-import { GateModal } from './components/modals/GateModal'
+import { GateModal } from './organisms/GateModal'
 import { CreateFileWizard } from './components/modals/CreateFileWizard'
 import { AnnouncementModal } from './organisms'
 import { ProtocolRoutes } from './ProtocolRoutes'

protocol-designer/src/ProtocolRoutes.tsx

@@ -12,6 +12,7 @@ import {
   FileUploadMessagesModal,
   LabwareUploadModal,
   AnnouncementModal,
+  GateModal,
 } from './organisms'
 
 import type { RouteProps } from './types'
@@ -57,12 +58,15 @@ export function ProtocolRoutes(): JSX.Element {
     path: '/',
   }
   const allRoutes: RouteProps[] = [...pdRoutes, landingPage]
+  const showGateModal =
+    process.env.NODE_ENV === 'production' || process.env.OT_PD_SHOW_GATE
 
   return (
     <>
       <NavigationBar />
       <Kitchen>
         <Box width="100%">
+          {showGateModal ? <GateModal /> : null}
           <AnnouncementModal />
           <LabwareUploadModal />
           <FileUploadMessagesModal />

protocol-designer/src/assets/localization/en/shared.json

@@ -1,5 +1,7 @@
 {
   "add": "add",
+  "agree": "Agree",
+  "analytics_tracking": "I consent to analytics tracking:",
   "amount": "Amount:",
   "app_settings": "App settings",
   "ask_for_labware_overwrite": "Duplicate labware name",
@@ -101,8 +103,10 @@
   "protocol_designer": "Protocol Designer",
   "re_export": "To use this definition, use Labware Creator to give it a unique load name and display name.",
   "remove": "remove",
+  "reject": "Reject",
   "reset_hints_and_tips": "Reset all hints and tips notifications",
   "reset_hints": "Reset hints",
+  "review_our_privacy_policy": "You can adjust this setting at any time by clicking on the settings icon. Find detailed information in our <link1>privacy policy</link1>.",
   "right": "Right",
   "save": "Save",
   "settings": "Settings",
@@ -115,6 +119,7 @@
   "stagingArea": "Staging area",
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
+  "consent_to_eula": "By using Protocol Designer, you consent to the Opentrons <link1>EULA</link1>.",
   "temperaturemoduletype": "Temperature Module",
   "thermocyclermoduletype": "Thermocycler Module",
   "trashBin": "Trash Bin",
@@ -127,5 +132,6 @@
   "wasteChuteAndStagingArea": "Waste chute and staging area slot",
   "we_are_improving": "In order to improve our products, Opentrons would like to collect data related to your use of Protocol Designer. With your consent, Opentrons will collect and store analytics and session data, including through the use of cookies and similar technologies, solely for the purpose enhancing our products. Find detailed information in our <link1>privacy policy</link1>. By using Protocol Designer, you consent to the Opentrons <link2>EULA</link2>.",
   "welcome": "Welcome to Protocol Designer!",
+  "opentrons_collects_data": "In order to improve our products, Opentrons would like to collect data related to your use of Protocol Designer. With your consent, Opentrons will collect and store analytics and session data, including through the use of cookies and similar technologies, solely for the purpose enhancing our products.",
   "yes": "Yes"
 }