From 04080dd8886e51d39f0ab526ce4ae89f32336b89 Mon Sep 17 00:00:00 2001
From: Jethary Rader <jethary@opentrons.com>
Date: Thu, 18 Nov 2021 11:21:02 -0500
Subject: [PATCH] feat(app): add LPC Success Toast

closes #8486
---
 .../assets/localization/en/protocol_info.json |  3 +-
 .../__tests__/ProtocolSetup.test.tsx          | 48 ++++++++++++++++++
 app/src/organisms/ProtocolSetup/index.tsx     | 50 +++++++++++++------
 3 files changed, 85 insertions(+), 16 deletions(-)
 create mode 100644 app/src/organisms/ProtocolSetup/__tests__/ProtocolSetup.test.tsx

diff --git a/app/src/assets/localization/en/protocol_info.json b/app/src/assets/localization/en/protocol_info.json
index 85e72dc39a3..2e9f479c847 100644
--- a/app/src/assets/localization/en/protocol_info.json
+++ b/app/src/assets/localization/en/protocol_info.json
@@ -46,5 +46,6 @@
   "rerunning_protocol_modal_header": "How Rerunning A Protocol Works",
   "rerunning_protocol_modal_body": "<block>Opentrons displays the connected robot’s last protocol run on on the Protocol Upload page. If you run again, Opentrons loads this protocol and applies Labware Offset data if any exists.</block><block>Clicking “Run Again” will take you directly to the Run tab. If you’d like to review the deck setup or run Labware Position Check before running the protocol, navigate to the Protocol tab.</block><block>If you recalibrate your robot, it will clear the last run from the upload page.</block>",
   "rerunning_protocol_modal_link": "Learn more about Labware Offset Data",
-  "no_labware_offset_data": "No Labware Offset data"
+  "no_labware_offset_data": "No Labware Offset data",
+  "labware_positon_check_complete_toast": "Labware Position Check complete. {{num_offsets}} Labware Offsets created."
 }
diff --git a/app/src/organisms/ProtocolSetup/__tests__/ProtocolSetup.test.tsx b/app/src/organisms/ProtocolSetup/__tests__/ProtocolSetup.test.tsx
new file mode 100644
index 00000000000..af2e680d2d3
--- /dev/null
+++ b/app/src/organisms/ProtocolSetup/__tests__/ProtocolSetup.test.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import '@testing-library/jest-dom'
+import { renderWithProviders } from '@opentrons/components'
+import { AlertItem } from '@opentrons/components/src/alerts'
+import { i18n } from '../../../i18n'
+import { RunSetupCard } from '../RunSetupCard'
+import { MetadataCard } from '../MetadataCard'
+import { ProtocolSetup } from '..'
+import { fireEvent } from '@testing-library/dom'
+
+jest.mock('../MetadataCard')
+jest.mock('../RunSetupCard')
+jest.mock('@opentrons/components/src/alerts')
+
+const mockMetadataCard = MetadataCard as jest.MockedFunction<
+  typeof MetadataCard
+>
+const mockRunSetupCard = RunSetupCard as jest.MockedFunction<
+  typeof RunSetupCard
+>
+const mockAlertItem = AlertItem as jest.MockedFunction<typeof AlertItem>
+
+describe('ProtocolSetup', () => {
+  const render = () => {
+    return renderWithProviders(<ProtocolSetup />, { i18nInstance: i18n })[0]
+  }
+
+  beforeEach(() => {
+    mockMetadataCard.mockReturnValue(<div>Mock MetadataCard</div>)
+    mockRunSetupCard.mockReturnValue(<div>Mock ReunSetupCard</div>)
+    mockAlertItem.mockReturnValue(<div>Mock AlertItem</div>)
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('renders metadata and run setup card', () => {
+    const { getByText } = render()
+    getByText('Mock MetadataCard')
+    getByText('Mock ReunSetupCard')
+  })
+  it('renders LPC success toast and is clickable', () => {
+    const { getByText } = render()
+    const successToast = getByText('Mock AlertItem')
+    fireEvent.click(successToast)
+  })
+})
diff --git a/app/src/organisms/ProtocolSetup/index.tsx b/app/src/organisms/ProtocolSetup/index.tsx
index fc0b5bfdf4e..464a015a259 100644
--- a/app/src/organisms/ProtocolSetup/index.tsx
+++ b/app/src/organisms/ProtocolSetup/index.tsx
@@ -9,6 +9,9 @@ import {
   Flex,
   Text,
   Link,
+  AlertItem,
+  SPACING_1,
+  SPACING_2,
 } from '@opentrons/components'
 import { RunSetupCard } from './RunSetupCard'
 import { MetadataCard } from './MetadataCard'
@@ -18,22 +21,39 @@ const feedbackFormLink =
 
 export function ProtocolSetup(): JSX.Element {
   const { t } = useTranslation('protocol_setup')
+  const [dismissed, setDismissed] = React.useState(false)
   return (
-    <Flex
-      flexDirection={DIRECTION_COLUMN}
-      padding={SPACING_3}
-      alignItems={ALIGN_CENTER}
-    >
-      <MetadataCard />
-      <RunSetupCard />
-      <Text
-        fontSize={FONT_SIZE_BODY_2}
-        paddingTop={SPACING_3}
-        color={C_DARK_GRAY}
+    <>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        padding={`${SPACING_1} ${SPACING_2} ${SPACING_1} ${SPACING_2}`}
       >
-        {t('protocol_upload_revamp_feedback')}
-        <Link href={feedbackFormLink}> {t('feedback_form_link')}</Link>
-      </Text>
-    </Flex>
+        {!dismissed && (
+          <AlertItem
+            type="success"
+            onCloseClick={() => setDismissed(true)}
+            title={t('labware_positon_check_complete_toast', {
+              num_offsets: 2, //  TODO wire up num_offsets!
+            })}
+          />
+        )}
+      </Flex>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        alignItems={ALIGN_CENTER}
+        padding={`${SPACING_1} ${SPACING_3} ${SPACING_3} ${SPACING_3}`}
+      >
+        <MetadataCard />
+        <RunSetupCard />
+        <Text
+          fontSize={FONT_SIZE_BODY_2}
+          paddingTop={SPACING_3}
+          color={C_DARK_GRAY}
+        >
+          {t('protocol_upload_revamp_feedback')}
+          <Link href={feedbackFormLink}> {t('feedback_form_link')}</Link>
+        </Text>
+      </Flex>
+    </>
   )
 }