Adjustment to write testimony flow (update of #1440)

components/EditProfilePage/TestimoniesTab.tsx

@@ -56,8 +56,6 @@ export const TestimoniesTab = ({
  testimony={t}
  isUser={true}
  onProfilePage={true}
- canEdit={true}
- canDelete={false}
  />
  ))}
  </TitledSectionCard>
@@ -69,8 +67,6 @@ export const TestimoniesTab = ({
  testimony={t}
  isUser={true}
  onProfilePage={true}
- canEdit={true}
- canDelete={false}
  />
  ))}
  </TitledSectionCard>

components/TestimonyCard/TestimonyItem.tsx

@@ -1,14 +1,15 @@
-import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
-import { ViewAttachment } from "components/ViewAttachment"
-import { useReportTestimony } from "components/api/report"
-import { formUrl } from "components/publish/hooks"
-import { TestimonyContent } from "components/testimony"
 import { useTranslation } from "next-i18next"
 import { ReactNode, useState } from "react"
 import { ButtonProps } from "react-admin"
 import { ToastContainer } from "react-bootstrap"
 import Image from "react-bootstrap/Image"
 import { useMediaQuery } from "usehooks-ts"
+
+import { useReportTestimony } from "components/api/report"
+import { formUrl } from "components/publish/hooks"
+import { TestimonyContent } from "components/testimony"
+import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
+import { ViewAttachment } from "components/ViewAttachment"
 import { Button, Col, Row, Stack } from "../bootstrap"
 import { Testimony } from "../db"
 import { Internal, maple } from "../links"
@@ -21,6 +22,7 @@ type FooterButtonProps = Omit<ButtonProps, "children"> & {
  className?: string
  children?: ReactNode
 }
