@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/auth/Social/SocialFormComponent.tsx

@@ -1,68 +1,68 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/ban-types */
-import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
-import RequestContext from "@licklist/plugins/dist/context/app/RequestContext";
-import useSocialApi from "@licklist/plugins/dist/hooks/Api/useSocialApi";
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { SocialProvider } from "@licklist/plugins/dist/types/providers/Social/SocialProvider";
-import { useContext } from "react";
-import { Row, Col } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { LoaderIndicator } from "../../static/loader/LoaderIndicator";
-import SocialButton from "../../static/SocialButton";
+import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
+import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
+import useSocialApi from '@licklist/plugins/dist/hooks/Api/useSocialApi'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import { SocialProvider } from '@licklist/plugins/dist/types/providers/Social/SocialProvider'
+import { useContext } from 'react'
+import { Row, Col } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
+import SocialButton from '../../static/SocialButton'
 
 export interface SocialFormComponentProps {
-  isLoading: boolean;
-  setIsLoading: Function;
+  isLoading: boolean
+  setIsLoading: Function
 }
 
 function SocialFormComponent(props: SocialFormComponentProps) {
-  const { isLoading, setIsLoading } = props;
+  const { isLoading, setIsLoading } = props
 
-  const request = useContext(RequestContext);
-  const notification = useNotification();
-  const { t } = useTranslation(["App"]);
+  const request = useContext(RequestContext)
+  const notification = useNotification()
+  const { t } = useTranslation(['App'])
 
-  const socialService = useSocialApi(request);
+  const socialService = useSocialApi(request)
 
   const handleError = (error: Error) => {
     notification.danger({
-      title: "Error",
+      title: 'Error',
       message: error.message,
-    });
-  };
+    })
+  }
 
   const redirectToProvider = async (provider: SocialProvider) => {
     const response = await socialService
       .redirectToProvider({
         provider,
       })
-      .catch(handleError);
+      .catch(handleError)
 
     if (!response) {
-      setIsLoading(false);
+      setIsLoading(false)
 
-      handleError(new Error(t("App:error")));
+      handleError(new Error(t('App:error')))
 
-      return;
+      return
     }
 
-    RouteService.cleanRedirect(response.redirect);
-  };
+    RouteService.cleanRedirect(response.redirect)
+  }
 
   const handleFacebookClick = async () => {
-    setIsLoading(true);
+    setIsLoading(true)
 
-    const socialProvider = socialService.getSocialProvider("facebook");
-    await redirectToProvider(socialProvider);
-  };
+    const socialProvider = socialService.getSocialProvider('facebook')
+    await redirectToProvider(socialProvider)
+  }
 
   const handleTwitterClick = async () => {
-    setIsLoading(true);
+    setIsLoading(true)
 
-    const socialProvider = socialService.getSocialProvider("twitter");
-    await redirectToProvider(socialProvider);
-  };
+    const socialProvider = socialService.getSocialProvider('twitter')
+    await redirectToProvider(socialProvider)
+  }
 
   // @ts-ignore
   return (
@@ -72,7 +72,7 @@ function SocialFormComponent(props: SocialFormComponentProps) {
       <Row>
         <Col xs={6} className="pr-1">
           <SocialButton
-            className={["btn-social-lg", "pl-5", "pr-1"].join(" ")}
+            className={['btn-social-lg', 'pl-5', 'pr-1'].join(' ')}
             type="facebook"
             onClick={handleFacebookClick}
             disabled={isLoading}
@@ -83,7 +83,7 @@ function SocialFormComponent(props: SocialFormComponentProps) {
 
         <Col xs={6} className="pl-1">
           <SocialButton
-            className={["btn-social-lg", "pl-5", "pr-1"].join(" ")}
+            className={['btn-social-lg', 'pl-5', 'pr-1'].join(' ')}
             type="twitter"
             onClick={handleTwitterClick}
             disabled={isLoading}
@@ -93,7 +93,7 @@ function SocialFormComponent(props: SocialFormComponentProps) {
         </Col>
       </Row>
     </>
-  );
+  )
 }
 
-export { SocialFormComponent };
+export { SocialFormComponent }

package/src/auth/Social/index.ts

@@ -1,2 +1,2 @@
-export * from "./SocialFormComponent";
-export * from "./SocialCallbackComponent";
+export * from './SocialFormComponent'
+export * from './SocialCallbackComponent'

package/src/auth/index.ts

@@ -1,10 +1,10 @@
-export * from "./Authorizer";
-export * from "./Layout";
-export * from "./Login";
-export * from "./Register";
-export * from "./Social";
-export * from "./Router";
-export * from "./ResetPassword";
-export * from "./Logout";
-export * from "./AccessDenied";
-export * from "./ChangePassword";
+export * from './Authorizer'
+export * from './Layout'
+export * from './Login'
+export * from './Register'
+export * from './Social'
+export * from './Router'
+export * from './ResetPassword'
+export * from './Logout'
+export * from './AccessDenied'
+export * from './ChangePassword'

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -1,67 +1,67 @@
-import { FunctionComponent, SVGProps } from "react";
-import { useTranslation } from "react-i18next";
-import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
-import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";
-import { ReactComponent as LimitedIcon } from "../assets/iframe/limited.svg";
-import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
+import { FunctionComponent, SVGProps } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import { ReactComponent as AvailableIcon } from '../assets/iframe/available.svg'
+import { ReactComponent as LimitedIcon } from '../assets/iframe/limited.svg'
+import { ReactComponent as SoldOutIcon } from '../assets/iframe/soldOut.svg'
 
-const LOTS_OF_SPACE_LIMIT = 0.2;
-const LIMITED_LIMIT = 0.8;
+const LOTS_OF_SPACE_LIMIT = 0.2
+const LIMITED_LIMIT = 0.8
 
 type Config = {
-  label: string;
-  Icon: FunctionComponent<SVGProps<SVGSVGElement>>;
-};
+  label: string
+  Icon: FunctionComponent<SVGProps<SVGSVGElement>>
+}
 
 const getIconsAndLabels = ({
   bookedResources,
   totalResources,
 }: ZoneResourcesAvailability): Config => {
   if (bookedResources === totalResources) {
-    return { label: "soldOut", Icon: SoldOutIcon };
+    return { label: 'soldOut', Icon: SoldOutIcon }
   }
 
   // lots of space if less than 80% booked
   if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
-    return { label: "lotsOfSpace", Icon: AvailableIcon };
+    return { label: 'lotsOfSpace', Icon: AvailableIcon }
   }
 
   if (bookedResources / totalResources >= LIMITED_LIMIT) {
-    return { label: "limited", Icon: LimitedIcon };
+    return { label: 'limited', Icon: LimitedIcon }
   }
 
