New Replit progress component

components/replit/form.js

@@ -258,9 +258,8 @@ const ReplitForm = ({ cssDark }) => {
     >
       <Text sx={{ fontWeight: '700' }}>Stickers</Text>
       <Text>
-        Get free stickers Get free stickers Get free stickers Get free stickers
-        Get free stickers Get free stickers Get free stickers Get free stickers
-        Get free stickers Get free stickers{' '}
+        Get free stickers! The first 5,000 people to use this tool get access to
+        a free sticker pack, courtesy of GitHub Education!
       </Text>
 
       {stickers.map((sticker, idx) => {
@@ -284,7 +283,13 @@ const ReplitForm = ({ cssDark }) => {
           />
         )
       })}
-      <Box sx={{ width: 'calc(100% + calc(1.82rem * 2))', marginX: '-1.82em' }}>
+      <Box
+        sx={{
+          width: 'calc(100% + calc(1.82rem * 2))',
+          marginX: '-1.82em',
+          pointerEvents: currentStep === 3 ? 'auto' : 'none'
+        }}
+      >
         <FilloutStandardEmbed filloutId="ji6Jw9xpBPus" />
       </Box>
       <StepIndicator step={3} />

components/replit/progress.js

@@ -0,0 +1,36 @@
+import { Progress, Text, Box } from 'theme-ui'
+
+const ProgressComponent = ({ progress }) => {
+  if (!progress) return null
+
+  const successCount = progress.successful + progress.failed.no_history
+  const failedCount = progress.failed.timed_out + progress.failed.failed
+  const processedCount = successCount + failedCount
+
+  let title
+
+  if (failedCount > 0) {
+    title = `${progress.failed.timed_out} timed out, ${progress.failed.failed} failed.`
+  }
+
+  return (
+    <Box sx={{ marginBottom: '1rem' }}>
+      {progress.completed ? (
+        <Text>Export complete! Check your email.</Text>
+      ) : (
+        <Text>
+          {processedCount} of {progress.repl_count} repls processed!
+          {title ? <Text>{title}</Text> : null}
+        </Text>
+      )}
+
+      <Progress
+        sx={{ color: 'hsl(23, 94%, 32%)', backgroundColor: 'smoke' }}
+        max={progress.repl_count}
+        value={processedCount}
+      ></Progress>
+    </Box>
+  )
+}
+
+export default ProgressComponent

pages/replit.js

@@ -1,19 +1,11 @@
-import {
-  Box,
-  Link,
-  Image,
-  Button,
-  Heading,
-  Text,
-  Card,
-  Progress
-} from 'theme-ui'
+import { Box, Link, Image, Button, Heading, Text, Card } from 'theme-ui'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Footer from '../components/footer'
 import Nav from '../components/nav'
 import ForceTheme from '../components/force-theme'
 import ReplitForm from '../components/replit/form'
+import Progress from '../components/replit/progress'
 import { useEffect, useState } from 'react'
 
 const ReplitPage = () => {
@@ -219,37 +211,7 @@ const ReplitPage = () => {
             marginX: 'auto'
           }}
         >
-          {progress ? (
-            <Box sx={{ marginBottom: '1rem' }}>
-              <Text>
-                {progress.successful} of {progress.repl_count} repls processed!
-                {progress.failed.timed_out + progress.failed.failed > 0 ? (
-                  <Text
-                    title={`${progress.failed.timed_out} timed out, ${progress.failed.failed} failed`}
-                  >
-                    {' '}
-                    (+ {progress.failed.timed_out + progress.failed.failed}{' '}
-                    error
-                    {progress.failed.timed_out + progress.failed.failed !== 1
-                      ? 's'
-                      : null}
-                    )
-                  </Text>
-                ) : null}
-              </Text>
-
-              <Progress
-                sx={{ color: cssDark, backgroundColor: 'smoke' }}
-                max={progress.repl_count}
-                value={
-                  progress.successful +
-                  progress.failed.timed_out +
-                  progress.failed.failed
-                }
-              ></Progress>
-            </Box>
-          ) : null}
-
+          <Progress progress={progress} />
           <ReplitForm cssDark={cssDark} />
         </Box>