From ec583721c26403f166b8b39a45a2806f7bf835be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?= Date: Fri, 15 Sep 2023 11:45:20 +0300 Subject: [PATCH 1/3] feat(console): Seat removal --- .../app/components/Billing/seating.tsx | 213 ++++++++++++++++++ .../__layout/billing/groups/$groupID.tsx | 15 ++ 2 files changed, 228 insertions(+) diff --git a/apps/console/app/components/Billing/seating.tsx b/apps/console/app/components/Billing/seating.tsx index 90b52dd1c0..45de1ee395 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, @@ -183,20 +187,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 ( <> @@ -208,6 +411,15 @@ export const GroupSeatingCard = ({ purchaseFn={purchaseFn} /> + +
@@ -308,6 +520,7 @@ export const GroupSeatingCard = ({