-  return { label: "available", Icon: AvailableIcon };
-};
+  return { label: 'available', Icon: AvailableIcon }
+}
 
 type AvailabilityIndicatorProps = {
-  resources: ZoneResourcesAvailability;
-  isUnavailable?: boolean;
-  isSoldOut?: boolean;
-};
+  resources: ZoneResourcesAvailability
+  isUnavailable?: boolean
+  isSoldOut?: boolean
+}
 
 export const AvailabilityIndicator = ({
   resources,
   isUnavailable,
   isSoldOut,
 }: AvailabilityIndicatorProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   if (isUnavailable) {
-    return <Indicator Icon={SoldOutIcon} label={t("notAvailable")} />;
+    return <Indicator Icon={SoldOutIcon} label={t('notAvailable')} />
   }
 
   if (isSoldOut) {
-    return <Indicator Icon={SoldOutIcon} label={t("soldOut")} />;
+    return <Indicator Icon={SoldOutIcon} label={t('soldOut')} />
   }
 
-  const { Icon, label } = getIconsAndLabels(resources);
+  const { Icon, label } = getIconsAndLabels(resources)
 
-  return <Indicator Icon={Icon} label={t(label)} />;
-};
+  return <Indicator Icon={Icon} label={t(label)} />
+}
 
 const Indicator = ({ Icon, label }: Config) => (
   <div className="availability-indicator">
     <Icon />
     <div>{label}</div>
   </div>
-);
+)

package/src/availability-indicator/index.ts

@@ -1 +1 @@
-export * from "./AvailabilityIndicator";
+export * from './AvailabilityIndicator'

package/src/calendar/Calendar.stories.tsx

@@ -1,31 +1,31 @@
-import { DateTime } from "luxon";
-import { Meta, Story } from "@storybook/react";
-import { Calendar, CalendarProps } from "./Calendar";
-import { getMonthCalendarDates } from "./utils/index";
+import { DateTime } from 'luxon'
+import { Meta, Story } from '@storybook/react'
+import { Calendar, CalendarProps } from './Calendar'
+import { getMonthCalendarDates } from './utils/index'
 
 export default {
-  title: "Iframe/Event/Calendar",
+  title: 'Iframe/Event/Calendar',
   component: Calendar,
-} as Meta;
+} as Meta
 
 export const Default: Story<CalendarProps> = (args) => {
   return (
-    <div style={{ backgroundColor: "white" }}>
+    <div style={{ backgroundColor: 'white' }}>
       <Calendar {...args} />
     </div>
-  );
-};
+  )
+}
 
 const now = DateTime.now().set({
   hour: 0,
   second: 0,
   millisecond: 0,
   minute: 0,
-});
+})
 
 Default.args = {
   isLoading: false,
-  fromPrice: "from £10",
+  fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
   calendarDates: getMonthCalendarDates(now),
@@ -35,19 +35,19 @@ Default.args = {
     showResources: false,
     isDisabled: false,
   }),
