@licklist/design 0.44.551-dev.8 → 0.45.0-dev.0

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

@@ -1,23 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,100 +0,0 @@
-/* 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

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

package/src/auth/index.ts

@@ -1,10 +0,0 @@
-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 +0,0 @@
-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

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

package/src/calendar/Calendar.stories.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

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

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

@@ -1,69 +0,0 @@
-import React, { useMemo } from "react";
-import { DateTime } from "luxon";
-import { DateTimeButton, Variant } 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}
-              onSelect={() => setSelectedDate(date)}
-              price={fromPrice}
-              resources={getAvailability?.(date)}
-              showResources={includeAvailability}
-              variant={Variant.month}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};

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

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

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

@@ -1,54 +0,0 @@
-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

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