@licklist/design 0.66.1-dev.3 → 0.66.1

package/src/product-set/form/StepsControl.tsx

@@ -19,16 +19,9 @@ import { ProductSetFormValues } from "./ProductSetForm";
 interface StepsControlProps {
   isLoading: boolean;
   isOverrides?: boolean;
-  isEventEditProductSet?: boolean;
-  isCreateNewOverrides?: boolean;
 }
 
-export function StepsControl({
-  isLoading,
-  isOverrides,
-  isEventEditProductSet,
-  isCreateNewOverrides,
-}: StepsControlProps) {
+export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -75,9 +68,9 @@ export function StepsControl({
     <>
       {fields.map((step, index) => {
         const stepFieldName = `steps.${index}` as const;
+
         const stepData = getValues(stepFieldName);
-        const isOverrideStep =
-          (isOverrides || isCreateNewOverrides) && !!step.id;
+
         return (
           <Controller
             key={`step-${step._id}`}
@@ -99,9 +92,9 @@ export function StepsControl({
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => edit(index)}
+                edit={() => !isOverrides && edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrideStep}
+                isOverride={isOverrides}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -117,7 +110,6 @@ export function StepsControl({
                     stepIndex={index}
                     stepName={value}
                     onStepNameChange={onChange}
-                    isOverrides={isOverrideStep}
                   />
                 }
                 onDelete={() => remove(index)}
@@ -148,8 +140,6 @@ export function StepsControl({
                   isLoading={isLoading}
                   stepIndex={index}
                   isOverrides={isOverrides}
-                  isCreateNewOverrides={isCreateNewOverrides}
-                  isEventEditProductSet={isEventEditProductSet}
                 />
               </SortableTree.Item>
             )}
@@ -159,7 +149,9 @@ export function StepsControl({
 
       <CreateProductSetItem
         title={t("addStep")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -22,6 +22,7 @@ export const useSortableTreeFunctions = ({
   };
 
   const cancelChanges = (index: number) => {
+    if (isOverrides) return;
     if (!previousValue) {
       // eslint-disable-next-line consistent-return
       return remove(index);

package/src/product-set/product/ProductControl.tsx

@@ -7,17 +7,14 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import {
-  ProductType,
-  PRODUCT_DEfAULT_COLORS,
-} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
+import clsx from "clsx";
 import React, {
   ChangeEvent,
   useCallback,
@@ -39,7 +36,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-
+import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -89,7 +86,6 @@ export interface ProductControlValues
   totalQuantity: number;
   isAvailable: boolean;
   isSoldOut: boolean;
-  originalProductId: number | null;
   isUnlimited: boolean;
   isRequired: boolean;
   quantitySelector: number;
@@ -160,6 +156,7 @@ export function ProductControl<T extends FormValues>({
   );
   const capacity = watch(`${fieldNamePrefix}.capacity` as Path<T>);
   const disabledDuration = capacity === "0" || !capacity;
+
   const advancedId = useId();
   const nameId = useId();
 
@@ -413,7 +410,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.productGroupId` as Path<T>,
                 errors
               )}
-              disabled={isLoading || isOverrides}
+              disabled={isLoading}
               defaultValue=""
             >
               <option value="">{t("Design:selectProductGroup")}</option>

package/src/product-set/step/StepControl.tsx

@@ -26,7 +26,6 @@ export interface StepControlProps extends IsDeletableEvent {
   stepIndex: number;
   stepName: string;
   onStepNameChange: (args: any) => void;
-  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -34,7 +33,6 @@ export function StepControl({
   stepIndex,
   stepName,
   onStepNameChange,
-  isOverrides = false,
 }: StepControlProps) {
   const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
@@ -44,6 +42,7 @@ export function StepControl({
     watch,
   } = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
+
   const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
     `steps.${stepIndex}.productCategories` as const;
@@ -72,7 +71,7 @@ export function StepControl({
                     fieldName,
                     errors
                   )}
-                  disabled={isLoading || isOverrides}
+                  disabled={isLoading}
                 />
               )}
               control={control}
@@ -115,7 +114,7 @@ export function StepControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading || isOverrides}
+                          disabled={isLoading}
                         />
                       )}
                       control={control}

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,7 +1,9 @@
+import { DateTime } from "luxon";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -23,10 +25,22 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {t("timeInterval", {
-                  start: weekday.start,
-                  end: weekday.end,
-                })}
+                {weekday?.end
+                  ? weekday.start
+                    ? t("timeInterval", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                      })
+                    : t("timeFrom", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                      })
+                  : null}
               </Col>
             </Row>
           );

package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -2,18 +2,8 @@ import React, { useEffect } from "react";
 import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import {
-  RegisterOptions,
-  useFormContext,
-  useWatch,
-  Validate,
-} from "react-hook-form";
-import {
-  DATE_FORMAT,
-  TIME_FORMAT,
-  TIME_FULL_FORMAT,
-} from "@licklist/core/dist/Config";
-import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
+import { RegisterOptions, useFormContext } from "react-hook-form";
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -33,15 +23,6 @@ interface RecurrenceIntervalAndFrequencyInputProps {
   >;
 }
 
-const fromTimeFormat = fromFormat(TIME_FORMAT);
-const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
-
-// default values and entered values are in different formats
-const fromTimeFormats = (time: string) =>
-  fromTimeFormat(time).isValid
-    ? fromTimeFormat(time)
-    : fromTimeFullFormat(time);
-
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
@@ -55,21 +36,16 @@ function RecurrenceIntervalAndFrequencyInput({
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
   const {
+    getValues,
     formState: { errors },
     register,
     trigger,
-    control,
   } = useFormContext<RecurringDatePickerInputValues>();
 
-  const startDate = useWatch({ control, name: "startDate" });
-  const endDate = useWatch({ control, name: "endDate" });
-
-  const _startTime = useWatch({ control, name: "startTime" });
-  const startTime =
-    _startTime && fromTimeFormats(_startTime).toFormat(TIME_FORMAT);
-
-  const _endTime = useWatch({ control, name: "endTime" });
-  const endTime = _endTime && fromTimeFormats(_endTime).toFormat(TIME_FORMAT);
+  const startDate = getValues("startDate");
+  const endDate = getValues("endDate");
+  const startTime = getValues("startTime");
+  const endTime = getValues("endTime");
 
   useEffect(() => {
     if (!startDate || !endDate) {
@@ -173,27 +149,22 @@ function RecurrenceIntervalAndFrequencyInput({
               type="time"
               {...register("endTime", {
                 required: false,
-                ...endTimeRules,
-                validate: {
-                  external: endTimeRules?.validate
-                    ? (endTimeRules?.validate as Validate<string>)
-                    : () => true,
-                  time: (time) => {
-                    if (!startTime || !time) {
-                      return true;
-                    }
-                    const currentStartTime = DateTime.fromISO(startTime);
-                    const currentEndTime = DateTime.fromISO(time);
+                validate: (time) => {
+                  if (!startTime || !time) {
+                    return true;
+                  }
+                  const currentStartTime = DateTime.fromISO(startTime);
+                  const currentEndTime = DateTime.fromISO(time);
 
-                    return currentEndTime?.diff(currentStartTime, ["minutes"])
-                      ?.minutes >= 0
-                      ? true
-                      : `${t(`Validation:fieldLaterDate`, {
-                          attribute: t("Design:endTimeSmall"),
-                          min: t("Design:startTimeSmall"),
-                        })}`;
-                  },
+                  return currentEndTime?.diff(currentStartTime, ["minutes"])
+                    ?.minutes >= 0
+                    ? true
+                    : `${t(`Validation:fieldLaterDate`, {
+                        attribute: t("Design:endTimeSmall"),
+                        min: t("Design:startTimeSmall"),
+                      })}`;
                 },
+                ...endTimeRules,
               })}
               placeholder="hh:mm"
               defaultValue={endTime}

package/src/recurring-date-picker-input/RecurringDatePickerInput.stories.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { Card } from "react-bootstrap";
-import { DateTime } from "luxon";
-import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputProps,
 } from "./RecurringDatePickerInput";
+import { DateTime } from "luxon";
+import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 
 export default {
   title: "RecurringDatePickerInput",
   component: RecurringDatePickerInput,
 } as Meta;
 
-export const Default: Story<RecurringDatePickerInputProps> = (args) => {
+interface DefaultRecurringDatePickerInputProps
+  extends RecurringDatePickerInputProps {}
+
+export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -22,7 +25,7 @@ export const Default: Story<RecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -33,15 +36,6 @@ export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
 };
 Default.args = {
   onChange: (data) => console.log("onSubmit", data),
-  workHours: [
-    { start: "20:00", end: "04:00", day: 0, description: "" },
-    { start: "20:00", end: "04:00", day: 1, description: "" },
-    { start: "20:00", end: "04:00", day: 2, description: "" },
-    { start: "20:00", end: "12:00", day: 3, description: "" },
-    { start: "20:00", end: "23:00", day: 4, description: "" },
-    { start: "08:00", end: "12:00", day: 5, description: "" },
-    { start: "10:00", end: "16:00", day: 6, description: "" },
-  ],
 };
 Valid.args = {
   onChange: (data) => console.log("onSubmit", data),

package/src/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -12,14 +12,9 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import {
-  parseAndValidateRRule,
-  SupportedFrequency,
-  useWorkHoursValidation,
-} from "./utils";
+import { parseAndValidateRRule, SupportedFrequency } from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -31,7 +26,6 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
-  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -57,7 +51,6 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
-  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -91,8 +84,6 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
-  const validator = useWorkHoursValidation(byWeekDay, workHours);
-
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -197,8 +188,6 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
-          startTimeRules={validator}
-          endTimeRules={validator}
         />
 
         {children}

package/src/recurring-date-picker-input/utils.ts

@@ -1,9 +1,4 @@
-import { TIME_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
-import { DateTime, Interval } from "luxon";
-import { Validate } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { DateTime } from "luxon";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -16,7 +11,6 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
-    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -115,86 +109,3 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
-
-export const useWorkHoursValidation = (
-  byWeekDay: Weekday[] = [],
-  workHours: WorkHour[] | undefined
-): {
-  validate?: Validate<string>;
-} => {
-  const { t } = useTranslation("Validation");
-  if (!workHours) return {};
-
-  const fromTimeFormat = fromFormat(TIME_FORMAT);
-  const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
-
-  // map every day to array of intervals describing workhours for that day
-  let intervalsByDay = workHours.map((workhour, index, self) => {
-    const res: Interval[] = [];
-
-    const startTime = fromTimeFormat(workhour.start);
-    const endTime = fromTimeFormat(workhour.end);
-
-    if (endTime > startTime) {
-      res.push(Interval.fromDateTimes(startTime, endTime));
-    } else {
-      // if end is before start, then it means that end is on the next day
-      // so count only to the end of current day
-      res.push(Interval.fromDateTimes(startTime, startTime.endOf("day")));
-    }
-
-    const prevIndex = index === 0 ? self.length - 1 : index - 1;
-
-    const prevStartTime = fromTimeFormat(self[prevIndex].start);
-    const prevEndTime = fromTimeFormat(self[prevIndex].end);
-
-    // if prevStartTime > prevEndTime then it means that prevEndTime is on the current day
-    // so we need to add interval from start of current day to prevEndTime
-    if (prevStartTime > prevEndTime) {
-      res.push(Interval.fromDateTimes(prevEndTime.startOf("day"), prevEndTime));
-    }
-
-    return res;
-  });
-
-  // if length === 0 or length === 7 then all workhours are selected, no need to filter
-  if (![0, 7].includes(byWeekDay.length)) {
-    intervalsByDay = intervalsByDay.filter((_, index) =>
-      byWeekDay.find(({ weekday }) => weekday === index)
-    );
-  }
-
-  return {
-    validate: (_time: string) => {
-      // workaround for issue with form values
-      // default values and entered values have different formats
-      const time = fromTimeFormat(_time).isValid
-        ? fromTimeFormat(_time)
-        : fromTimeFullFormat(_time);
-
-      const notFittingIntervalsByDay = intervalsByDay.reduce<Interval[][]>(
-        (acc, intervalsByDay) => {
-          if (!intervalsByDay.some((interval) => interval.contains(time))) {
-            acc.push(intervalsByDay);
-          }
-          return acc;
-        },
-        []
-      );
-
-      const notFittingIntervals = notFittingIntervalsByDay
-        .flat()
-        .filter((interval) => !interval.contains(time));
-
-      const attribute = notFittingIntervals
-        .map((interval) => interval.toFormat("HH:mm"))
-        .join(", ");
-
-      if (notFittingIntervalsByDay.length !== 0) {
-        return t("outsideWorkingHours", { attribute }) as string;
-      }
-
-      return true;
-    },
-  };
-};

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -23,7 +23,7 @@ interface ReportField {
   title: string;
 }
 
-export type ReportRunnerModalProps = {
+type ReportRunnerModalProps = {
   reportId: Report["id"] | null;
   show: boolean;
   useShowReportFields: (
@@ -136,38 +136,28 @@ export const ReportRunnerModal = ({
           </Button>
 
           <form noValidate>
-            <div
-              className={`pl-1 ${
-                errors.periodBy?.message && "border-danger border rounded"
-              }`}
-            >
-              <div className="period-by">
-                {PERIOD_BY_TYPES.map((type) => (
-                  <div key={type}>
+            <div className="period-by">
+              {PERIOD_BY_TYPES.map((type) => (
+                <div key={type}>
+                  <Form.Group>
                     <Form.Check
                       inline
+                      isInvalid={!!errors.periodBy}
                       label={t(labelByPeriodType[type])}
                       type="radio"
                       id={type}
-                      required
                       value={type}
-                      {...register("periodBy", {
-                        required: `${t("Validation:fieldRequired", {
-                          attribute: t("Design:period"),
-                        })}`,
-                      })}
+                      {...register("periodBy")}
                     />
-                  </div>
-                ))}
-              </div>
-              {errors.periodBy?.message && (
-                <div className="iframe-event__message-error justify-content-start mb-1">
-                  {errors.periodBy?.message}
+                    <Form.Control.Feedback type="invalid">
+                      {errors.periodBy?.message}
+                    </Form.Control.Feedback>
+                  </Form.Group>
                 </div>
-              )}
+              ))}
             </div>
 
-            <div className="controls mt-4">
+            <div className="controls">
               <Form.Group controlId="from-input">
                 <Form.Label>{t("Design:from")}</Form.Label>
                 <Form.Control
@@ -178,7 +168,7 @@ export const ReportRunnerModal = ({
                     required: {
                       value: true,
                       message: `${t("Validation:fieldRequired", {
-                        attribute: t("Design:from"),
+                        attribute: t("Design:to"),
                       })}`,
                     },
                   })}

package/src/sales/booking/results/components/ResultCard.tsx

@@ -12,6 +12,7 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
+
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -21,6 +22,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/setting/admin/AdminSettingForm.tsx

@@ -11,7 +11,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProviderType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
 import Icon from "../../static/Icon";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
@@ -33,7 +33,7 @@ export interface AdminSettingFormProps extends HasPermissionProp {
   providerMetadata: {
     country?: string;
     providableId?: number;
-    providerType?: ProvidableType;
+    providerType?: ProviderType;
   };
 }
 

package/src/sortable-tree/SortableTreeItem.tsx

@@ -53,6 +53,7 @@ export interface SortableTreeItemProps {
   };
   setIsExpanded?: () => void;
   isOverride?: boolean;
+  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -80,6 +81,7 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
+  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -150,6 +152,7 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
+    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ?? t("yes") },
+    { id: 1, value: firstValueTitle ??  t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];