Skip to content

Commit

Permalink
Improve accessibility of pricing dialog and checkout
Browse files Browse the repository at this point in the history
  • Loading branch information
@synzen
synzen committed Feb 19, 2025
1 parent 2c8c540 commit e4b9357
Show file tree
Hide file tree
Showing 10 changed files with 534 additions and 425 deletions.
10 changes: 9 additions & 1 deletion services/backend-api/client/src/components/AccessibleNavigationAnnouncer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { chakra } from "@chakra-ui/react";
import { pages } from "../../constants";

export const AccessibleNavigationAnnouncer = () => {
// the message that will be announced
Expand All @@ -14,7 +15,14 @@ export const AccessibleNavigationAnnouncer = () => {
if (location.pathname.slice(1)) {
// make sure navigation has occurred and screen reader is ready
setTimeout(() => {
setMessage(`Navigated to ${location.pathname.slice(1)} page.`);
const checkoutRootPath = pages.checkout(":id").split("/")[0];

if (location.pathname.includes(checkoutRootPath)) {
setMessage(`Navigated to checkout page.`);
} else {
setMessage(`Navigated to ${location.pathname.slice(1)} page.`);
}

const h1Element = document.querySelector("h1");

if (h1Element) {
Expand Down
151 changes: 90 additions & 61 deletions services/backend-api/client/src/components/ChangeSubscriptionDialog/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import {
Box,
Button,
Divider,
HStack,
Heading,
Flex,
Link,
Modal,
ModalBody,
Expand All @@ -14,7 +12,12 @@ import {
ModalOverlay,
Skeleton,
Stack,
Table,
TableContainer,
Tbody,
Td,
Text,
Tr,
} from "@chakra-ui/react";
import { useRef } from "react";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -147,9 +150,9 @@ export const ChangeSubscriptionDialog = ({
<Text>{product?.name}</Text>
{!data && <Skeleton width={64} height={12} mt={2} />}
{data && price && (
<Heading size="lg">
<Text fontSize="xx-large" fontWeight={700}>
{price?.formattedPrice}/{price?.interval}
</Heading>
</Text>
)}
{!data && <Skeleton width={64} height={6} mt={2} />}
{data && (
Expand All @@ -173,64 +176,90 @@ export const ChangeSubscriptionDialog = ({
)}
</Box>
</Stack>
<Divider />
<Stack>
<HStack justifyContent="space-between">
<Box>
<Text>Subtotal</Text>
<Text color="whiteAlpha.700" fontSize={14}>
for remaining time on new plan
</Text>
</Box>
{!data && <Skeleton width={16} height={6} />}
{data && <Text>{data.data.immediateTransaction.subtotalFormatted}</Text>}
</HStack>
<HStack justifyContent="space-between">
<Box>
<Text>Tax</Text>
<Text color="whiteAlpha.700" fontSize={14}>
Included in plan price
</Text>
</Box>
{!data && <Skeleton width={16} height={6} />}
{data && <Text>{data.data.immediateTransaction.taxFormatted}</Text>}
</HStack>
<HStack justifyContent="space-between">
<Box>
<Text>Total</Text>
</Box>
{!data && <Skeleton width={16} height={6} />}
{data && <Text>{data.data.immediateTransaction.totalFormatted}</Text>}
</HStack>
{data && data.data.immediateTransaction.credit !== "0" && (
<HStack justifyContent="space-between">
<Box>
<Text>Credit</Text>
<Text color="whiteAlpha.700" fontSize={14}>
Includes refund for time remaining on current plan
</Text>
</Box>
{!data && <Skeleton width={16} height={6} />}
{data && (
<Text color="green.200">
-{data.data.immediateTransaction.creditFormatted}
</Text>
<TableContainer pt={4}>
<Table variant="unstyled">
<Tbody>
<Tr>
<Td padding={0}>
<Text>Subtotal</Text>
<Text color="whiteAlpha.700" fontSize={14}>
for remaining time on new plan
</Text>
</Td>
<Td textAlign="right" p={0}>
<Flex justifyContent="flex-end">
{!data && <Skeleton width={16} height={6} />}
{data && (
<Text>{data.data.immediateTransaction.subtotalFormatted}</Text>
)}
</Flex>
</Td>
</Tr>
<Tr>
<Td pt={4} pl={0} pr={0} pb={0}>
<Text>Tax</Text>
<Text color="whiteAlpha.700" fontSize={14}>
Included in plan price
</Text>
</Td>
<Td textAlign="right" p={0}>
<Flex justifyContent="flex-end">
{!data && <Skeleton width={16} height={6} />}
{data && <Text>{data.data.immediateTransaction.taxFormatted}</Text>}
</Flex>
</Td>
</Tr>
<Tr>
<Td pt={4} pl={0} pr={0} pb={0}>
<Text>Total</Text>
</Td>
<Td textAlign="right" p={0}>
<Flex justifyContent="flex-end">
{!data && <Skeleton width={16} height={6} />}
{data && <Text>{data.data.immediateTransaction.totalFormatted}</Text>}
</Flex>
</Td>
</Tr>
{data && data.data.immediateTransaction.credit !== "0" && (
<Tr>
<Td pt={4} pl={0} pr={0} pb={0}>
<Text>Credit</Text>
<Text color="whiteAlpha.700" fontSize={14}>
Includes refund for time remaining on current plan
</Text>
</Td>
<Td p={0} textAlign="right">
<Flex justifyContent="flex-end">
{!data && <Skeleton width={16} height={6} />}
{data && (
<Text color="green.200">
-{data.data.immediateTransaction.creditFormatted}
</Text>
)}
</Flex>
</Td>
</Tr>
)}
</HStack>
)}
<Divider my={4} />
<HStack justifyContent="space-between">
<Text fontWeight="semibold">Due Today</Text>
{!data && <Skeleton width={16} height={6} />}
{data && (
<Text fontWeight="bold">
{data.data.immediateTransaction.grandTotalFormatted}
</Text>
)}
</HStack>
</Stack>
</Tbody>
<Tr>
<Td pt={8} pl={0} pr={0} pb={0}>
<Text fontWeight="bold">Due Today</Text>
</Td>
<Td textAlign="right" pt={8} pl={0} pr={0} pb={0}>
<Flex justifyContent="flex-end">
{!data && <Skeleton width={16} height={6} />}
{data && (
<Text fontWeight="bold">
{data.data.immediateTransaction.grandTotalFormatted}
</Text>
)}
</Flex>
</Td>
</Tr>
</Table>
</TableContainer>
</Stack>
<Text color="whiteAlpha.700">
<Text color="whiteAlpha.700" pt={4}>
By proceeding, you are agreeing to our{" "}
<Link target="_blank" href="https://monitorss.xyz/terms" color="blue.300">
terms and conditions
Expand Down
4 changes: 2 additions & 2 deletions services/backend-api/client/src/components/FAQ/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from "@chakra-ui/react";

const FAQItem = ({ q, a }: { q: string; a: string | React.ReactNode }) => (
<AccordionItem>
<AccordionItem role="listitem">
<AccordionButton py={8}>
{/* <Box as="span" flex="1" textAlign="left"> */}
<Text fontWeight={600} size="lg" textAlign="left" flex="1">
Expand All @@ -22,7 +22,7 @@ const FAQItem = ({ q, a }: { q: string; a: string | React.ReactNode }) => (
);

export const FAQ = ({ items }: { items: Array<{ q: string; a: string | React.ReactNode }> }) => (
<Accordion allowMultiple borderRadius="lg">
<Accordion allowMultiple borderRadius="lg" role="list" tabIndex={-1}>
{items.map(({ q, a }) => (
<FAQItem q={q} a={a} key={q} />
))}
Expand Down
Loading

0 comments on commit e4b9357

Please sign in to comment.