@licklist/design 0.45.0-dev.0 → 0.45.0

package/src/auth/Social/Social.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { Router } from "../Router";
+import { SocialCallbackComponent } from "./SocialCallbackComponent";
+import {
+  SocialFormComponent,
+  SocialFormComponentProps,
+} from "./SocialFormComponent";
+
+export default {
+  title: "Auth/Social",
+} as Meta;
+
+export const SocialForm: Story<SocialFormComponentProps> = (args) => (
+  <SocialFormComponent {...args} />
+);
+export const SocialCallback: Story<{}> = (args) => (
+  <>
+    <Router>
+      <SocialCallbackComponent {...args} />
+    </Router>
+  </>
+);

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -0,0 +1,132 @@
+import React, { useContext, useEffect, useState } from "react";
+import RequestContext from "@licklist/plugins/dist/context/app/RequestContext";
+import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
+import useAuth from "@licklist/plugins/dist/context/user/hooks/useAuth";
+import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import useSocialApi from "@licklist/plugins/dist/hooks/Api/useSocialApi";
+import useUserApi from "@licklist/plugins/dist/hooks/Api/useUserApi";
+import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import { IAuth } from "@licklist/plugins/dist/types/context/user/IAuth";
+import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import FormCard from "../../static/FormCard";
+import { LoaderIndicator } from "../../static/loader/LoaderIndicator";
+
+interface Params {
+  provider: string;
+}
+
+function SocialCallbackComponent() {
+  const { t } = useTranslation(["Notification"]);
+  const [isProcessed, setIsProcessed] = useState<boolean>(false);
+  const { provider } = useParams<Params>();
+  const query = useQuery();
+  const request = useContext(RequestContext);
+  const notification = useNotification();
+  const auth = useAuth();
+  const user = useUser();
+
+  const socialApiService = useSocialApi(request);
+  const userApiService = useUserApi(request);
+
+  const token = query.get("code") || query.get("oauth_token");
+  const verifier = query.get("oauth_verifier");
+
+  // Handle social callback
+  useEffect(() => {
+    const handleError = (error: Error) => {
+      notification.danger({
+        title: "Error",
+        message: error.message,
+      });
+    };
+
+    const storeSecrets = (secrets: IAuth) => {
+      auth.setSecrets(secrets);
+    };
+
+    const getProfile = async () => userApiService.profile().catch(handleError);
+
+    const handleLogin = async (secrets: IAuth) => {
+      if (!secrets) {
+        return;
+      }
+
+      // Store secrets
+      storeSecrets(secrets);
+
+      // Update Authorization header value
+      userApiService.setAuthorizationToken(secrets.access_token!);
+
+      // Get user profile
+      const profile = await getProfile();
+
+      if (!profile) {
+        return;
+      }
+
+      // Store user profile
+      user.login(profile.message as IUser);
+
+      notification.success({
+        title: "Success",
+        message: t("Notification:loggedSuccessfully"),
+      });
+
+      // Redirect user in case of successful results
+      RouteService.redirectTo("/");
+    };
+
+    const getSocialProvider = () =>
+      socialApiService.getSocialProvider(provider);
+
+    const registerCallback = async () => {
+      const socialProvider = getSocialProvider();
+
+      return socialApiService
+        .registerCallback({
+          provider: socialProvider,
+          token: token!,
+          verifier: verifier!,
+        })
+        .catch(handleError);
+    };
+
+    if (!isProcessed) {
+      setIsProcessed(() => true);
+
+      registerCallback().then((response: IAuth) => handleLogin(response));
+    }
+  }, [
+    isProcessed,
+    notification,
+    auth,
+    userApiService,
+    user,
+    t,
+    socialApiService,
+    provider,
+    token,
+    verifier,
+  ]);
+
+  return (
+    <>
+      <Row className="justify-content-center">
+        <Col xs sm={12} md={7} lg={5} xl={4} className="align-self-center">
+          <>
+            <FormCard className="p-5">
+              <LoaderIndicator isLoaded={false} />
+            </FormCard>
+          </>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export { SocialCallbackComponent };

package/src/auth/Social/SocialFormComponent.tsx

@@ -0,0 +1,100 @@
+/* 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 React, { 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;
+}
+
+function SocialFormComponent(props: SocialFormComponentProps) {
+  const { isLoading, setIsLoading } = props;
+
+  const request = useContext(RequestContext);
+  const notification = useNotification();
+  const { t } = useTranslation(["App"]);
+
+  const socialService = useSocialApi(request);
+
+  const handleError = (error: Error) => {
+    notification.danger({
+      title: "Error",
+      message: error.message,
+    });
+  };
+
+  const redirectToProvider = async (provider: SocialProvider) => {
+    const response = await socialService
+      .redirectToProvider({
+        provider,
+      })
+      .catch(handleError);
+
+    if (!response) {
+      setIsLoading(false);
+
+      handleError(new Error(t("App:error")));
+
+      return;
+    }
+
+    RouteService.cleanRedirect(response.redirect);
+  };
+
+  const handleFacebookClick = async () => {
+    setIsLoading(true);
+
+    const socialProvider = socialService.getSocialProvider("facebook");
+    await redirectToProvider(socialProvider);
+  };
+
+  const handleTwitterClick = async () => {
+    setIsLoading(true);
+
+    const socialProvider = socialService.getSocialProvider("twitter");
+    await redirectToProvider(socialProvider);
+  };
+
+  // @ts-ignore
+  return (
+    <>
+      <LoaderIndicator isLoaded={!isLoading} />
+
+      <Row>
+        <Col xs={6} className="pr-1">
+          <SocialButton
+            className={["btn-social-lg", "pl-5", "pr-1"].join(" ")}
+            type="facebook"
+            icon="facebook-f"
+            onClick={handleFacebookClick}
+            disabled={isLoading}
+          >
+            Facebook
+          </SocialButton>
+        </Col>
+
+        <Col xs={6} className="pl-1">
+          <SocialButton
+            className={["btn-social-lg", "pl-5", "pr-1"].join(" ")}
+            type="twitter"
+            onClick={handleTwitterClick}
+            disabled={isLoading}
+          >
+            Twitter
+          </SocialButton>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export { SocialFormComponent };

package/src/auth/Social/index.ts

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

package/src/auth/index.ts

@@ -0,0 +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";

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -0,0 +1,67 @@
+import React, { 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;
+
+type Config = {
+  label: string;
+  Icon: FunctionComponent<SVGProps<SVGSVGElement>>;
+};
+
+const getIconsAndLabels = ({
+  bookedResources,
+  totalResources,
+}: ZoneResourcesAvailability): Config => {
+  if (bookedResources === totalResources) {
+    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 };
+  }
+
+  if (bookedResources / totalResources >= LIMITED_LIMIT) {
+    return { label: "limited", Icon: LimitedIcon };
+  }
+
+  return { label: "available", Icon: AvailableIcon };
+};
+
+type AvailabilityIndicatorProps = {
+  resources: ZoneResourcesAvailability;
+  isUnavailable?: boolean;
+  isSoldOut?: boolean;
+};
+
+export const AvailabilityIndicator = ({
+  resources,
+  isUnavailable,
+  isSoldOut,
+}: AvailabilityIndicatorProps) => {
+  const { t } = useTranslation("Design");
+
+  if (isUnavailable) {
+    return <Indicator Icon={SoldOutIcon} label={t("notAvailable")} />;
+  }
+
+  if (isSoldOut) {
+    return <Indicator Icon={SoldOutIcon} label={t("soldOut")} />;
+  }
+
+  const { Icon, label } = getIconsAndLabels(resources);
+
+  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

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

package/src/calendar/Calendar.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DateTime } from "luxon";
+import { Meta, Story } from "@storybook/react";
+import { Calendar, CalendarProps } from "./Calendar";
+
+export default {
+  title: "Iframe/Event/Calendar",
+  component: Calendar,
+} as Meta;
+
+export const Default: Story<CalendarProps> = (args) => {
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <Calendar {...args} />
+    </div>
+  );
+};
+
+const now = DateTime.now().set({
+  hour: 0,
+  second: 0,
+  millisecond: 0,
+  minute: 0,
+});
+
+Default.args = {
+  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
+  isLoading: false,
+  fromPrice: "from £10",
+  selectedDate: null,
+  setSelectedDate: () => null,
+  calendarDates: [],
+};

package/src/calendar/Calendar.tsx

@@ -0,0 +1,45 @@
+import React, { Dispatch, ReactElement, SetStateAction } from "react";
+import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
+import { CalendarButtons } from "./components/CalendarButtons";
+import { CalendarDates } from "./components/CalendarDates";
+
+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[];
+  disabledDates?: DateTime[];
+  selectedDate: DateTime | null;
+  setSelectedDate: Dispatch<SetStateAction<DateTime | null>>;
+  fromPrice?: string | ReactElement | null;
+  isLoading?: boolean;
+  initialDate?: DateTime;
+  getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
+  includeAvailability?: boolean;
+};
+
+export const Calendar = ({
+  disabledDates = [],
+  initialDate = defaultStartDay,
+  ...props
+}: CalendarProps) => {
+  return (
+    <div className="calendar-wrapper">
+      <div className="calendar">
+        <CalendarButtons
+          disabledDates={disabledDates}
+          initialDate={initialDate}
+          {...props}
+        />
+        <CalendarDates disabledDates={disabledDates} {...props} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,133 @@
+import React, { 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 { isSelectedDateDisabled } from "../../utils";
+import { CalendarProps } from "../../Calendar";
+
+type CalendarButtonsProps = Pick<
+  CalendarProps,
+  | "isLoading"
+  | "disabledDates"
+  | "initialDate"
+  | "currentDate"
+  | "setCurrentDate"
+  | "setSelectedDate"
+>;
+
+export const CalendarButtons = ({
+  disabledDates = [],
+  isLoading = false,
+  initialDate,
+  currentDate,
+  setCurrentDate,
+  setSelectedDate,
+}: CalendarButtonsProps) => {
+  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 yearOptions = useMemo(() => {
+    return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
+      return { label: String(year), value: year };
+    });
+  }, [initialDate]);
+
+  const canMoveBack = useMemo(
+    () => currentDate > initialDate,
+    [currentDate, initialDate]
+  );
+
+  const onSelectYear = (value: string) => {
+    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(nextDateTime);
+  };
+
+  const onTodayClick = () => {
+    setCurrentDate(initialDate);
+
+    if (isSelectedDateDisabled(initialDate, disabledDates)) return;
+
+    setSelectedDate(initialDate);
+  };
+
+  const onTomorrowClick = () => {
+    const nextDate = initialDate.set({ day: initialDate.day + 1 });
+    setCurrentDate(nextDate);
+
+    if (isSelectedDateDisabled(nextDate, disabledDates)) return;
+
+    setSelectedDate(nextDate);
+  };
+
+  return (
+    <div>
+      <div className="calendar-top-buttons">
+        <Button
+          variant="outline-secondary"
+          className="mr-4"
+          size="sm"
+          onClick={onTodayClick}
+          disabled={isLoading}
+        >
+          {t("today")}
+        </Button>
+        <Button
+          variant="outline-secondary"
+          size="sm"
+          onClick={onTomorrowClick}
+          disabled={isLoading}
+        >
+          {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>
+        </div>
+        <CalendarSelect
+          options={yearOptions}
+          onChange={onSelectYear}
+          value={currentDate.year}
+          className="ml-4"
+        />
+      </div>
+    </div>
+  );
+};

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

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

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from "react";
+import { DateTime } from "luxon";
+import { DAY_NUMBER } from "@licklist/core/dist/Config";
+import { DateTimeButton } from "../../../date-time-button";
+import { CalendarWeekdays } from "../CalendarWeekdays";
+import { isSelectedDateDisabled } from "../../utils";
+import { CalendarProps } from "../../Calendar";
+
+export type CalendarDatesProps = Omit<
+  CalendarProps,
+  "currentDate" | "setCurrentDate" | "initialDate"
+>;
+
+export const CalendarDates = ({
+  disabledDates = [],
+  isLoading = false,
+  calendarDates,
+  selectedDate,
+  setSelectedDate,
+  fromPrice,
+  getAvailability,
+  includeAvailability,
+}: CalendarDatesProps) => {
+  const fillCalendarDates = useMemo(() => {
+    let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
+
+    if (firstDayOfWeek === 1) {
+      return calendarDates;
+    }
+
+    const nullableDate: null[] = [];
+
+    while (firstDayOfWeek > 1) {
+      nullableDate.push(null);
+      firstDayOfWeek -= 1;
+    }
+
+    return [...nullableDate, ...calendarDates];
+  }, [calendarDates]);
+
+  return (
+    <div className="calendar-dates-wrapper">
+      <CalendarWeekdays />
+      <div className="calendar-dates">
+        {fillCalendarDates.map((date: DateTime | null) => {
+          if (date === null) return <div />;
+
+          const isDisabled =
+            isLoading || isSelectedDateDisabled(date, disabledDates);
+
+          return (
+            <DateTimeButton
+              key={+date}
+              isDisabled={isDisabled}
+              isSelected={
+                selectedDate ? date.hasSame(selectedDate, "day") : undefined
+              }
+              date={date.toFormat(DAY_NUMBER)}
+              onSelect={() => setSelectedDate(date)}
+              price={fromPrice}
+              resources={getAvailability?.(date)}
+              showResources={includeAvailability}
+              calendarView
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { CalendarDates } from "./CalendarDates";

package/src/calendar/components/CalendarSelect/CalendarSelect.tsx

@@ -0,0 +1,54 @@
+import React, { useRef } from "react";
+import { Form } from "react-bootstrap";
+import clsx from "clsx";
+import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
+
+export type CalendarSelectOption = {
+  label: string;
+  value: string | number;
+};
+
+export type CalendarSelectProps = {
+  options: CalendarSelectOption[];
+  onChange: (value: string) => void;
+  value: string | number;
+  className?: string;
+};
+
+export const CalendarSelect = ({
+  options,
+  onChange,
+  value,
+  className,
+}: CalendarSelectProps) => {
+  const selectRef = useRef<HTMLSelectElement>(null);
+
+  const onValueChange = ({ target: { value } }) => {
+    if (!onChange) return;
+
+    onChange(value);
+  };
+
+  return (
+    <div
+      className={clsx("calendar-select-wrapper", className)}
+      id={PAGE_CALENDAR_SELECT_WRAPPER}
+    >
+      <Form.Control
+        as="select"
+        onChange={onValueChange}
+        className="calendar-select"
+        value={value}
+        ref={selectRef}
+      >
+        {options.map(({ label, value }) => {
+          return (
+            <option value={value} key={label || value}>
+              {label}
+            </option>
+          );
+        })}
+      </Form.Control>
+    </div>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { CalendarSelect } from "./CalendarSelect";
+export type {
+  CalendarSelectProps,
+  CalendarSelectOption,
+} from "./CalendarSelect";