@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

package/dist/elements/PublishButton/ScheduleDrawer/index.js

@@ -1,4 +1,6 @@
-/* eslint-disable no-console */ 'use client';
+/* eslint-disable no-console */'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TZDateMini as TZDate } from '@date-fns/tz/date/mini';
 import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
@@ -29,271 +31,317 @@ import { TimezonePicker } from '../../TimezonePicker/index.js';
 import { buildUpcomingColumns } from './buildUpcomingColumns.js';
 const baseClass = 'schedule-publish';
 const defaultLocaleOption = {
-    label: 'All',
-    value: 'all'
+  label: 'All',
+  value: 'all'
 };
-export const ScheduleDrawer = ({ slug, defaultType, schedulePublishConfig })=>{
-    const { toggleModal } = useModal();
-    const { config: { admin: { dateFormat, timezones: { defaultTimezone, supportedTimezones } }, localization, routes: { api }, serverURL } } = useConfig();
-    const { id, collectionSlug, globalSlug } = useDocumentInfo();
-    const { title } = useDocumentTitle();
-    const { i18n, t } = useTranslation();
-    const { schedulePublish } = useServerFunctions();
-    const [type, setType] = React.useState(defaultType || 'publish');
-    const [date, setDate] = React.useState();
-    const [timezone, setTimezone] = React.useState(defaultTimezone);
-    const [locale, setLocale] = React.useState(defaultLocaleOption);
-    const [processing, setProcessing] = React.useState(false);
-    const modalTitle = t('general:schedulePublishFor', {
-        title
-    });
-    const [upcoming, setUpcoming] = React.useState();
-    const [upcomingColumns, setUpcomingColumns] = React.useState();
-    const deleteHandlerRef = React.useRef(()=>null);
-    // Get the user timezone so we can adjust the displayed value against it
-    const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const localeOptions = React.useMemo(()=>{
-        if (localization) {
-            const options = localization.locales.map(({ code, label })=>({
-                    label: getTranslation(label, i18n),
-                    value: code
-                }));
-            options.unshift(defaultLocaleOption);
-            return options;
-        }
-        return [];
-    }, [
-        localization,
-        i18n
-    ]);
-    const fetchUpcoming = React.useCallback(async ()=>{
-        const query = {
-            sort: 'waitUntil',
-            where: {
-                and: [
-                    {
-                        taskSlug: {
-                            equals: 'schedulePublish'
-                        }
-                    },
-                    {
-                        waitUntil: {
-                            greater_than: new Date()
-                        }
-                    }
-                ]
-            }
-        };
-        if (collectionSlug) {
-            query.where.and.push({
-                'input.doc.value': {
-                    equals: String(id)
-                }
-            });
-            query.where.and.push({
-                'input.doc.relationTo': {
-                    equals: collectionSlug
-                }
-            });
-        }
-        if (globalSlug) {
-            query.where.and.push({
-                'input.global': {
-                    equals: globalSlug
-                }
-            });
-        }
-        const { docs } = await requests.post(`${serverURL}${api}/payload-jobs`, {
-            body: qs.stringify(query),
-            headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/x-www-form-urlencoded',
-                'X-Payload-HTTP-Method-Override': 'GET'
-            }
-        }).then((res)=>res.json());
-        setUpcomingColumns(buildUpcomingColumns({
-            dateFormat,
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            deleteHandler: deleteHandlerRef.current,
-            docs,
-            i18n,
-            localization,
-            supportedTimezones,
-            t
-        }));
-        setUpcoming(docs);
-    }, [
-        collectionSlug,
-        globalSlug,
-        serverURL,
-        api,
-        i18n,
+export const ScheduleDrawer = ({
+  slug,
+  defaultType,
+  schedulePublishConfig
+}) => {
+  const {
+    toggleModal
+  } = useModal();
+  const {
+    config: {
+      admin: {
         dateFormat,
-        localization,
-        supportedTimezones,
-        t,
-        id
-    ]);
-    const deleteHandler = React.useCallback(async (id)=>{
-        try {
-            await schedulePublish({
-                deleteID: id
-            });
-            await fetchUpcoming();
-            toast.success(t('general:deletedSuccessfully'));
-        } catch (err) {
-            console.error(err);
-            toast.error(err.message);
+        timezones: {
+          defaultTimezone,
+          supportedTimezones
         }
-    }, [
-        fetchUpcoming,
-        schedulePublish,
-        t
-    ]);
-    React.useEffect(()=>{
-        deleteHandlerRef.current = deleteHandler;
-    }, [
-        deleteHandler
-    ]);
-    const handleSave = React.useCallback(async ()=>{
-        if (!date) {
-            return toast.error(t('general:noDateSelected'));
+      },
+      localization,
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const {
+    id,
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const {
+    title
+  } = useDocumentTitle();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    schedulePublish
+  } = useServerFunctions();
+  const [type, setType] = React.useState(defaultType || 'publish');
+  const [date, setDate] = React.useState();
+  const [timezone, setTimezone] = React.useState(defaultTimezone);
+  const [locale, setLocale] = React.useState(defaultLocaleOption);
+  const [processing, setProcessing] = React.useState(false);
+  const modalTitle = t('general:schedulePublishFor', {
+    title
+  });
+  const [upcoming, setUpcoming] = React.useState();
+  const [upcomingColumns, setUpcomingColumns] = React.useState();
+  const deleteHandlerRef = React.useRef(() => null);
+  // Get the user timezone so we can adjust the displayed value against it
+  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const localeOptions = React.useMemo(() => {
+    if (localization) {
+      const options = localization.locales.map(({
+        code,
+        label
+      }) => ({
+        label: getTranslation(label, i18n),
+        value: code
+      }));
+      options.unshift(defaultLocaleOption);
+      return options;
+    }
+    return [];
+  }, [localization, i18n]);
+  const fetchUpcoming = React.useCallback(async () => {
+    const query = {
+      sort: 'waitUntil',
+      where: {
+        and: [{
+          taskSlug: {
+            equals: 'schedulePublish'
+          }
+        }, {
+          waitUntil: {
+            greater_than: new Date()
+          }
+        }]
+      }
+    };
+    if (collectionSlug) {
+      query.where.and.push({
+        'input.doc.value': {
+          equals: String(id)
         }
-        setProcessing(true);
-        let publishSpecificLocale;
-        if (typeof locale === 'object' && locale.value !== 'all' && type === 'publish') {
-            publishSpecificLocale = locale.value;
+      });
+      query.where.and.push({
+        'input.doc.relationTo': {
+          equals: collectionSlug
         }
-        try {
-            await schedulePublish({
-                type,
-                date,
-                doc: collectionSlug ? {
-                    relationTo: collectionSlug,
-                    value: String(id)
-                } : undefined,
-                global: globalSlug || undefined,
-                locale: publishSpecificLocale,
-                timezone
-            });
-            setDate(undefined);
-            toast.success(t('version:scheduledSuccessfully'));
-            void fetchUpcoming();
-        } catch (err) {
-            console.error(err);
-            toast.error(err.message);
+      });
+    }
+    if (globalSlug) {
+      query.where.and.push({
+        'input.global': {
+          equals: globalSlug
         }
-        setProcessing(false);
-    }, [
-        date,
-        locale,
+      });
+    }
+    const {
+      docs
+    } = await requests.post(`${serverURL}${api}/payload-jobs`, {
+      body: qs.stringify(query),
+      headers: {
+        'Accept-Language': i18n.language,
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'X-Payload-HTTP-Method-Override': 'GET'
+      }
+    }).then(res => res.json());
+    setUpcomingColumns(buildUpcomingColumns({
+      dateFormat,
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      deleteHandler: deleteHandlerRef.current,
+      docs,
+      i18n,
+      localization,
+      supportedTimezones,
+      t
+    }));
+    setUpcoming(docs);
+  }, [collectionSlug, globalSlug, serverURL, api, i18n, dateFormat, localization, supportedTimezones, t, id]);
+  const deleteHandler = React.useCallback(async id_0 => {
+    try {
+      await schedulePublish({
+        deleteID: id_0
+      });
+      await fetchUpcoming();
+      toast.success(t('general:deletedSuccessfully'));
+    } catch (err) {
+      console.error(err);
+      toast.error(err.message);
+    }
+  }, [fetchUpcoming, schedulePublish, t]);
+  React.useEffect(() => {
+    deleteHandlerRef.current = deleteHandler;
+  }, [deleteHandler]);
+  const handleSave = React.useCallback(async () => {
+    if (!date) {
+      return toast.error(t('general:noDateSelected'));
+    }
+    setProcessing(true);
+    let publishSpecificLocale;
+    if (typeof locale === 'object' && locale.value !== 'all' && type === 'publish') {
+      publishSpecificLocale = locale.value;
+    }
+    try {
+      await schedulePublish({
         type,
-        t,
-        schedulePublish,
-        collectionSlug,
-        id,
-        globalSlug,
-        timezone,
-        fetchUpcoming
-    ]);
-    const displayedValue = useMemo(()=>{
-        if (timezone && userTimezone && date) {
-            // Create TZDate instances for the selected timezone and the user's timezone
-            // These instances allow us to transpose the date between timezones while keeping the same time value
-            const DateWithOriginalTz = TZDate.tz(timezone);
-            const DateWithUserTz = TZDate.tz(userTimezone);
-            const modifiedDate = new TZDate(date).withTimeZone(timezone);
-            // Transpose the date to the selected timezone
-            const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz);
-            // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone
-            const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz);
-            return dateWithUserTimezone.toISOString();
-        }
-        return date;
-    }, [
-        timezone,
         date,
-        userTimezone
-    ]);
-    const onChangeDate = useCallback((incomingDate)=>{
-        if (timezone && incomingDate) {
-            // Create TZDate instances for the selected timezone
-            const tzDateWithUTC = TZDate.tz(timezone);
-            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
-            const dateToUserTz = new TZDate(incomingDate);
-            // Transpose the date to the selected timezone
-            const dateWithTimezone = transpose(dateToUserTz, tzDateWithUTC);
-            setDate(dateWithTimezone || null);
-        } else {
-            setDate(incomingDate || null);
-        }
-    }, [
-        setDate,
+        doc: collectionSlug ? {
+          relationTo: collectionSlug,
+          value: String(id)
+        } : undefined,
+        global: globalSlug || undefined,
+        locale: publishSpecificLocale,
         timezone
-    ]);
-    React.useEffect(()=>{
-        if (!upcoming) {
-            const fetchInitialUpcoming = async ()=>{
-                await fetchUpcoming();
-            };
-            void fetchInitialUpcoming();
-        }
-    }, [
-        upcoming,
-        fetchUpcoming
-    ]);
-    const minTime = useMemo(()=>{
-        if (date && isToday(date)) {
-            return new Date();
-        }
-        return startOfDay(new Date());
-    }, [
-        date
-    ]);
-    return <Drawer className={baseClass} gutter={false} Header={<div className={`${baseClass}__drawer-header`}>
-          <h2 title={modalTitle}>{modalTitle}</h2>
-          <DrawerCloseButton onClick={()=>toggleModal(slug)}/>
-        </div>} slug={slug}>
-      <Gutter className={`${baseClass}__scheduler`}>
-        <FieldLabel label={t('version:type')} required/>
-        <ul className={`${baseClass}__type`}>
-          <li>
-            <Radio id={`${slug}-type`} isSelected={type === 'publish'} onChange={()=>setType('publish')} option={{
-        label: t('version:publish'),
-        value: 'publish'
-    }} path={`${slug}-type`} readOnly={processing}/>
-          </li>
-          <li>
-            <Radio id={`${slug}-type`} isSelected={type === 'unpublish'} onChange={()=>setType('unpublish')} option={{
-        label: t('version:unpublish'),
-        value: 'unpublish'
-    }} path={`${slug}-type`} readOnly={processing}/>
-          </li>
-        </ul>
-        <br/>
-        <FieldLabel label={t('general:time')} path={'time'} required/>
-        <DatePickerField id="time" maxTime={endOfToday()} minDate={new Date()} minTime={minTime} onChange={(e)=>onChangeDate(e)} pickerAppearance="dayAndTime" readOnly={processing} timeFormat={schedulePublishConfig?.timeFormat} timeIntervals={schedulePublishConfig?.timeIntervals ?? 5} value={displayedValue}/>
-        {supportedTimezones.length > 0 && <TimezonePicker id={`timezone-picker`} onChange={setTimezone} options={supportedTimezones} selectedTimezone={timezone}/>}
-        <br/>
-        {localeOptions.length > 0 && type === 'publish' && <React.Fragment>
-            <FieldLabel label={t('localization:localeToPublish')}/>
-            <ReactSelect onChange={(e)=>setLocale(e)} options={localeOptions} value={locale}/>
-            <br/>
-          </React.Fragment>}
-        <div className={`${baseClass}__actions`}>
-          <Button buttonStyle="primary" disabled={processing} id="scheduled-publish-save" onClick={handleSave} type="button">
-            {t('general:save')}
-          </Button>
-          {processing ? <span>{t('general:saving')}</span> : null}
-        </div>
-      </Gutter>
-      <Gutter className={`${baseClass}__upcoming`}>
-        <h4>{t('general:upcomingEvents')}</h4>
-        {!upcoming && <ShimmerEffect/>}
-        {upcoming?.length === 0 && <Banner type="info">{t('general:noUpcomingEventsScheduled')}</Banner>}
-        {upcoming?.length > 0 && <Table appearance="condensed" columns={upcomingColumns} data={upcoming}/>}
-      </Gutter>
-    </Drawer>;
+      });
+      setDate(undefined);
+      toast.success(t('version:scheduledSuccessfully'));
+      void fetchUpcoming();
+    } catch (err_0) {
+      console.error(err_0);
+      toast.error(err_0.message);
+    }
+    setProcessing(false);
+  }, [date, locale, type, t, schedulePublish, collectionSlug, id, globalSlug, timezone, fetchUpcoming]);
+  const displayedValue = useMemo(() => {
+    if (timezone && userTimezone && date) {
+      // Create TZDate instances for the selected timezone and the user's timezone
+      // These instances allow us to transpose the date between timezones while keeping the same time value
+      const DateWithOriginalTz = TZDate.tz(timezone);
+      const DateWithUserTz = TZDate.tz(userTimezone);
+      const modifiedDate = new TZDate(date).withTimeZone(timezone);
+      // Transpose the date to the selected timezone
+      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz);
+      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone
+      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz);
+      return dateWithUserTimezone.toISOString();
+    }
+    return date;
+  }, [timezone, date, userTimezone]);
+  const onChangeDate = useCallback(incomingDate => {
+    if (timezone && incomingDate) {
+      // Create TZDate instances for the selected timezone
+      const tzDateWithUTC = TZDate.tz(timezone);
+      // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
+      const dateToUserTz = new TZDate(incomingDate);
+      // Transpose the date to the selected timezone
+      const dateWithTimezone_0 = transpose(dateToUserTz, tzDateWithUTC);
+      setDate(dateWithTimezone_0 || null);
+    } else {
+      setDate(incomingDate || null);
+    }
+  }, [setDate, timezone]);
+  React.useEffect(() => {
+    if (!upcoming) {
+      const fetchInitialUpcoming = async () => {
+        await fetchUpcoming();
+      };
+      void fetchInitialUpcoming();
+    }
+  }, [upcoming, fetchUpcoming]);
+  const minTime = useMemo(() => {
+    if (date && isToday(date)) {
+      return new Date();
+    }
+    return startOfDay(new Date());
+  }, [date]);
+  return /*#__PURE__*/_jsxs(Drawer, {
+    className: baseClass,
+    gutter: false,
+    Header: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__drawer-header`,
+      children: [/*#__PURE__*/_jsx("h2", {
+        title: modalTitle,
+        children: modalTitle
+      }), /*#__PURE__*/_jsx(DrawerCloseButton, {
+        onClick: () => toggleModal(slug)
+      })]
+    }),
+    slug: slug,
+    children: [/*#__PURE__*/_jsxs(Gutter, {
+      className: `${baseClass}__scheduler`,
+      children: [/*#__PURE__*/_jsx(FieldLabel, {
+        label: t('version:type'),
+        required: true
+      }), /*#__PURE__*/_jsxs("ul", {
+        className: `${baseClass}__type`,
+        children: [/*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Radio, {
+            id: `${slug}-type`,
+            isSelected: type === 'publish',
+            onChange: () => setType('publish'),
+            option: {
+              label: t('version:publish'),
+              value: 'publish'
+            },
+            path: `${slug}-type`,
+            readOnly: processing
+          })
+        }), /*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Radio, {
+            id: `${slug}-type`,
+            isSelected: type === 'unpublish',
+            onChange: () => setType('unpublish'),
+            option: {
+              label: t('version:unpublish'),
+              value: 'unpublish'
+            },
+            path: `${slug}-type`,
+            readOnly: processing
+          })
+        })]
+      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(FieldLabel, {
+        label: t('general:time'),
+        path: 'time',
+        required: true
+      }), /*#__PURE__*/_jsx(DatePickerField, {
+        id: "time",
+        maxTime: endOfToday(),
+        minDate: new Date(),
+        minTime: minTime,
+        onChange: e => onChangeDate(e),
+        pickerAppearance: "dayAndTime",
+        readOnly: processing,
+        timeFormat: schedulePublishConfig?.timeFormat,
+        timeIntervals: schedulePublishConfig?.timeIntervals ?? 5,
+        value: displayedValue
+      }), supportedTimezones.length > 0 && /*#__PURE__*/_jsx(TimezonePicker, {
+        id: `timezone-picker`,
+        onChange: setTimezone,
+        options: supportedTimezones,
+        selectedTimezone: timezone
+      }), /*#__PURE__*/_jsx("br", {}), localeOptions.length > 0 && type === 'publish' && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(FieldLabel, {
+          label: t('localization:localeToPublish')
+        }), /*#__PURE__*/_jsx(ReactSelect, {
+          onChange: e_0 => setLocale(e_0),
+          options: localeOptions,
+          value: locale
+        }), /*#__PURE__*/_jsx("br", {})]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [/*#__PURE__*/_jsx(Button, {
+          buttonStyle: "primary",
+          disabled: processing,
+          id: "scheduled-publish-save",
+          onClick: handleSave,
+          type: "button",
+          children: t('general:save')
+        }), processing ? /*#__PURE__*/_jsx("span", {
+          children: t('general:saving')
+        }) : null]
+      })]
+    }), /*#__PURE__*/_jsxs(Gutter, {
+      className: `${baseClass}__upcoming`,
+      children: [/*#__PURE__*/_jsx("h4", {
+        children: t('general:upcomingEvents')
+      }), !upcoming && /*#__PURE__*/_jsx(ShimmerEffect, {}), upcoming?.length === 0 && /*#__PURE__*/_jsx(Banner, {
+        type: "info",
+        children: t('general:noUpcomingEventsScheduled')
+      }), upcoming?.length > 0 && /*#__PURE__*/_jsx(Table, {
+        appearance: "condensed",
+        columns: upcomingColumns,
+        data: upcoming
+      })]
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map