cal.pub0.org/packages/features/schedules/components/Schedule.tsx

504 lines
15 KiB
TypeScript
Raw Normal View History

import { Fragment, useCallback, useEffect, useMemo, useState, useRef } from "react";
import type {
ArrayPath,
Control,
ControllerRenderProps,
FieldArrayWithId,
FieldPath,
FieldPathValue,
FieldValues,
UseFieldArrayRemove,
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
} from "react-hook-form";
import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import type { GroupBase, Props } from "react-select";
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
import type { ConfigType } from "@calcom/dayjs";
import dayjs from "@calcom/dayjs";
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability";
import classNames from "@calcom/lib/classNames";
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import type { TimeRange } from "@calcom/types/schedule";
import {
Button,
Dropdown,
DropdownMenuContent,
DropdownMenuTrigger,
Select,
SkeletonText,
Switch,
Checkbox,
} from "@calcom/ui";
import { Copy, Plus, Trash } from "@calcom/ui/components/icon";
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
export type { TimeRange };
export type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
[Key in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, Key> extends TValue ? Key : never;
}[FieldPath<TFieldValues>];
const ScheduleDay = <TFieldValues extends FieldValues>({
name,
weekday,
control,
CopyButton,
}: {
name: ArrayPath<TFieldValues>;
weekday: string;
control: Control<TFieldValues>;
CopyButton: JSX.Element;
}) => {
const { watch, setValue } = useFormContext();
const watchDayRange = watch(name);
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return (
Stripe add the ability to place hold on cards (#8022) * Add payment option to schema * Add payment option to Stripe zod * Set payment option on event type * Create manual payment intent in Stripe * Set payment option from Stripe app * Add payment option to DB * Pass React.ReactNode to checkbox * Create uncaptured payment intent * WIP * Capture card in setup intent * Show charge card option * Charge card from booking page * Bug fixes * Clean up * Clean up app card * Add no-show fee messaging on booking page * Send payment email on payment & add price * Fix messaging * Create no show fee charged email * Send charge fee collected email * Disable submit on card failure * Clean up * Serverside prevent charging card again if already charged * Only confirm booking if paid for * Type fixes * More type fixes * More type fixes * Type fix * Type fixes * UI changes * Payment component rework * Update apps/web/public/static/locales/en/common.json Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update apps/web/public/static/locales/en/common.json Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update apps/web/components/dialog/ChargeCardDialog.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update packages/trpc/server/routers/viewer/payments.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * Revert GTM config * Adjust payment option dropdown * Show alert when seats are set * Small bug fixes * Create collect card method * clean up * Prevent seats & charge no-show fee to be enabled together * Do not charge no-show fee on unconfirmed bookings * Add check to collect card method * Webhook send request emails * Fix some dark mode colours * Change awaiting payment language * Type fixes * Set height of Select and TextField both to 38px to fix alignment * Fix message seats & payment error message * Type fix --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-04-11 21:44:14 +00:00
<div className="mb-4 flex w-full flex-col last:mb-0 sm:flex-row sm:px-0">
{/* Label & switch container */}
<div className="flex h-[36px] items-center justify-between sm:w-32">
<div>
<label className="text-default flex flex-row items-center space-x-2 rtl:space-x-reverse">
<div>
<Switch
disabled={!watchDayRange}
defaultChecked={watchDayRange && watchDayRange.length > 0}
checked={watchDayRange && !!watchDayRange.length}
onCheckedChange={(isChecked) => {
setValue(name, (isChecked ? [DEFAULT_DAY_RANGE] : []) as TFieldValues[typeof name]);
}}
/>
</div>
<span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
{watchDayRange && !!watchDayRange.length && <div className="sm:hidden">{CopyButton}</div>}
</label>
</div>
</div>
<>
{watchDayRange ? (
<div className="flex sm:ml-2">
<DayRanges control={control} name={name} />
{!!watchDayRange.length && <div className="hidden sm:block">{CopyButton}</div>}
</div>
) : (
<SkeletonText className="mt-2.5 ml-1 h-6 w-48" />
)}
</>
</div>
);
};
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
const CopyButton = ({
getValuesFromDayRange,
weekStart,
}: {
getValuesFromDayRange: string;
weekStart: number;
}) => {
const { t } = useLocale();
const [open, setOpen] = useState(false);
const fieldArrayName = getValuesFromDayRange.substring(0, getValuesFromDayRange.lastIndexOf("."));
const { setValue, getValues } = useFormContext();
return (
<Dropdown open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger asChild>
<Button
className={classNames(
"text-default",
open && "ring-brand-500 !bg-subtle outline-none ring-2 ring-offset-1"
)}
type="button"
tooltip={t("copy_times_to_tooltip")}
color="minimal"
variant="icon"
StartIcon={Copy}
/>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<CopyTimes
weekStart={weekStart}
disabled={parseInt(getValuesFromDayRange.replace(fieldArrayName + ".", ""), 10)}
onClick={(selected) => {
selected.forEach((day) => setValue(`${fieldArrayName}.${day}`, getValues(getValuesFromDayRange)));
setOpen(false);
}}
onCancel={() => setOpen(false)}
/>
</DropdownMenuContent>
</Dropdown>
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
);
};
const Schedule = <
TFieldValues extends FieldValues,
TPath extends FieldPathByValue<TFieldValues, TimeRange[][]>
>({
name,
control,
weekStart = 0,
}: {
name: TPath;
control: Control<TFieldValues>;
weekStart?: number;
}) => {
const { i18n } = useLocale();
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return (
2023-02-02 18:28:46 +00:00
<div className="p-4">
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
{/* First iterate for each day */}
{weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
const weekdayIndex = (num + weekStart) % 7;
const dayRangeName = `${name}.${weekdayIndex}` as ArrayPath<TFieldValues>;
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return (
<ScheduleDay
name={dayRangeName}
key={weekday}
weekday={weekday}
control={control}
CopyButton={<CopyButton weekStart={weekStart} getValuesFromDayRange={dayRangeName} />}
/>
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
);
})}
</div>
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
);
};
export const DayRanges = <TFieldValues extends FieldValues>({
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
name,
control,
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
}: {
name: ArrayPath<TFieldValues>;
control?: Control<TFieldValues>;
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
}) => {
const { t } = useLocale();
const { getValues } = useFormContext();
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
const { remove, fields, append } = useFieldArray({
control,
name,
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
});
return (
<div>
{fields.map((field, index: number) => (
<Fragment key={field.id}>
Stripe add the ability to place hold on cards (#8022) * Add payment option to schema * Add payment option to Stripe zod * Set payment option on event type * Create manual payment intent in Stripe * Set payment option from Stripe app * Add payment option to DB * Pass React.ReactNode to checkbox * Create uncaptured payment intent * WIP * Capture card in setup intent * Show charge card option * Charge card from booking page * Bug fixes * Clean up * Clean up app card * Add no-show fee messaging on booking page * Send payment email on payment & add price * Fix messaging * Create no show fee charged email * Send charge fee collected email * Disable submit on card failure * Clean up * Serverside prevent charging card again if already charged * Only confirm booking if paid for * Type fixes * More type fixes * More type fixes * Type fix * Type fixes * UI changes * Payment component rework * Update apps/web/public/static/locales/en/common.json Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update apps/web/public/static/locales/en/common.json Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update apps/web/components/dialog/ChargeCardDialog.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update packages/trpc/server/routers/viewer/payments.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * Revert GTM config * Adjust payment option dropdown * Show alert when seats are set * Small bug fixes * Create collect card method * clean up * Prevent seats & charge no-show fee to be enabled together * Do not charge no-show fee on unconfirmed bookings * Add check to collect card method * Webhook send request emails * Fix some dark mode colours * Change awaiting payment language * Type fixes * Set height of Select and TextField both to 38px to fix alignment * Fix message seats & payment error message * Type fix --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-04-11 21:44:14 +00:00
<div className="mb-2 flex last:mb-0">
<Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
{index === 0 && (
<Button
tooltip={t("add_time_availability")}
className="text-default mx-2 "
type="button"
color="minimal"
variant="icon"
StartIcon={Plus}
onClick={() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const nextRange: any = getNextRange(getValues(`${name}.${fields.length - 1}`));
if (nextRange) append(nextRange);
}}
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
/>
)}
{index !== 0 && (
<RemoveTimeButton index={index} remove={remove} className="text-default mx-2 border-none" />
)}
</div>
</Fragment>
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
))}
</div>
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
);
};
const RemoveTimeButton = ({
index,
remove,
className,
}: {
index: number | number[];
remove: UseFieldArrayRemove;
className?: string;
}) => {
const { t } = useLocale();
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return (
<Button
type="button"
variant="icon"
color="destructive"
StartIcon={Trash}
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
onClick={() => remove(index)}
className={className}
tooltip={t("delete")}
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
/>
);
};
const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
// this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return (
<div className={className}>
<LazySelect
className="inline-block w-[100px]"
value={value.start}
max={value.end}
onChange={(option) => {
onChange({ ...value, start: new Date(option?.value as number) });
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
}}
/>
<span className="text-default mx-2 w-2 self-center"> - </span>
<LazySelect
className="inline-block w-[100px] rounded-md"
value={value.end}
min={value.start}
onChange={(option) => {
onChange({ ...value, end: new Date(option?.value as number) });
}}
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
/>
</div>
);
};
const LazySelect = ({
value,
min,
max,
...props
}: Omit<Props<IOption, false, GroupBase<IOption>>, "value"> & {
value: ConfigType;
min?: ConfigType;
max?: ConfigType;
}) => {
// Lazy-loaded options, otherwise adding a field has a noticeable redraw delay.
const { options, filter } = useOptions();
useEffect(() => {
filter({ current: value });
}, [filter, value]);
return (
<Select
options={options}
onMenuOpen={() => {
if (min) filter({ offset: min });
if (max) filter({ limit: max });
}}
value={options.find((option) => option.value === dayjs(value).toDate().valueOf())}
onMenuClose={() => filter({ current: value })}
components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
{...props}
/>
);
};
interface IOption {
readonly label: string;
readonly value: number;
}
/**
* Creates an array of times on a 15 minute interval from
* 00:00:00 (Start of day) to
* 23:45:00 (End of day with enough time for 15 min booking)
*/
/** Begin Time Increments For Select */
const INCREMENT = 15;
const useOptions = () => {
// Get user so we can determine 12/24 hour format preferences
const query = useMeQuery();
const { timeFormat } = query.data || { timeFormat: null };
const [filteredOptions, setFilteredOptions] = useState<IOption[]>([]);
const options = useMemo(() => {
const end = dayjs().utc().endOf("day");
const options: IOption[] = [];
for (
let t = dayjs().utc().startOf("day");
t.isBefore(end);
t = t.add(INCREMENT + (!t.add(INCREMENT).isSame(t, "day") ? -1 : 0), "minutes")
) {
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
options.push({
value: t.toDate().valueOf(),
label: dayjs(t)
.utc()
.format(timeFormat === 12 ? "h:mma" : "HH:mm"),
});
}
// allow 23:59
options.push({
value: end.toDate().valueOf(),
label: dayjs(end)
.utc()
.format(timeFormat === 12 ? "h:mma" : "HH:mm"),
});
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return options;
}, [timeFormat]);
const filter = useCallback(
({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {
if (current) {
const currentOption = options.find((option) => option.value === dayjs(current).toDate().valueOf());
if (currentOption) setFilteredOptions([currentOption]);
} else
setFilteredOptions(
options.filter((option) => {
const time = dayjs(option.value);
return (!limit || time.isBefore(limit)) && (!offset || time.isAfter(offset));
})
);
},
[options]
);
return { options: filteredOptions, filter };
};
const getNextRange = (field?: FieldArrayWithId) => {
const nextRangeStart = dayjs((field as unknown as TimeRange).end).utc();
const nextRangeEnd =
nextRangeStart.hour() === 23
? dayjs(nextRangeStart).add(59, "minutes").add(59, "seconds").add(999, "milliseconds")
: dayjs(nextRangeStart).add(1, "hour");
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
if (
nextRangeEnd.isBefore(nextRangeStart.endOf("day")) ||
nextRangeEnd.isSame(nextRangeStart.endOf("day"))
) {
return {
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
start: nextRangeStart.toDate(),
end: nextRangeEnd.toDate(),
};
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
}
};
const CopyTimes = ({
disabled,
onClick,
onCancel,
weekStart,
}: {
disabled: number;
onClick: (selected: number[]) => void;
onCancel: () => void;
weekStart: number;
}) => {
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
const [selected, setSelected] = useState<number[]>([]);
const { i18n, t } = useLocale();
const itteratablesByKeyRef = useRef<(HTMLInputElement | HTMLButtonElement)[]>([]);
useEffect(() => {
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
const handleKeyDown = (event: KeyboardEvent) => {
const itteratables = itteratablesByKeyRef.current;
const isActionRequired =
event.key === "Tab" || event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter";
if (!isActionRequired || !itteratables.length) return;
event.preventDefault();
const currentFocused = document.activeElement as HTMLInputElement | HTMLButtonElement;
let currentIndex = itteratables.findIndex((checkbox) => checkbox === currentFocused);
if (event.key === "Enter") {
if (currentIndex === -1) return;
currentFocused.click();
return;
}
if (currentIndex === -1) {
itteratables[0].focus();
} else {
// Move focus based on the arrow key pressed
if (event.key === "ArrowUp") {
currentIndex = (currentIndex - 1 + itteratables.length) % itteratables.length;
} else if (event.key === "ArrowDown" || event.key === "Tab") {
currentIndex = (currentIndex + 1) % itteratables.length;
}
itteratables[currentIndex].focus();
}
};
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
return (
<div className="space-y-2 py-2">
<div className="p-2">
<p className="h6 text-emphasis pb-3 pl-1 text-xs font-medium uppercase">{t("copy_times_to")}</p>
<ol className="space-y-2">
<li key="select all">
<label className="text-default flex w-full items-center justify-between">
<span className="px-1">{t("select_all")}</span>
<Checkbox
description=""
value={t("select_all")}
checked={selected.length === 7}
onChange={(e) => {
if (e.target.checked) {
setSelected([0, 1, 2, 3, 4, 5, 6]);
} else if (!e.target.checked) {
setSelected([]);
}
}}
ref={(ref) => {
if (ref) {
itteratablesByKeyRef.current.push(ref as HTMLInputElement);
}
}}
/>
</label>
</li>
{weekdayNames(i18n.language, weekStart).map((weekday, num) => {
const weekdayIndex = (num + weekStart) % 7;
return (
<li key={weekday}>
<label className="text-default flex w-full items-center justify-between">
<span className="px-1">{weekday}</span>
<Checkbox
description=""
value={weekdayIndex}
checked={selected.includes(weekdayIndex) || disabled === weekdayIndex}
disabled={disabled === weekdayIndex}
onChange={(e) => {
if (e.target.checked && !selected.includes(weekdayIndex)) {
setSelected(selected.concat([weekdayIndex]));
} else if (!e.target.checked && selected.includes(weekdayIndex)) {
setSelected(selected.filter((item) => item !== weekdayIndex));
}
}}
ref={(ref) => {
if (ref && disabled !== weekdayIndex) {
//we don't need to iterate over disabled elements
itteratablesByKeyRef.current.push(ref as HTMLInputElement);
}
}}
/>
</label>
</li>
);
})}
</ol>
</div>
<hr className="border-subtle" />
<div className="space-x-2 px-2 rtl:space-x-reverse">
<Button
color="minimal"
onClick={() => onCancel()}
ref={(ref) => {
if (ref) {
itteratablesByKeyRef.current.push(ref as HTMLButtonElement);
}
}}>
{t("cancel")}
</Button>
<Button
color="primary"
onClick={() => onClick(selected)}
ref={(ref) => {
if (ref) {
itteratablesByKeyRef.current.push(ref as HTMLButtonElement);
}
}}>
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
{t("apply")}
</Button>
</div>
</div>
);
};
export default Schedule;