-};
+}
 
 export const Loading: Story<CalendarProps> = (args) => {
   return (
-    <div style={{ backgroundColor: "white" }}>
+    <div style={{ backgroundColor: 'white' }}>
       <Calendar {...args} />
     </div>
-  );
-};
+  )
+}
 
 Loading.args = {
   isLoading: true,
-  fromPrice: "from £10",
+  fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
   calendarDates: getMonthCalendarDates(now),
@@ -57,4 +57,4 @@ Loading.args = {
     showResources: false,
     isDisabled: false,
   }),
-};
+}

package/src/calendar/Calendar.tsx

@@ -1,33 +1,33 @@
-import { Dispatch, ReactElement, SetStateAction } from "react";
-import { DateTime } from "luxon";
-import { DateTimeButtonProps } from "src/date-time-button";
-import { CalendarButtons } from "./components/CalendarButtons";
-import { CalendarDates } from "./components/CalendarDates";
-import { LoaderIndicator } from "../static";
+import { Dispatch, ReactElement, SetStateAction } from 'react'
+import { DateTime } from 'luxon'
+import { DateTimeButtonProps } from 'src/date-time-button'
+import { CalendarButtons } from './components/CalendarButtons'
+import { CalendarDates } from './components/CalendarDates'
+import { LoaderIndicator } from '../static'
 
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
   second: 0,
   hour: 0,
   minute: 0,
