bookito-widget 0.0.1

package/jest.config.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+export default {
+  displayName: '@carlito/api',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+};

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bookito-widget",
+  "version": "0.0.1",
+  "main": "build/cjs/index.js",
+  "license": "MIT",
+  "module": "build/esm/index.js",
+  "types": "./build/types/index.d.ts"
+}

package/postcss.config.js

@@ -0,0 +1,3 @@
+const createPostCssConfig = require('../../../custom-config/postcss.config');
+
+module.exports = createPostCssConfig(__dirname);

package/project.json

@@ -0,0 +1,63 @@
+{
+  "name": "bookito-widget",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/apps/bookito-widget/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/apps/bookito-widget/**/*.ts",
+          "libs/apps/bookito-widget/**/*.tsx"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/apps/bookito-widget"],
+      "options": {
+        "jestConfig": "libs/apps/bookito-widget/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "bundle": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "libraryName": "bookito-widget",
+        "libraryTargets": ["umd"],
+        "index": "",
+        "tsConfig": "libs/apps/bookito-widget/tsconfig.json",
+        "main": "libs/apps/bookito-widget/src/index.tsx",
+        "outputPath": "libs/apps/bookito-widget/dist",
+        "compiler": "babel",
+        "optimization": true,
+        "extractLicenses": true,
+        "runtimeChunk": false,
+        "vendorChunk": false,
+        "generateIndexHtml": false,
+        "commonChunk": false,
+        "namedChunks": false,
+        "webpackConfig": "custom-config/webpack-lib.config.js",
+        "postcssConfig": "libs/apps/bookito-widget/postcss.config.js",
+        "isolatedConfig": true
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "postTargets": ["bookito-widget:publish-to-npm"]
+      }
+    },
+    "publish-to-npm": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npm publish",
+        "cwd": "libs/apps/bookito-widget"
+      }
+    }
+  },
+  "tags": []
+}

package/src/Card/EmptyCard.tsx

