@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/components/GTimePicker/hooks/useCompareDateTimePicker.tsx

@@ -0,0 +1,79 @@
+import type { CompareDateTimePickerAlias } from '../constants';
+import type { IDateTimePickerProps } from './useDateTimePicker';
+
+import { DATE_TIME_COMPARISON_FILTERS, COMPARE_DATE_TIME_FILTERS_MAP } from '../constants';
+import { getMonthAndYearByDateFilter } from '../helpers';
+import { useDateTimePickerContext } from '../contexts';
+import { dayjsTz } from '@/utils';
+import { useState } from 'react';
+
+type ICompareDateTimePickerProps = IDateTimePickerProps;
+
+export const useCompareDateTimePicker = ({ ranges, onApply }: ICompareDateTimePickerProps) => {
+  const allRanges = ranges || DATE_TIME_COMPARISON_FILTERS;
+
+  const { compareDateTimePicked, setCompareDateTimePicked } = useDateTimePickerContext();
+  const { dateTimePicked: mainDateRange } = useDateTimePickerContext();
+
+  const [dateRange, setDateRange] = useState(compareDateTimePicked);
+  const [{ month, year }, setDate] = useState({
+    month: dayjsTz(compareDateTimePicked.since).month(),
+    year: dayjsTz(compareDateTimePicked.since).year(),
+  });
+
+  const onMonthChange = (month: number, year: number) => {
+    setDate({ month, year });
+  };
+
+  const onCalendarChange = ({ start, end, alias }: { start: Date; end: Date; alias?: string }) => {
+    const newDateRange = allRanges.find((range) => {
+      return range.alias === alias;
+    });
+
+    const mapper = COMPARE_DATE_TIME_FILTERS_MAP[alias as CompareDateTimePickerAlias];
+
+    // If the alias is not found (or has no mapper), set the custom date range
+    if (!newDateRange || !mapper) {
+      setDateRange({
+        alias: 'custom',
+        title: 'Custom',
+        since: start.getTime(),
+        until: end.getTime(),
+      });
+      return;
+    }
+
+    setDateRange({
+      ...newDateRange,
+      ...mapper({
+        since: mainDateRange.since,
+        until: mainDateRange.until,
+      }),
+    });
+  };
+
+  const apply = () => {
+    setCompareDateTimePicked(dateRange);
+    onApply?.(dateRange);
+  };
+
+  const cancel = () => {
+    setDateRange(compareDateTimePicked);
+  };
+  const onChange = ({ end }: { start: Date; end: Date }) => {
+    setDate(getMonthAndYearByDateFilter(month, year, end));
+  };
+
+  return {
+    month,
+    year,
+    setDate,
+    dateRange,
+    apply,
+    cancel,
+    compareDateTimePicked,
+    onChange,
+    onMonthChange,
+    onCalendarChange,
+  };
+};

package/src/components/GTimePicker/hooks/useDateTimeFilter.ts

