diff --git a/apps/console/app/components/Billing/seating.tsx b/apps/console/app/components/Billing/seating.tsx index 63d5ca14ce..83202603c9 100644 --- a/apps/console/app/components/Billing/seating.tsx +++ b/apps/console/app/components/Billing/seating.tsx @@ -1,3 +1,4 @@ +import { Listbox, Transition } from '@headlessui/react' import { Button } from '@proofzero/design-system' import { Text } from '@proofzero/design-system/src/atoms/text/Text' import { ToastWithLink } from '@proofzero/design-system/src/atoms/toast/ToastWithLink' @@ -9,6 +10,9 @@ import classnames from 'classnames' import { useState } from 'react' import { FaTrash } from 'react-icons/fa' import { + HiArrowNarrowRight, + HiChevronDown, + HiChevronUp, HiMinus, HiOutlineShoppingCart, HiOutlineX, @@ -180,20 +184,219 @@ export const PurchaseGroupSeatingModal = ({ ) } +export const RemoveGroupSeatingModal = ({ + isOpen, + setIsOpen, + removalFn, + seatsUsed, + totalSeats, + paymentIsSetup, +}: { + isOpen: boolean + setIsOpen: (open: boolean) => void + removalFn: (quantity: number) => void + seatsUsed: number + totalSeats: number + paymentIsSetup: boolean +}) => { + const [seatsNew, setSeatsNew] = useState(seatsUsed) + return ( + setIsOpen(false)}> +
+
+ + Remove Additional User Seat(s) + +
{ + setIsOpen(false) + }} + > + +
+
+
+
+
+ + Additional User Seats + +
    +
  • + You are currently using {seatsUsed}/{totalSeats} Additional + User Seats +
  • +
  • + You can remove some Members of your Group if you'd like to pay + for fewer Seats. +
  • +
+
+
+
+
+ + Number of Additional Seats + + {`${totalSeats} x ${seatingCost}/month`} +
+ +
+
+ {totalSeats} Entitlements + +
+ +
+ + {({ open }) => { + return ( +
+ + {seatsNew} + {open ? ( + + ) : ( + + )} + + + + {Array.apply(null, Array(totalSeats + 1)).map( + (_, i) => { + return i >= seatsUsed ? ( + + {({ selected }) => { + return ( +
+ {i} +
+ ) + }} +
+ ) : null + } + )} +
+
+
+ ) + }} +
+
+
+
+
+ +
+ + Changes to your subscription + + +
+ {`${ + seatingCost * (totalSeats - seatsNew) !== 0 ? '-' : '' + }$${seatingCost * (totalSeats - seatsNew)}`} + + per month + +
+
+
+
+
+ + +
+
+
+ ) +} + export const GroupSeatingCard = ({ groupID, seatsTotal, seatsUsed, paymentData, purchaseFn, + removalFn, }: { groupID: string seatsTotal: number seatsUsed: number paymentData?: PaymentData purchaseFn: (quantity: number) => void + removalFn: (quantity: number) => void }) => { const [isPurchaseModalOpen, setIsPurchaseModalOpen] = useState(false) + const [isRemovalModalOpen, setIsRemovalModalOpen] = useState(false) return ( <> @@ -205,6 +408,15 @@ export const GroupSeatingCard = ({ purchaseFn={purchaseFn} /> + +
@@ -305,6 +517,7 @@ export const GroupSeatingCard = ({