-});
+})
 
 export type CalendarProps = {
-  currentDate: DateTime;
-  setCurrentDate: Dispatch<SetStateAction<DateTime>>;
-  calendarDates: DateTime[];
-  selectedDate: DateTime | null;
-  setSelectedDate: Dispatch<SetStateAction<DateTime | null>>;
-  fromPrice?: string | ReactElement | null;
-  isLoading?: boolean;
-  initialDate?: DateTime;
+  currentDate: DateTime
+  setCurrentDate: Dispatch<SetStateAction<DateTime>>
+  calendarDates: DateTime[]
+  selectedDate: DateTime | null
+  setSelectedDate: Dispatch<SetStateAction<DateTime | null>>
+  fromPrice?: string | ReactElement | null
+  isLoading?: boolean
+  initialDate?: DateTime
   getDateTimeButtonProps: (
     date: DateTime,
-  ) => Pick<DateTimeButtonProps, "resources" | "showResources" | "isDisabled">;
-};
+  ) => Pick<DateTimeButtonProps, 'resources' | 'showResources' | 'isDisabled'>
+}
 
 export const Calendar = (props: CalendarProps) => {
-  const { initialDate = defaultStartDay, isLoading } = props;
+  const { initialDate = defaultStartDay, isLoading } = props
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
@@ -36,5 +36,5 @@ export const Calendar = (props: CalendarProps) => {
         {isLoading ? <LoaderIndicator /> : <CalendarDates {...props} />}
       </div>
     </div>
-  );
-};
+  )
+}

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -1,20 +1,20 @@
-import { useCallback, useMemo } from "react";
-import { Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { range } from "lodash";
-import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
-import { CalendarSelect } from "../CalendarSelect";
-import { CalendarProps } from "../../Calendar";
+import { useCallback, useMemo } from 'react'
+import { Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { range } from 'lodash'
+import { DateTime } from 'luxon'
+import { CalendarSelect } from '../CalendarSelect'
+import { CalendarProps } from '../../Calendar'
 
 type CalendarButtonsProps = Pick<
   CalendarProps,
-  | "isLoading"
-  | "initialDate"
-  | "currentDate"
-  | "setCurrentDate"
-  | "setSelectedDate"
-  | "getDateTimeButtonProps"
->;
+  | 'isLoading'
+  | 'initialDate'
+  | 'currentDate'
+  | 'setCurrentDate'
+  | 'setSelectedDate'
+  | 'getDateTimeButtonProps'
+>
 
 export const CalendarButtons = ({
   isLoading = false,
@@ -24,64 +24,79 @@ export const CalendarButtons = ({
   setSelectedDate,
   getDateTimeButtonProps,
 }: CalendarButtonsProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
-  const onSelectNextMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSelectPreviousMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const onSelectMonth = useCallback(
+    (value: string) => {
+      const selectedMonth = Number(value)
+      const nextDateTime = currentDate.set({ month: selectedMonth })
 
-  const yearOptions = useMemo(() => {
-    return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
-      return { label: String(year), value: year };
-    });
-  }, [initialDate]);
+      if (nextDateTime <= initialDate) {
+        setCurrentDate(initialDate)
+        return
+      }
 
-  const canMoveBack = useMemo(
-    () => currentDate > initialDate,
-    [currentDate, initialDate],
-  );
+      setCurrentDate(nextDateTime)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setCurrentDate, currentDate],
+  )
+
+  const yearOptions = useMemo(
+    () =>
+      range(initialDate.year, initialDate.year + 5, 1).map((year) => ({
+        label: String(year),
+        value: year,
+      })),
+    [initialDate],
+  )
+
+  const monthOptions = useMemo(() => {
+    const initialMonth =
+      currentDate.year > initialDate.year ? 1 : initialDate.month
+    return range(initialMonth, 13).map((monthNumber) => ({
+      label: DateTime.fromObject({ month: monthNumber }).toLocaleString({
+        month: 'long',
+      }),
+      value: monthNumber,
+    }))
+  }, [initialDate, currentDate])
 
   const onSelectYear = (value: string) => {
-    const selectedYear = Number(value);
-    const nextDateTime = currentDate.set({ year: selectedYear });
+    const selectedYear = Number(value)
+    const nextDateTime = currentDate.set({ year: selectedYear })
 
     // handle check on wrong date for case
     // when user select next year, then month and
     // then click current year but day already passed
     if (nextDateTime <= initialDate) {
-      setCurrentDate(initialDate);
-      return;
+      setCurrentDate(initialDate)
+      return
     }
 
-    setCurrentDate(nextDateTime);
-  };
+    setCurrentDate(nextDateTime)
+  }
 
   const onTodayClick = () => {
-    setCurrentDate(initialDate);
+    setCurrentDate(initialDate)
 
-    const { isDisabled } = getDateTimeButtonProps(initialDate);
+    const { isDisabled } = getDateTimeButtonProps(initialDate)
 
-    if (isDisabled) return;
+    if (isDisabled) return
 
-    setSelectedDate(initialDate);
-  };
+    setSelectedDate(initialDate)
+  }
 
   const onTomorrowClick = () => {
-    const nextDate = initialDate.set({ day: initialDate.day + 1 });
-    setCurrentDate(nextDate);
+    const nextDate = initialDate.set({ day: initialDate.day + 1 })
+    setCurrentDate(nextDate)
 
-    const { isDisabled } = getDateTimeButtonProps(initialDate);
+    const { isDisabled } = getDateTimeButtonProps(initialDate)
 
-    if (isDisabled) return;
+    if (isDisabled) return
 
-    setSelectedDate(nextDate);
-  };
+    setSelectedDate(nextDate)
+  }
 
   return (
     <div>
@@ -93,7 +108,7 @@ export const CalendarButtons = ({
           onClick={onTodayClick}
           disabled={isLoading}
         >
-          {t("today")}
+          {t('today')}
         </Button>
         <Button
           variant="outline-secondary"
@@ -101,28 +116,17 @@ export const CalendarButtons = ({
           onClick={onTomorrowClick}
           disabled={isLoading}
         >
-          {t("tomorrow")}
+          {t('tomorrow')}
         </Button>
       </div>
       <hr />
       <div className="calendar-buttons">
         <div className="buttons-wrapper">
-          <Button
-            className="calendar-button left-button"
-            onClick={onSelectPreviousMonth}
-            disabled={!canMoveBack}
-            variant="link"
-          >
-            <SelectArrow />
-          </Button>
-          <div className="month-title">{currentDate.toFormat("MMMM")}</div>
-          <Button
-            className="calendar-button"
-            onClick={onSelectNextMonth}
-            variant="link"
-          >
-            <SelectArrow />
-          </Button>
+          <CalendarSelect
+            options={monthOptions}
+            onChange={onSelectMonth}
+            value={currentDate.month}
+          />
         </div>
         <CalendarSelect
           options={yearOptions}
@@ -132,5 +136,5 @@ export const CalendarButtons = ({
         />
       </div>
     </div>
-  );
-};
+  )
+}

package/src/calendar/components/CalendarButtons/index.ts

@@ -1 +1 @@
-export { CalendarButtons } from "./CalendarButtons";
+export { CalendarButtons } from './CalendarButtons'