@@ -0,0 +1,83 @@
+import type { DateTimeFilter } from '../types';
+
+import { getDateTimeFilterMapping, MainDateTimePickerAlias } from '../constants';
+import { useTimezoneContext } from '@/providers/TimezoneProvider';
+import { dayjsTzToLocalTZ } from '@/utils';
+
+export const useDateTimeFilter = () => {
+  useTimezoneContext();
+  const currentDate = dayjsTzToLocalTZ().startOf('day');
+  const mappings = getDateTimeFilterMapping();
+
+  const TODAY_CONFIG = mappings[MainDateTimePickerAlias.TODAY];
+  const TODAY_DATE_RANGE = {
+    ...TODAY_CONFIG,
+    ...TODAY_CONFIG.getDateRange(currentDate),
+  };
+
+  const YESTERDAY_CONFIG = mappings[MainDateTimePickerAlias.YESTERDAY];
+  const YESTERDAY_DATE_RANGE = {
+    ...YESTERDAY_CONFIG,
+    ...YESTERDAY_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_7_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_7_DAYS];
+  const LAST_7_DAYS_DATE_RANGE = {
+    ...LAST_7_DAYS_CONFIG,
+    ...LAST_7_DAYS_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_30_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_30_DAYS];
+  const LAST_30_DAYS_DATE_RANGE = {
+    ...LAST_30_DAYS_CONFIG,
+    ...LAST_30_DAYS_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_90_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_90_DAYS];
+  const LAST_90_DAYS_DATE_RANGE = {
+    ...LAST_90_DAYS_CONFIG,
+    ...LAST_90_DAYS_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_365_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_365_DAYS];
+  const LAST_365_DAYS_DATE_RANGE = {
+    ...LAST_365_DAYS_CONFIG,
+    ...LAST_365_DAYS_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_MONTH_CONFIG = mappings[MainDateTimePickerAlias.LAST_MONTH];
+  const LAST_MONTH_DATE_RANGE = {
+    ...LAST_MONTH_CONFIG,
+    ...LAST_MONTH_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_12_MONTHS_CONFIG = mappings[MainDateTimePickerAlias.LAST_12_MONTHS];
+  const LAST_12_MONTHS_DATE_RANGE = {
+    ...LAST_12_MONTHS_CONFIG,
+    ...LAST_12_MONTHS_CONFIG.getDateRange(currentDate),
+  };
+
+  const LAST_YEAR_CONFIG = mappings[MainDateTimePickerAlias.LAST_YEAR];
+  const LAST_YEAR_DATE_RANGE = {
+    ...LAST_YEAR_CONFIG,
+    ...LAST_YEAR_CONFIG.getDateRange(currentDate),
+  };
+
+  const DATE_TIME_FILTERS: DateTimeFilter[] = [
+    TODAY_DATE_RANGE,
+    YESTERDAY_DATE_RANGE,
+    LAST_7_DAYS_DATE_RANGE,
+    LAST_30_DAYS_DATE_RANGE,
+    LAST_90_DAYS_DATE_RANGE,
+    LAST_365_DAYS_DATE_RANGE,
+    LAST_MONTH_DATE_RANGE,
+    LAST_12_MONTHS_DATE_RANGE,
+    LAST_YEAR_DATE_RANGE,
+  ];
+
+  return {
+    DATE_TIME_FILTERS,
+    LAST_7_DAYS_DATE_RANGE,
+    LAST_30_DAYS_DATE_RANGE,
+  };
+};

package/src/components/GTimePicker/hooks/useDateTimePicker.tsx

@@ -0,0 +1,99 @@
+import type { BaseTimePickerProps } from '../components/BaseTimePicker';
+import type { DateTimeFilter } from '../types';
+
+import { getMonthAndYearByDateFilter } from '../helpers';
+import { useDateTimePickerContext } from '../contexts';
+import { useDateTimeFilter } from './useDateTimeFilter';
+import { useEffect, useState } from 'react';
+import { dayjs } from '@/utils';
+
+export interface IDateRangeState {
+  alias?: DateTimeFilter['alias'];
+  start: Date;
+  end: Date;
+}
+
+export interface IDateTimePickerProps {
+  ranges?: DateTimeFilter[];
+  initialPicked?: DateTimeFilter;
+  onApply?: BaseTimePickerProps['onApply'];
+}
+
+export const useDateTimePicker = ({ ranges, initialPicked, onApply }: IDateTimePickerProps) => {
+  const { DATE_TIME_FILTERS } = useDateTimeFilter();
+  const allRanges = ranges || DATE_TIME_FILTERS;
+
+  const { dateTimePicked, setDateTimePicked } = useDateTimePickerContext();
+
+  const [dateRange, setDateRange] = useState<DateTimeFilter>(dateTimePicked);
+
+  const [{ month, year }, setDate] = useState({
+    month: dayjs(dateTimePicked.since).month(),
+    year: dayjs(dateTimePicked.since).year(),
+  });
+
+  const onMonthChange = (month: number, year: number) => {
+    setDate({ month, year });
+  };
+
+  const onCalendarChange = (value: IDateRangeState) => {
+    const { start, end, alias } = value;
+
+    const customDateRange: DateTimeFilter = {
+      alias: 'custom',
+      title: 'Custom',
+      since: start.getTime(),
+      until: end.getTime(),
+    };
+
+    const newDateRange = allRanges.find((range) => {
+      const isSameAlias = range.alias === alias;
+      const isSameUntil = range.until === end.getTime();
+      const isSameSince = range.since === start.getTime();
+      // const isSameVersionId = !!range.versionId && !!versionId && range.versionId === versionId;
+
+      const isSameTime = isSameSince && isSameUntil;
+      return isSameAlias || isSameTime;
+    });
+
+    const finalDateRange = newDateRange || initialPicked || customDateRange;
+    setDateRange(finalDateRange);
+  };
+
+  const onChange = ({ end }: { start: Date; end: Date }) => {
+    setDate(getMonthAndYearByDateFilter(month, year, end));
+  };
+
+  const apply = () => {
+    setDateTimePicked(dateRange);
+    onApply?.(dateRange);
+  };
+
+  const cancel = () => {
+    setDateRange(dateTimePicked);
+  };
+
+  useEffect(() => {
+    if (dateTimePicked) {
+      setDateRange(dateTimePicked);
+
+      setDate({
+        month: dayjs(dateTimePicked.since).month(),
+        year: dayjs(dateTimePicked.since).year(),
+      });
+    }
+  }, [dateTimePicked]);
+
+  return {
+    month,
+    year,
+    setDate,
+    dateRange,
+    apply,
+    cancel,
+    dateTimePicked,
+    onChange,
+    onMonthChange,
+    onCalendarChange,
+  };
+};

package/src/components/GTimePicker/hooks/useVersionDateTimeFilters.ts

@@ -0,0 +1,30 @@
+import type { IDateTimeFilterAddition } from '../components';
+import type { DateTimeFilter, IBaseCampaignVersion } from '../types';
+
+import { convertToDateTimeFilters } from '../helpers';
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+
+type MaybeVersion = IBaseCampaignVersion | null | undefined;
+type IVersionDateTimeFiltersProps = MaybeVersion[] | null | undefined;
+
+interface IVersionDateTimeFiltersReturn {
+  rangeAddition: IDateTimeFilterAddition;
+}
+
+export const useVersionDateTimeFilters = (versions: IVersionDateTimeFiltersProps): IVersionDateTimeFiltersReturn => {
+  const { t } = useTranslation();
+
+  const rangers: DateTimeFilter[] = useMemo(() => {
+    if (!versions?.length) return [];
+
+    return convertToDateTimeFilters(versions as IBaseCampaignVersion[]);
+  }, [versions]);
+
+  const rangeAddition = {
+    title: t('Experiment periods'),
+    rangers,
+  };
+
+  return { rangeAddition };
+};

package/src/components/GTimePicker/index.ts

@@ -0,0 +1,7 @@
+export * from './hooks';
+export * from './contexts';
+export * from './types';
+export * from './constants';
+export * from './components';
+export * from './helpers';
+export * from './GTimePicker';

package/src/components/GTimePicker/types/index.ts

@@ -0,0 +1,43 @@
+import type { Dayjs } from '@/utils';
+
+export interface DateTimeFilterBase {
+  title: string;
+  alias: string;
+}
+
+export interface IDateTimeFilterValue {
+  since: string | number;
+  until: string | number;
+}
+
+export interface DateTimeFilterVersionMeta {
+  versionId?: string;
+  isVersion?: boolean;
+  isCurrentVersion?: boolean;
+  description?: string;
+}
+
+export interface DateTimeFilter extends DateTimeFilterBase, IDateTimeFilterValue, DateTimeFilterVersionMeta {}
+
+export interface IDateTimeFilterMapping extends DateTimeFilterBase {
+  getDateRange: (date: Dayjs) => IDateTimeFilterValue;
+}
+
+export interface AnalyticDateFilter {
+  versionId?: string;
+  startDate: Dayjs;
+  endDate: Dayjs;
+  alias: string;
+  since?: string | number;
+  until?: string | number;
+  title?: string;
+}
+
+export type IGetCompareDateByAlias = (value: IDateTimeFilterValue & { alias?: string }) => IDateTimeFilterValue;
+
+export interface IBaseCampaignVersion {
+  id: string;
+  version: string;
+  startedAt?: string | null;
+  completedAt?: string | null;
+}

package/src/components/MetricDonutChartCard/MetricDonutChartCard.tsx

@@ -0,0 +1,121 @@
+import type { IDonutMetricRow, IDonutTarget } from '@/types';
+import type { EMetricKey } from '@/types';
+import type { ReactElement } from 'react';
+
+import { ANALYTICS_METRIC_TOOLTIP } from '@/constants';
+import { numberWithCommas } from '@/utils';
+import { useWindowSize } from '@/hooks';
+import { MetricChartProvider } from '@/providers';
+import { GTooltipCard } from '@/shared';
+import { cls } from '@/utils';
+import { BlockStack, Card, Icon, InlineStack, Text } from '@shopify/polaris';
+import { ChevronRightIcon } from '@shopify/polaris-icons';
+import { DonutChart } from '@shopify/polaris-viz';
+import { useMemo, useState } from 'react';
+import { MetricChartEmpty, MetricDonutChartSkeleton } from '../common/chart';
+import { buildBreakdownDonutData } from './utils';
+
+export interface IProps {
+  label: string;
+  metricKey: EMetricKey;
+  targets: IDonutTarget[];
+  totalsRow?: IDonutMetricRow;
+  comparisonTotalsRow?: IDonutMetricRow;
+  sort?: boolean;
+  isLoading?: boolean;
+  isEmptyMetricData?: boolean;
+  minHeight?: number;
+  isMockData?: boolean;
+  onClick: () => void;
+}
+
+const DONUT_CHART_MIN_HEIGHT = 294;
+const COMPACT_MAX_WIDTH = 1500;
+
+export const MetricDonutChartCard = ({
+  label,
+  metricKey,
+  targets,
+  totalsRow,
+  comparisonTotalsRow,
+  sort,
+  isLoading,
+  isEmptyMetricData,
+  minHeight = DONUT_CHART_MIN_HEIGHT,
+  isMockData,
+  onClick,
+}: IProps): ReactElement => {
+  const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
+
+  const { windowWidth, windowSize } = useWindowSize();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const data = useMemo(
+    () => buildBreakdownDonutData({ targets, metricKey, totalsRow, comparisonTotalsRow, sort }),
+    [targets, metricKey, totalsRow, comparisonTotalsRow, sort],
+  );
+
+  if (isLoading) {
+    return <MetricDonutChartSkeleton />;
+  }
+
+  const formatValue = (value: string | number | null) => {
+    return numberWithCommas(`${value}`);
+  };
+
+  const handleClickTitle = (event: React.MouseEvent) => {
+    if (isMockData) return;
+    event.stopPropagation();
+    onClick();
+  };
+
+  const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
+
+  return (
+    <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+      <Card>
+        <BlockStack gap="200">
+          <InlineStack>
+            <div
+              className={isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]'}
+              onClick={handleClickTitle}
+            >
+              <InlineStack>
+                <GTooltipCard tooltip={tooltip}>
+                  <Text as="h3" variant="headingMd">
+                    {label}
+                  </Text>
+                </GTooltipCard>
+
+                {isHovered && !isMockData && <Icon source={ChevronRightIcon} tone="inherit" />}
+              </InlineStack>
+            </div>
+          </InlineStack>
+          <div
+            className={cls('flex items-center justify-center', {
+              'max-h-[250px] overflow-hidden': isCompactView,
+            })}
+          >
+            {isEmptyMetricData ? (
+              <MetricChartEmpty title="No data yet" description="Data needs time to gather" />
+            ) : (
+              <MetricChartProvider minHeight={minHeight} seriesColors={{}}>
+                <DonutChart
+                  data={data}
+                  legendPosition="left"
+                  showLegendValues
+                  showLegend
+                  theme="Light"
+                  tooltipOptions={{
+                    valueFormatter: formatValue,
+                  }}
+                  labelFormatter={formatValue}
+                />
+              </MetricChartProvider>
+            )}
+          </div>
+        </BlockStack>
+      </Card>
+    </div>
+  );
+};

package/src/components/MetricDonutChartCard/index.ts

@@ -0,0 +1,2 @@
+export { MetricDonutChartCard } from './MetricDonutChartCard';
+export type { IProps as IMetricDonutChartCardProps } from './MetricDonutChartCard';

package/src/components/MetricDonutChartCard/utils/donut-chart.ts

@@ -0,0 +1,75 @@
+import type { EMetricKey, IDonutMetricRow, IDonutTarget, IMetricDonutChartData } from '@/types';
+import type { IBreakdownItem } from '@/core/gemxql';
+
+import { parseBreakdownItems } from '@/core/gemxql';
+
+interface IComputeDonutDataParams {
+  name: string;
+  currentValue: number;
+  prevValue: number;
+  hasPreviousData: boolean;
+}
+interface IBuildBreakdownDonutDataParams<T extends string> {
+  targets: IDonutTarget<T>[];
+  metricKey: EMetricKey;
+  totalsRow?: IDonutMetricRow;
+  comparisonTotalsRow?: IDonutMetricRow;
+  sort?: boolean;
+}
+
+export const calculatePercentageChange = (current: number, previous: number): string | undefined => {
+  if (current === 0 && previous === 0) {
+    return undefined;
+  }
+  if (previous === 0) {
+    return current > 0 ? '100%' : '0%';
+  }
+  const change = ((current - previous) / previous) * 100;
+  return `${Math.abs(change).toFixed(0)}%`;
+};
+
+export const computeDonutData = ({
+  name,
+  currentValue,
+  prevValue,
+  hasPreviousData,
+}: IComputeDonutDataParams): IMetricDonutChartData => ({
+  name,
+  data: [{ key: 'value', value: currentValue }],
+  metadata: {
+    trend: {
+      value: hasPreviousData ? calculatePercentageChange(currentValue, prevValue) : undefined,
+      direction: currentValue >= prevValue ? 'upward' : 'downward',
+      trend: currentValue >= prevValue ? 'positive' : 'negative',
+    },
+  },
+});
+
+export const getTotalCountByType = (stats: IBreakdownItem[] | undefined, type: string): number => {
+  const item = stats?.find((stat) => stat?.type?.toLowerCase() === type.toLowerCase());
+  return item?.total ?? 0;
+};
+
+export const buildBreakdownDonutData = <T extends string>({
+  targets,
+  metricKey,
+  totalsRow,
+  comparisonTotalsRow,
+  sort,
+}: IBuildBreakdownDonutDataParams<T>): IMetricDonutChartData[] => {
+  const items = parseBreakdownItems<T>(totalsRow?.[metricKey]);
+  const comparisonItems = parseBreakdownItems<T>(comparisonTotalsRow?.[metricKey]);
+  const hasPreviousData = !!comparisonTotalsRow?.[metricKey];
+
+  const result = targets.map(({ value, label }) =>
+    computeDonutData({
+      name: label,
+      currentValue: getTotalCountByType(items, value),
+      prevValue: getTotalCountByType(comparisonItems, value),
+      hasPreviousData,
+    }),
+  );
+
+  const getValue = (item: IMetricDonutChartData): number => item.data[0]?.value ?? 0;
+  return sort ? [...result].sort((a, b) => getValue(b) - getValue(a)) : result;
+};

package/src/components/MetricDonutChartCard/utils/index.ts

@@ -0,0 +1 @@
+export * from './donut-chart';

package/src/components/OrderAnalytic/OrderListingLatestTable.tsx

@@ -0,0 +1,111 @@
+import type { IOrder } from './types';
+
+import { GBoxCard, GMockDataTooltip, GTextTooltip } from '@/shared';
+import { Box, Button, InlineStack } from '@shopify/polaris';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import OrderListingTable from './components/OrderListing/OrderListingTable';
+import { OrderListingTableEmpty } from './components/OrderListing/OrderListingTableEmpty';
+import { ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE } from './constants';
+import { EReportSource } from './types/report';
+
+interface IOrderListingLatestData {
+  orders: IOrder[];
+  isLoading: boolean;
+  totalFilteredOrders: number;
+  totalStoreOrders: number;
+}
+
+interface IOrderListingLatestCallbacks {
+  onViewAllOrders?: () => void;
+  onViewAllStoreOrders?: () => void;
+  onViewOrderJourney?: (orderId: string, gxId?: string) => void;
+  onViewOrderDetails?: (orderId: string) => void;
+}
+
+interface OrderListingLatestTableProps {
+  source: EReportSource;
+  data: IOrderListingLatestData;
+  callbacks?: IOrderListingLatestCallbacks;
+  isMockData?: boolean;
+}
+
+export const OrderListingLatestTable = ({ source, data, callbacks, isMockData }: OrderListingLatestTableProps) => {
+  const { orders, isLoading, totalFilteredOrders, totalStoreOrders } = data;
+  const { onViewAllOrders, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails } = callbacks ?? {};
+
+  const { t } = useTranslation();
+
+  const isEmpty = orders.length === 0;
+  const sourceText = source === EReportSource.CAMPAIGN ? 'experiment' : source;
+  const tooltipContent = getOrderSourceTooltipContent(source);
+
+  const fixedColumns = useMemo(() => {
+    if (source === EReportSource.PAGE) return ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE;
+
+    return ORDER_LISTING_COLUMNS;
+  }, [source]);
+
+  return (
+    <GBoxCard padding="0" overflowX="hidden">
+      <Box padding="400" borderStartStartRadius="400" borderStartEndRadius="400" background="bg-fill">
+        <InlineStack blockAlign="center" align="space-between">
+          <GTextTooltip
+            tooltipProps={tooltipContent ? { content: tooltipContent } : undefined}
+            as="p"
+            variant="headingMd"
+            fontWeight="semibold"
+          >
+            {t('Orders from {{source}}', { source: sourceText })}
+          </GTextTooltip>
+
+          {!isEmpty && (
+            <GMockDataTooltip isMockData={isMockData}>
+              <Button variant="secondary" disabled={isMockData} onClick={onViewAllOrders}>
+                {t('View {{source}} orders ({{totalOrders}})', {
+                  source: sourceText,
+                  totalOrders: totalFilteredOrders,
+                })}
+              </Button>
+            </GMockDataTooltip>
+          )}
+        </InlineStack>
+      </Box>
+
+      {isEmpty ? (
+        <OrderListingTableEmpty
+          title={t('No order yet')}
+          description={t('There are no orders from this {{source}} yet', { source })}
+        />
+      ) : (
+        <OrderListingTable
+          orders={orders}
+          isLoading={isLoading}
+          totalStoreOrders={totalStoreOrders}
+          isMockData={isMockData}
+          onViewAllStoreOrders={onViewAllStoreOrders}
+          onViewOrderJourney={onViewOrderJourney}
+          onViewOrderDetails={onViewOrderDetails}
+          tableOptions={{
+            hideSummary: true,
+            hidePaginationRow: true,
+            limitRowAmount: ORDER_LISTING_CONFIG.SHOW_LATEST_ORDER_LISTING_AMOUNT,
+            fixedColumns: fixedColumns.map((column) => column.name),
+            isLatestTable: true,
+          }}
+        />
+      )}
+    </GBoxCard>
+  );
+
+  function getOrderSourceTooltipContent(source: EReportSource) {
+    switch (source) {
+      case EReportSource.CAMPAIGN:
+        return t('Orders came from the pages being tested in this experiment');
+      case EReportSource.PAGE:
+        return t('Orders came from this pages');
+      default:
+        return '';
+    }
+  }
+};