+
 const FooterButton = ({
  variant = "text",
  className,
@@ -39,14 +41,10 @@ const FooterButton = ({
 export const TestimonyItem = ({
  testimony,
  isUser,
- canEdit,
- canDelete,
  onProfilePage
 }: {
  testimony: Testimony
  isUser: boolean
- canEdit?: boolean
- canDelete?: boolean
  onProfilePage: boolean
 }) => {
  const isMobile = useMediaQuery("(max-width: 768px)")
@@ -76,6 +74,24 @@ export const TestimonyItem = ({
 
  const { t } = useTranslation("testimony")
 
+ const IconSpacer = () => {
+ /* this image does not appear to display anything, *
+ * however it acts as a spacing element *
+ * *
+ * removing this image will throw off the alignment vs *
+ * the nearby elements that contain visible icons */
+
+ return (
+ <Image
+ className="ms-auto align-self-center"
+ src="/edit-testimony.svg"
+ alt={t("testimonyItem.editIcon") ?? "Edit icon"}
+ height={40}
+ width={0}
+ />
+ )
+ }
+
  return (
  <div className={`py-3 px-2 ${onProfilePage && "border-bottom border-2"}`}>
  <div className={`border-0 h5 d-flex`}>
@@ -123,6 +139,7 @@ export const TestimonyItem = ({
  onClick={() => setShowAllTestimony(true)}
  >
  {t("testimonyItem.expand")}
+ <IconSpacer />
  </FooterButton>
  </Col>
  )}
@@ -134,6 +151,7 @@ export const TestimonyItem = ({
  href={maple.testimony({ publishedId: testimony.id })}
  >
  {t("testimonyItem.moreDetails")}
+ <IconSpacer />
  </Internal>
  </FooterButton>
  </Col>
@@ -142,31 +160,38 @@ export const TestimonyItem = ({
  <Col className="d-flex">
  <FooterButton variant="text">
  <ViewAttachment testimony={testimony} />
+
+ {/* Current bug Issue #1564 makes this instance of IconSpacer hard to test *
+ * Please revisit once #1564 is resolved */}
+ <IconSpacer />
  </FooterButton>
  </Col>
  )}
- {isUser && !isMobile && (
- <>
- {onProfilePage && (
- <Col>
- <FooterButton variant="text">
- <Internal
- className={`text-decoration-none text-secondary`}
- href={formUrl(testimony.billId, testimony.court)}
- >
- {t("testimonyItem.edit")}
- </Internal>
- </FooterButton>
- </Col>
- )}
- </>
- )}
- {/* report */}
  <Col xs="auto">
  <FooterButton variant="text" onClick={() => setIsReporting(true)}>
  Report
+ <IconSpacer />
  </FooterButton>
  </Col>
+ {isUser && !isMobile && (
+ <Col>
+ <FooterButton variant="text">
+ <Internal
+ className={`text-decoration-none text-secondary`}
+ href={formUrl(testimony.billId, testimony.court)}
+ >
+ Edit
+ <Image
+ className="px-2 ms-auto align-self-center"
+ src="/edit-testimony.svg"
+ alt={t("testimonyItem.editIcon") ?? "Edit icon"}
+ height={40}
+ width={40}
+ />
+ </Internal>
+ </FooterButton>
+ </Col>
+ )}
  </Row>
  </Stack>
 

components/publish/KeepNote.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components"
 import { useState } from "react"
+import { Link } from "react-admin"
 import { Image, Button, Modal, Col, Row } from "../bootstrap"
 import { Step } from "./redux"
 
@@ -97,7 +98,7 @@ export const YourTestimony = () => {
  </NoteItem>
  <NoteItem>
  When you send this email, you are submitting formal public testimony!
- As fellow constituents, we thank you for your sharing your voice.
+ As fellow constituents, we thank you for sharing your voice.
  </NoteItem>
  </ul>
  </NoteContent>
@@ -117,8 +118,9 @@ export const PublishingToMAPLE = () => {
  will remain available.
  </NoteItem>
  <NoteItem>
- Since MAPLE is an archive you cannot remove your testimony from the
- site.
+ Since MAPLE is an archive, you cannot remove your testimony from the
+ site. You may request a deletion in certain circumstances (see our{" "}
+ <Link to="/about/faq-page">FAQ page</Link>)
  </NoteItem>
  <NoteItem>Don't forget to send the email to your legislator.</NoteItem>
  </ul>

components/publish/ProgressBar.tsx

@@ -1,9 +1,9 @@
+import { faCheck } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import styled from "styled-components"
 import { isComplete, isCurrent, Step } from "./redux"
 import { chipHeight, StepChip } from "./StepChip"
-import { faCheck } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { join } from "lodash"
+
 const Divider = styled.div`
  height: 1px;
  background-color: var(--bs-gray-500);

components/publish/QuickInfo.tsx

@@ -76,7 +76,7 @@ export const Chip = styled.div`
  background: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
- padding: 2rem 1rem 1rem 1rem;
+ padding: 1rem 1rem 1rem 1rem;
  height: 100%;
  `
 

components/publish/SelectRecipients.tsx

@@ -6,7 +6,7 @@ import { cloneDeep, fromPairs, isString, last, sortBy } from "lodash"
 import { useEffect } from "react"
 import { components, GroupBase, MultiValueGenericProps } from "react-select"
 import styled from "styled-components"
-import { Button } from "../bootstrap"
+import { Button, Col, Row } from "../bootstrap"
 import { CopyButton } from "../buttons"
 import { useMemberSearch } from "../db"
 import { useProfileState } from "../db/profile/redux"
@@ -25,14 +25,34 @@ import {
 
 export const SelectRecipients = styled(props => {
  useEmailRecipients()
+ const email = useTestimonyEmail()
 
  return (
  <div {...props}>
- <div className="d-flex justify-content-between">
- <div className="fs-4">Email Recipients</div>
- <RecipientControls />
- </div>
- <SelectLegislatorEmails className="mt-2" />
+ <Row className="d-flex">
+ <Col className="fs-4" md={9} xs={12}>
+ Email Recipients
+ </Col>
+ <Col md={3} xs={12}>
+ <RecipientControls />
+ </Col>
+ </Row>
+ <SelectLegislatorEmails className="my-2" />
+ <Row className="d-flex">
+ <Col md={3}>
+ {email.to ? (
+ <CopyButton
+ key="copy"
+ variant="outline-secondary"
+ text={email.to}
+ className="copy py-1 px-2"
+ format="text/plain"
+ >
+ <FontAwesomeIcon icon={faCopy} /> Copy Email Recipients
+ </CopyButton>
+ ) : null}
+ </Col>
+ </Row>
  </div>
  )
 })`
@@ -103,19 +123,6 @@ const RecipientControls = styled(({ className }) => {
  </Button>
  )
 
- if (email.to)
- buttons.push(
- <CopyButton
- key="copy"
- variant="outline-secondary"
- text={email.to}
- className="copy"
- format="text/plain"
- >
- <FontAwesomeIcon icon={faCopy} /> Copy Email Recipients
- </CopyButton>
- )
-
  return <div className={clsx("d-flex gap-4", className)}>{buttons}</div>
 })`
  flex-wrap: wrap;

components/publish/SubmitTestimonyForm.tsx

@@ -1,62 +1,41 @@
 import clsx from "clsx"
+import { useState } from "react"
 import styled from "styled-components"
-import {
- Col,
- Container,
- Image,
- Row,
- Spinner,
- Button,
- Collapse,
- Modal
-} from "../bootstrap"
+import { useMediaQuery } from "usehooks-ts"
+
+import { Col, Image, Row, Spinner, Collapse } from "../bootstrap"
 import { Bill, Profile } from "../db"
 import * as links from "../links"
 import { ChooseStance } from "./ChooseStance"
 import { useFormInfo } from "./hooks"
-import { useState } from "react"
-import { useMediaQuery } from "usehooks-ts"
+import { KeepNote, KeepNoteMobile } from "./KeepNote"
 import { ProgressBar } from "./ProgressBar"
-import { PublishInfo } from "./PublishInfo"
 import { PublishTestimony } from "./PublishTestimony"
 import { QuickInfo } from "./QuickInfo"
 import { Step } from "./redux"
 import { SelectLegislatorsCta } from "./SelectLegislatorsCta"
 import { ShareTestimony } from "./ShareTestimony"
 import { WriteTestimony } from "./WriteTestimony"
-import { KeepNote, KeepNoteMobile } from "./KeepNote"
 
 const Background = styled.div`
  background: var(--bs-white);
  height: 100%;
 `
 
-const StyledContainer = styled(Container)`
- font-family: "Nunito";
- background: var(--bs-white);
- width: 100%;
- margin: 0;
-`
-
 export const SubmitTestimonyForm = () => {
  const form = useFormInfo()
  const isMobile = useMediaQuery("(max-width: 768px)")
 
  return form.ready ? (
  <Background className="p-0">
- {/* <StyledContainer className="pl-4"> */}
-
- <Row className="px-4 fixed-top" style={{ marginTop: 80 }}>
+ <Row className="px-4">
  <Col xs={12}>
  {isMobile ? (
  <PolicyDetails bill={form.bill} profile={form.profile} />
  ) : null}
  </Col>
  </Row>
- <Row
- className="g-0 h-100"
- style={isMobile ? { paddingTop: 56 } : { paddingTop: 0 }}
- >
+ <Row className="g-0 h-100">
  <Col md={9} xs={12} className="px-4">
  <Form step={form.step} bill={form.bill} synced={form.synced} />
  </Col>
@@ -68,7 +47,6 @@ export const SubmitTestimonyForm = () => {
  )}
  </Col>
  </Row>
- {/* </StyledContainer> */}
  </Background>
  ) : (
  <Spinner animation="border" />
@@ -111,7 +89,7 @@ const PolicyDetails = ({ bill, profile }: { bill: Bill; profile: Profile }) => {
  {isCollapsed ? (
  <div>View Less Details &#9650;</div>
  ) : (
- <div>View Policy Details &#9660;</div>
+ <div>View Bill Details &#9660;</div>
  )}
  </div>
  </PolicyDetailsStyle>

stories/organisms/Testimony/TetimonyItem.stories.tsx

@@ -30,8 +30,6 @@ export const Primary: Story = {
  args: {
  testimony: createMockTestimony("H1002", "userId"),
  isUser: true,
- canEdit: true,
- canDelete: true,
  onProfilePage: true
  },
  name: "Testimony Item"

stories_hold/organisms/profile/UserTestimonyListCard.stories.tsx

@@ -70,7 +70,5 @@ Primary.args = {
  fullName: ""
  },
  isUser: true,
- canEdit: true,
- canDelete: false,
  onProfilePage: true
 }