@@ -0,0 +1,30 @@
+const EmptyCard = () => {
+  return (
+    <div className="mr-5 animate-pulse min-w-min min-w-lg  bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 text-left">
+      <div className="p-5 w-[80vw] md:w-80 lg:w-96">
+        <h5 className="mb-3 rounded-md max-w-fit px-2 bg-white text-md font-black tracking-tight text-gray-900 dark:text-black">
+          <div className="h-2 bg-slate-200 rounded"></div>
+        </h5>
+
+        <h5 className="mb-10 text-2xl font-bold tracking-tight  text-gray-50 dark:text-white">
+          <div className="grid grid-cols-3 gap-4 mt-1">
+            <div className="h-4 bg-slate-200 rounded col-span-2"></div>
+          </div>
+          <div className="grid grid-cols-3 gap-4 mt-2">
+            <div className="h-4 bg-slate-200 rounded col-span-1"></div>
+          </div>
+        </h5>
+
+        <div className="mb-2 dark:text-white text-gray-50 mt-6">
+          {new Array(4).fill(undefined).map((_, key) => (
+            <div className="grid grid-cols-3 gap-4 mt-2" key={key}>
+              <div className="h-2 bg-slate-200 rounded col-span-3"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyCard;

package/src/Card/index.tsx

@@ -0,0 +1,44 @@
+import { LocalizedEventData } from '@carlito/bookito-client';
+import formatPrice from '../utils';
+
+type CardProps = { event: LocalizedEventData; openModal: () => void };
+
+const ExperienceCard = (props: CardProps) => {
+  const { event, openModal } = props;
+  const { title, basePrice, description, bannerImg } = event;
+
+  const appenedDescription =
+    description && description.length > 200 ? description.substring(0, 200) + '...' : description;
+
+  return (
+    <div
+      onClick={() => {
+        openModal();
+      }}
+      role="button"
+      style={{ backgroundImage: `url(${bannerImg?.url})` }}
+      className="relative mr-5 min-w-lg bg-no-repeat bg-cover bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 text-left overflow-hidden"
+    >
+      <div className="absolute w-full h-full top-0 left-0 bg-gradient-to-t from-neutral-900"></div>
+      <div className="p-5 w-[80vw] md:w-80 lg:w-96 relative z-1">
+        {title && (
+          <h5 className="mb-3 rounded-md max-w-fit px-2 bg-white text-md font-black tracking-tight text-gray-900 dark:text-black">
+            {title}
+          </h5>
+        )}
+
+        {basePrice?.amount && (
+          <h5 className="mb-10 text-2xl font-bold tracking-tight  text-gray-50 dark:text-white">
+            {formatPrice(basePrice?.amount)}
+          </h5>
+        )}
+
+        {appenedDescription && (
+          <p className="mb-2 dark:text-white text-gray-50 text-xs">{appenedDescription}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ExperienceCard;

package/src/CardHolder/index.tsx

@@ -0,0 +1,25 @@
+import { LocalizedEventData } from '@carlito/bookito-client';
+import ExperienceCard from '../Card';
+
+type Props = {
+  events: LocalizedEventData[];
+  openModal(event: LocalizedEventData): void;
+};
+
+const ExperienceCardHolder = ({ events, openModal }: Props) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxHeight: '200px',
+        flexFlow: 'inherit',
+      }}
+    >
+      {events.map((event) => (
+        <ExperienceCard key={event.id} event={event} openModal={() => openModal(event)} />
+      ))}
+    </div>
+  );
+};
+
+export default ExperienceCardHolder;

package/src/Modal/BookingForm.tsx

@@ -0,0 +1,286 @@
+import { formatPrice, useActiveLanguage } from '@carlito/api';
+import {
+  ListBookingsResponse,
+  LocalizedEventData,
+  findOccurrenceForDate,
+  useCreateBooking,
+} from '@carlito/bookito-client';
+import { applyTimeOfDate } from '@carlito/date-utils';
+import { SupportedLanguages } from '@carlito/intl';
+import { Formik, useFormikContext } from 'formik';
+import humanizeDuration from 'humanize-duration';
+import { useCallback } from 'react';
+import { Trans } from 'react-i18next';
+import FormSubmitButton from './FormSubmitButton';
+import BookitoBookingRequestForm, { BookingParams } from './PartialForm';
+import { isEventAllDay, useBookableTimeRange } from './helper';
+type InitialBookingData = ListBookingsResponse['bookings'][0];
+type FormValues = Partial<InitialBookingData>;
+type EventInfoProps = {
+  price?: number | null;
+  overallDuration?: number | null;
+  stringifiedDuration: string;
+  activeLanguage: SupportedLanguages;
+  isAllDay?: boolean;
+};
+
+export type BookingFormProps = {
+  event: LocalizedEventData;
+  date: Date;
+  authId: string;
+};
+
+const supportedLanguages: Record<SupportedLanguages, string> = {
+  en: 'English',
+  de: 'Deutsch',
+  it: 'Italiano',
+};
+
+export const ChooseLanguage = () => {
+  const { getFieldProps } = useFormikContext();
+
+  const fieldName = `bookedBy.communicationLanguage`;
+
+  const { value: language, onBlur, onChange } = getFieldProps<SupportedLanguages>(fieldName);
+
+  return (
+    <select
+      className="text-sm mb-3 rounded-lg outline-none border border-gray-300 focus:border-primary-default focus:ring-2 focus:ring-primary-default focus:ring-offset-1"
+      value={language}
+      onChange={onChange}
+      onBlur={onBlur}
+      name={fieldName}
+    >
+      {Object.entries(supportedLanguages).map(([key, value]) => (
+        <option key={key} value={key}>
+          {value}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+const EventInfo = ({
+  price,
+  overallDuration,
+  stringifiedDuration,
+  activeLanguage,
+  isAllDay,
+}: EventInfoProps) => {
+  return (
+    <div className="flex justify-between items-start">
+      {price && price !== null ? (
+        <div>
+          <p className="font-bold">
+            <Trans>Price</Trans>
+          </p>
+          <p className="text-3xl font-bold">{formatPrice(price, activeLanguage)}</p>
+        </div>
+      ) : (
+        <div />
+      )}
+      {overallDuration && (
+        <div className="text-right">
+          <p className="font-bold">
+            <Trans>Duration</Trans>
+          </p>
+          {isAllDay ? (
+            <p className="text-xl">
+              <Trans>All Day</Trans>
+            </p>
+          ) : (
+            <p className="text-3xl">
+              <Trans>{stringifiedDuration}</Trans>
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const BookingForm = ({ event: eventParams, date: onDate, authId }: BookingFormProps) => {
+  const { activeLanguage } = useActiveLanguage();
+  const { mutate: createBooking, isLoading, isSuccess, reset: resetMutation } = useCreateBooking();
+
+  const onSuccessAnimationEnd = useCallback(() => {
+    resetMutation();
+  }, [resetMutation]);
+
+  const initialValues: FormValues = {
+    bookedBy: {
+      name: '',
+      email: '',
+      roomNr: '',
+      communicationLanguage: activeLanguage,
+    },
+    chosenTime: eventParams.timeBookabilitySettings ? [] : undefined,
+    comment: '',
+  };
+
+  const occurrence = findOccurrenceForDate(onDate, eventParams) ?? eventParams?.occurrences[0];
+
+  const overallDuration =
+    (eventParams?.timeBookability === 'custom'
+      ? eventParams?.timeBookabilitySettings?.timeBlockDurationMs
+      : occurrence?.durationMs) ?? occurrence.durationMs;
+
+  const stringifiedDuration = humanizeDuration(overallDuration ?? 0, {
+    language: 'shortDe',
+    // fallbacks: ['en'],
+    languages: {
+      shortDe: {
+        y: () => 'y',
+        mo: () => 'mo',
+        w: () => 'w',
+        d: () => 'd',
+        h: () => 'h',
+        m: () => 'm',
+        s: () => 's',
+        ms: () => 'ms',
+      },
+    },
+    units: ['h', 'm'],
+    maxDecimalPoints: 0,
+    delimiter: ' ',
+  } as any);
+
+  const startDateTime = applyTimeOfDate(onDate, new Date(occurrence.startDateTime));
+  const isAllDay = eventParams ? isEventAllDay(startDateTime, eventParams) : undefined;
+
+  function onSubmit(values: FormValues) {
+    createBooking({
+      bookedForDate: onDate.toISOString(),
+      eventId: eventParams.id,
+      bookedBy: {
+        name: values.bookedBy?.name ?? '',
+        email: values.bookedBy?.email ?? '',
+        communicationLanguage: activeLanguage,
+        roomNr: values.bookedBy?.roomNr,
+      },
+      comment: values?.comment,
+      priceVariants: values.priceVariants,
+      numOfAdditionalParticipants: values.numOfAdditionalParticipants,
+      chosenTime: values.chosenTime?.map((time) => ({
+        dateTime: time.dateTime.toString(),
+      })),
+      ownerAuthId: authId,
+    });
+  }
+
+  const bookableTimeRange = useBookableTimeRange(eventParams, onDate);
+
+  const priceVariants = eventParams.priceVariants?.map((priceVariant) => {
+    return {
+      id: priceVariant.id,
+      displayName: priceVariant.description ?? '',
+      price: priceVariant.priceVariation.amount,
+    };
+  });
+
+  const canChooseTime = eventParams.timeBookability === 'custom';
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={onSubmit}>
+      {(props) => {
+        const { values, isSubmitting, handleChange, handleBlur, handleSubmit, setValues, touched } =
+          props;
+
+        const isTouched = Object.values(touched).some((t) => t);
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const onBookingParamsChange = useCallback(
+          (requestParams: BookingParams) => {
+            setValues({
+              ...values,
+              numOfAdditionalParticipants:
+                (requestParams.numParticipants ?? 0) > 1
+                  ? (requestParams.numParticipants ?? 0) - 1
+                  : undefined,
+              priceVariants: requestParams.priceVariants,
+              chosenTime: requestParams.chosenTimes?.map((time) => ({
+                dateTime: time.toISOString(),
+              })),
+            });
+          },
+          [setValues, values]
+        );
+
+        return (
+          <form className="flex mt-10 flex-col" onSubmit={handleSubmit}>
+            <EventInfo
+              price={eventParams.basePrice?.amount || 0}
+              activeLanguage={activeLanguage}
+              isAllDay={isAllDay}
+              stringifiedDuration={stringifiedDuration}
+              overallDuration={overallDuration}
+            />
+            <BookitoBookingRequestForm
+              onChange={onBookingParamsChange}
+              canChooseTime={canChooseTime}
+              eventPriceVariants={priceVariants}
+              bookingParams={{
+                numParticipants: (values.numOfAdditionalParticipants ?? 0) + 1,
+                chosenTimes: values.chosenTime?.map((time) => new Date(time.dateTime)),
+                priceVariants: values.priceVariants,
+              }}
+              bookableTimeRange={bookableTimeRange}
+            />
+
+            <div className="mt-3 flex flex-col">
+              <label htmlFor="name">Name</label>
+              <input
+                id="name"
+                name="bookedBy.name"
+                type="text"
+                onChange={handleChange}
+                value={values.bookedBy?.name}
+                className="mb-3 rounded-lg"
+              />
+              <label htmlFor="roomNr">Room Nr / Booking Reference</label>
+              <input
+                id="roomNr"
+                name="bookedBy.roomNr"
+                type="text"
+                onChange={handleChange}
+                value={values.bookedBy?.roomNr}
+                className="mb-3 rounded-lg"
+              />
+              <label htmlFor="email" style={{ display: 'block' }}>
+                Email
+              </label>
+              <input
+                id="email"
+                placeholder="Enter your email"
+                name="bookedBy.email"
+                type="email"
+                value={values.bookedBy?.email}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className="mb-3 rounded-lg"
+              />
+
+              <label htmlFor="comments" style={{ display: 'block' }}>
+                Comments
+              </label>
+              <textarea name="comment" placeholder="Comments if any" className="mb-3 rounded-lg" />
+
+              <ChooseLanguage />
+
+              <div className="flex-1">
+                <FormSubmitButton
+                  onSuccessAnimationEnd={onSuccessAnimationEnd}
+                  success={isSuccess}
+                  loading={isLoading}
+                  disabled={!isTouched || isSubmitting}
+                >
+                  Submit
+                </FormSubmitButton>
+              </div>
+            </div>
+          </form>
+        );
+      }}
+    </Formik>
+  );
+};

package/src/Modal/FormSubmitButton/AnimatedSuccessCheckmark/index.module.css

@@ -0,0 +1,45 @@
+.checkmark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #7ac142;
+  fill: none;
+  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+.checkmark {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: block;
+  stroke-width: 2;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px #7ac142;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+.checkmark__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #7ac142;
+  }
+}

package/src/Modal/FormSubmitButton/AnimatedSuccessCheckmark/index.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import styles from './index.module.css';
+
+type Props = {
+  className?: string;
+};
+
+const AnimatedSuccessCheckmark = ({ className }: Props) => {
+  return (
+    <svg
+      className={classNames(className, styles['checkmark'])}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+    >
+      <circle className={styles['checkmark__circle']} cx="26" cy="26" r="25" fill="none" />{' '}
+      <path className={styles['checkmark__check']} fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+    </svg>
+  );
+};
+
+export default AnimatedSuccessCheckmark;

package/src/Modal/FormSubmitButton/index.tsx

@@ -0,0 +1,58 @@
+import { LoadingSpinner } from '@carlito/dashboard-ui';
+import classnames from 'classnames';
+import { ComponentProps, useEffect } from 'react';
+import AnimatedSuccessCheckmark from './AnimatedSuccessCheckmark';
+
+interface Props extends ComponentProps<'button'> {
+  loading?: boolean;
+  success?: boolean;
+  onSuccessAnimationEnd?: () => void;
+}
+
+const FormSubmitButton = ({
+  className,
+  success,
+  loading,
+  disabled,
+  children,
+  onSuccessAnimationEnd,
+  ...btnProps
+}: Props) => {
+  useEffect(() => {
+    if (success) {
+      const timeout = setTimeout(() => {
+        onSuccessAnimationEnd?.();
+      }, 2000);
+      return () => clearTimeout(timeout);
+    }
+
+    return undefined;
+  }, [success, onSuccessAnimationEnd]);
+
+  return (
+    <div className="relative">
+      {success && <AnimatedSuccessCheckmark className="absolute left-2 top-2" />}
+      <button
+        type="submit"
+        id="product-tour-save"
+        disabled={loading || disabled}
+        className={classnames(
+          className,
+          { 'bg-gray-300': disabled },
+          {
+            'bg-primary-default hover:bg-primary-tint focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-default':
+              !disabled,
+          },
+          { 'cursor-not-allowed': loading },
+          'w-full flex justify-center items-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-extrabold text-primary-contrast'
+        )}
+        {...btnProps}
+      >
+        <div className="w-0">{loading && <LoadingSpinner className="h-5 w-5" />}</div>
+        <div className="w-full pl-3">{children}</div>
+      </button>
+    </div>
+  );
+};
+
+export default FormSubmitButton;