Merge branch 'main' into refactor-pricing

Shelf-nu · May 13, 2024 · 488bff0 · 488bff0
2 parents a955ea6 + 3c96cd9
commit 488bff0
Show file tree

Hide file tree

Showing 28 changed files with 802 additions and 131 deletions.
diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
@@ -236,6 +236,7 @@ export const AssetForm = ({
             countKey="totalCategories"
             closeOnSelect
             selectionMode="set"
+            allowClear
             extraContent={
               <Button
                 to="/categories/new"
@@ -293,6 +294,7 @@ export const AssetForm = ({
             initialDataKey="locations"
             countKey="totalLocations"
             closeOnSelect
+            allowClear
             extraContent={
               <Button
                 to="/locations/new"

diff --git a/app/components/booking/form.tsx b/app/components/booking/form.tsx
@@ -31,7 +31,6 @@ export const NewBookingFormSchema = (
 ) =>
   z
     .object({
-      // @TODO this is why its not working, because the id is required even on new bookings
       id:
         inputFieldIsDisabled || isNewBooking
           ? z.string().optional()

diff --git a/app/components/booking/page-content.tsx b/app/components/booking/page-content.tsx
@@ -8,7 +8,6 @@ import { BookingForm } from "./form";
 export function BookingPageContent() {
   const { booking, teamMembers } = useLoaderData<typeof loader>();
 
-  // @TODO fix this
   const bookingStatus = useBookingStatus(booking);
 
   return (

diff --git a/app/components/dynamic-select/dynamic-select.tsx b/app/components/dynamic-select/dynamic-select.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import {
   Popover,
@@ -38,6 +38,10 @@ type Props = ModelFilterProps & {
   valueExtractor?: (item: ModelFilterItem) => string;
   excludeItems?: string[];
   onChange?: ((value: string) => void) | null;
+  /**
+   * Allow item to unselect on clicking again
+   */
+  allowClear?: boolean;
 };
 
 export default function DynamicSelect({
@@ -60,6 +64,7 @@ export default function DynamicSelect({
   selectionMode = "none",
   excludeItems,
   onChange = null,
+  allowClear,
 }: Props) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -94,10 +99,33 @@ export default function DynamicSelect({
     [excludeItems, items]
   );
 
+  function handleItemChange(id: string) {
+    if (allowClear && selectedValue === id) {
+      setSelectedValue(undefined);
+    } else {
+      setSelectedValue(id);
+      handleSelectItemChange(id);
+    }
+
+    onChange && onChange(id);
+
+    if (closeOnSelect) {
+      setIsPopoverOpen(false);
+    }
+  }
+
+  useEffect(
+    function updateSelectedIfDefaultValueChange() {
+      setSelectedValue(defaultValue);
+    },
+    [defaultValue]
+  );
+
   return (
     <>
       <div className="relative w-full">
         <input
+          key={`${selectedValue}-${defaultValue}`}
           type="hidden"
           value={selectedValue}
           name={fieldName ?? model.name}
@@ -189,12 +217,7 @@ export default function DynamicSelect({
                       item.id === selectedValue && "bg-gray-100"
                     )}
                     onClick={() => {
-                      setSelectedValue(item.id);
-                      handleSelectItemChange(item.id);
-                      onChange && onChange(item.id);
-                      if (closeOnSelect) {
-                        setIsPopoverOpen(false);
-                      }
+                      handleItemChange(item.id);
                     }}
                   >
                     <div>

diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
@@ -1382,6 +1382,25 @@ export const CalendarIcon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
+export const BookingsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 20 22"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M19 7H1m13-6v3M6 1v3m4 13v-6m-3 3h6m-7.2 7h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C19 18.72 19 17.88 19 16.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C16.72 3 15.88 3 14.2 3H5.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C1 5.28 1 6.12 1 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C3.28 21 4.12 21 5.8 21Z"
+    />
+  </svg>
+);
+
 export const CustomFiedIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     width="16"

diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
@@ -49,7 +49,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
           ) : null}
 
           {menuItemsTop.map((item) =>
-            item.to === "bookings" ? (
+            item.to === "bookings" || item.to === "calendar" ? (
               <li key={item.label}>
                 <ControlledActionButton
                   canUseFeature={canUseBookings}
@@ -71,8 +71,9 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                         </span>
                       </span>
                     ),
-                    message:
-                      "Bookings is a premium feature only available for Team workspaces. ",
+                    message: `${
+                      item.to[0].toUpperCase() + item.to.substring(1)
+                    } is a premium feature only available for Team workspaces.`,
                     ctaText: "upgrading to a team plan",
                   }}
                   buttonProps={{

diff --git a/app/components/location/location-select.tsx b/app/components/location/location-select.tsx
@@ -14,7 +14,7 @@ export const LocationSelect = () => {
 
   const { asset } = useLoaderData<typeof loader>();
 
-  const [locationId, setLocationId] = useState(asset.locationId || undefined);
+  const [locationId, setLocationId] = useState(asset.locationId ?? undefined);
   const disabled = isFormProcessing(navigation.state);
 
   return (
@@ -28,7 +28,7 @@ export const LocationSelect = () => {
         <DynamicSelect
           disabled={disabled}
           fieldName="newLocationId"
-          defaultValue={locationId || undefined}
+          defaultValue={locationId}
           model={{ name: "location", queryKey: "name" }}
           label="Locations"
           initialDataKey="locations"

diff --git a/app/components/shared/controlled-action-button.tsx b/app/components/shared/controlled-action-button.tsx
@@ -77,10 +77,8 @@ const HoverMessage = ({
           {buttonContent.message}
           {!skipCta ? (
             <span>
-              Please consider{" "}
-              <Button to="/settings/subscription" variant={"link"}>
-                {buttonContent.ctaText}
-              </Button>
+              {" "}
+              Please switch to your team workspace to use this feature
             </span>
           ) : null}
           .

diff --git a/app/components/shared/icons-map.tsx b/app/components/shared/icons-map.tsx
@@ -33,6 +33,7 @@ import {
   GraphIcon,
   ScanQRIcon,
   SwitchIcon,
+  BookingsIcon,
 } from "../icons/library";
 
 /** The possible options for icons to be rendered in the button */
@@ -69,7 +70,8 @@ export type IconType =
   | "calendar"
   | "graph"
   | "scanQR"
-  | "switch";
+  | "switch"
+  | "bookings";
 
 type IconsMap = {
   [key in IconType]: JSX.Element;
@@ -106,6 +108,7 @@ export const iconsMap: IconsMap = {
   send: <SendIcon />,
   user: <UserIcon />,
   calendar: <CalendarIcon className="size-5" />,
+  bookings: <BookingsIcon />,
   graph: <GraphIcon />,
   scanQR: <ScanQRIcon />,
   switch: <SwitchIcon />,

diff --git a/app/database/schema.prisma b/app/database/schema.prisma
@@ -187,7 +187,6 @@ enum NoteType {
 }
 
 model Qr {
-  // @TODO we might need to change this to shorten the length of the id
   id String @id @default(cuid())
 
   // Version of the QR code based on spec from Denso wave

diff --git a/app/hooks/use-main-menu-items.tsx b/app/hooks/use-main-menu-items.tsx
@@ -31,6 +31,11 @@ export function useMainMenuItems() {
     },
     {
       icon: <Icon icon="calendar" />,
+      to: "calendar",
+      label: "Calendar",
+    },
+    {
+      icon: <Icon icon="bookings" />,
       to: "bookings",
       label: "Bookings (beta)",
     },