diff --git a/ditto/base.json b/ditto/base.json index 9813d35c0..4bca33a84 100644 --- a/ditto/base.json +++ b/ditto/base.json @@ -1,5 +1,4 @@ { - "text_6335e8900c69f8ebdfef5318": "Subscription date", "text_642a94e522316cd9e1875224": "Subscription external ID (optional)", "text_642ac1d1407baafb9e4390ee": "Type a subscription external id", "text_642ac28c65c2180085afe31a": "ID used to define your own subscription ID from your backend instead of using the one defined by Lago", @@ -82,11 +81,6 @@ "text_62bb10ad2a10bd182d00202d": "Invoice", "text_62bdbf07117c3d1f178d6517": "See more", "text_62bb10ad2a10bd182d002077": "Invoice template information saved", - "text_648b1765864e4aac3180c431": "12:00 AM", - "text_648b1828ead1c3004b930334": "Subscription date (based on UTC ±0)", - "text_648b1837da6496008dfe4b3c": "Time", - "text_648b18d3ffc4a80093c17058": "Time is invalid", - "text_648b280da2ff5a00723b6b88": "This means {{date}} at {{time}} UTC {{offset}} for your customer", "text_6227a2e847fcd700e9038952": "API key copied to clipboard", "text_62ce85fb3fb6842020331d83": "Find all the events this webhook is listening", "text_62728ff857d47b013204c726": "Settings", @@ -321,7 +315,7 @@ "text_624efab67eb2570101d117e0": "Refresh the page", "text_6250304370f0f700a8fdc27d": "Details", "text_6250304370f0f700a8fdc283": "External ID", - "text_6250304370f0f700a8fdc28b": "Add a plan", + "text_6250304370f0f700a8fdc28b": "Assign a plan", "text_6250304370f0f700a8fdc28d": "Subscriptions", "text_6250304370f0f700a8fdc28f": "No plan linked to this customer, add a Plan to this customer to start a Subscription.", "text_6250304370f0f700a8fdc291": "Invoices", @@ -1616,6 +1610,14 @@ "text_634812d6f16b31ce5cbf4126": "Something went wrong", "text_634812d6f16b31ce5cbf4128": "Please refresh the page or contact us if the error persists.", "text_634812d6f16b31ce5cbf412a": "Refresh the page", + "text_64ef55a730b88e3d2117b3c4": "Start date in UTC±0", + "text_64ef55a730b88e3d2117b3cc": "End date in UTC±0 (optional)", + "text_64ef55a730b88e3d2117b3d4": "End date can’t be in the past and should be greater than start date", + "text_64ef55a730b88e3d2117b44e": "{{planName}} will be terminated on {{date}}", + "text_64ef81071c6da2010dd24b1d": "The subscription started on {{date}} at {{time}} UTC {{offset}} for your customer.", + "text_64ef8cc7c83f5d006131a488": "The subscription will start on {{date}} at {{time}} UTC {{offset}} for your customer.", + "text_64ef81071c6da2010dd24b1e": "It won’t end until you manually terminate it.", + "text_64ef81071c6da2010dd24b1f": "It will end on {{date}} at {{time}} UTC {{offset}}.", "text_63eba8c65a6c8043feee2a01": "Update payment status", "text_63eba8c65a6c8043feee2a02": "Invoice payment status successfully updated", "text_63eba8c65a6c8043feee2a0d": "Update payment status", diff --git a/ditto/config.yml b/ditto/config.yml index 54263cc47..996270b07 100644 --- a/ditto/config.yml +++ b/ditto/config.yml @@ -297,5 +297,7 @@ sources: id: 65018c8af04a866c7bcc6cb8 - name: 👍 [Ready for dev] - Billable metrics - Weighted sum id: 6500621fbbf7ebe75d11e890 + - name: 👍 [Ready for dev] - Customers - Add subscription end date + id: 64ef55a23bdcf2d86567cbed format: flat variants: true diff --git a/ditto/index.js b/ditto/index.js index 40d9fd5b7..ab43ea457 100644 --- a/ditto/index.js +++ b/ditto/index.js @@ -41,6 +41,9 @@ module.exports = { "project_63eba8199c936977d8e98991": { "base": require('./-ready-for-dev---customer-invoice---update-invoice.payment_status__base.json') }, + "project_64ef55a23bdcf2d86567cbed": { + "base": require('./-ready-for-dev---customers---add-subscription-end-date__base.json') + }, "project_634687058efb4a10996fdbdc": { "base": require('./-ready-for-dev---customers---invoice-detail-page__base.json') }, diff --git a/src/components/customers/subscriptions/AddSubscriptionDrawer.tsx b/src/components/customers/subscriptions/AddSubscriptionDrawer.tsx index d27391a6b..64a1ad798 100644 --- a/src/components/customers/subscriptions/AddSubscriptionDrawer.tsx +++ b/src/components/customers/subscriptions/AddSubscriptionDrawer.tsx @@ -1,11 +1,11 @@ import { useFormik } from 'formik' import { DateTime } from 'luxon' -import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react' +import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react' import { useNavigate } from 'react-router-dom' import styled from 'styled-components' import { object, string } from 'yup' -import { Alert, Button, Drawer, DrawerRef, Typography } from '~/components/designSystem' +import { Alert, Button, Drawer, DrawerRef, Icon, Typography } from '~/components/designSystem' import { ButtonSelectorField, ComboBoxField, @@ -13,15 +13,15 @@ import { TextInput, TextInputField, } from '~/components/form' -import { TimePickerField } from '~/components/form/TimePicker' import { overwritePlanVar, resetOverwritePlanVar, SubscriptionUpdateInfo, updateOverwritePlanVar, } from '~/core/apolloClient' +import { dateErrorCodes } from '~/core/constants/form' import { CREATE_PLAN_ROUTE } from '~/core/router' -import { getTimezoneConfig, TimeZonesConfig } from '~/core/timezone' +import { getTimezoneConfig } from '~/core/timezone' import { BillingTimeEnum, CreateSubscriptionInput, @@ -35,6 +35,8 @@ import { useAddSubscription } from '~/hooks/customer/useAddSubscription' import { useOrganizationInfos } from '~/hooks/useOrganizationInfos' import { Card, DrawerContent, DrawerSubmitButton, DrawerTitle, theme } from '~/styles' +import { SubscriptionDatesOffsetHelperComponent } from './SubscriptionDatesOffsetHelperComponent' + export interface AddSubscriptionDrawerRef { openDialog: (existingSubscription?: SubscriptionUpdateInfo) => unknown closeDialog: () => unknown @@ -52,14 +54,9 @@ export const AddSubscriptionDrawer = forwardRef< >(({ customerId, customerName, customerTimezone }: AddSubscriptionDrawerProps, ref) => { const navigate = useNavigate() const drawerRef = useRef(null) - const { - timezone: organizationTimezone, - timezoneConfig: orgaTimezoneConfig, - formatTimeOrgaTZ, - } = useOrganizationInfos() - const customerTimezoneConfig = getTimezoneConfig(customerTimezone) + const { formatTimeOrgaTZ } = useOrganizationInfos() const GMT = getTimezoneConfig(TimezoneEnum.TzUtc).name - const currentDateRef = useRef(DateTime.now().setZone(GMT).toISO()) + const currentDateRef = useRef(DateTime.now().setZone(GMT).startOf('day').toISO()) const [existingSubscription, setExistingSubscription] = useState< SubscriptionUpdateInfo | undefined @@ -71,12 +68,47 @@ export const AddSubscriptionDrawer = forwardRef< planId: undefined, name: '', externalId: '', - subscriptionAt: currentDateRef?.current, + subscriptionAt: existingSubscription?.startDate || currentDateRef?.current, + endingAt: existingSubscription?.endDate || undefined, billingTime: BillingTimeEnum.Calendar, }, validationSchema: object().shape({ planId: string().required(''), subscriptionAt: string().required(''), + endingAt: string() + .test({ + test: function (value, { from, path }) { + // Value can be undefined + if (!value) { + return true + } + + // Make sure value has correct format + if (!DateTime.fromISO(value).isValid) { + return this.createError({ + path, + message: dateErrorCodes.wrongFormat, + }) + } + + // If subscription at is present + if (from && from[0] && from[0].value && from[0].value.subscriptionAt) { + const subscriptionAt = DateTime.fromISO(from[0].value.subscriptionAt) + const endingAt = DateTime.fromISO(value) + + // Make sure endingAt is set later than subscriptionAt and in the future + if (endingAt <= subscriptionAt || DateTime.now().diff(endingAt, 'days').days >= 0) { + return this.createError({ + path, + message: dateErrorCodes.shouldBeFutureAndBiggerThanSubscriptionAt, + }) + } + } + + return true + }, + }) + .nullable(), }), validateOnMount: true, enableReinitialize: true, @@ -121,10 +153,11 @@ export const AddSubscriptionDrawer = forwardRef< const { subscriptionInput, updateInfo } = overwritePlanVar() if (!!subscriptionInput) { - const { planId, name, billingTime, subscriptionAt } = subscriptionInput + const { planId, name, billingTime, subscriptionAt, endingAt } = subscriptionInput formikProps.setValues({ subscriptionAt: subscriptionAt || currentDateRef?.current, + endingAt: endingAt || undefined, planId: planId || '', name: name || undefined, billingTime: billingTime || BillingTimeEnum.Calendar, @@ -143,57 +176,6 @@ export const AddSubscriptionDrawer = forwardRef< // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - const subscriptionAtHelperText = useMemo(() => { - if ( - !formikProps.values.subscriptionAt || - (customerTimezoneConfig?.offsetInMinute === 0 && orgaTimezoneConfig.offsetInMinute === 0) - ) - return undefined - - if (formikProps.values.subscriptionAt) { - if (!!customerTimezone) { - const date = DateTime.fromISO(formikProps.values.subscriptionAt) - .setZone(customerTimezoneConfig.name) - .toFormat('LLL. dd, yyyy') - const time = `${DateTime.fromISO(formikProps.values.subscriptionAt) - .setZone(customerTimezoneConfig.name) - .setLocale('en') - .toFormat('t')}` - const offset = TimeZonesConfig[customerTimezone].offset - - if (customerTimezoneConfig?.offsetInMinute < 0) { - return translate('text_648b280da2ff5a00723b6b88', { date, time, offset }) - } else if (customerTimezoneConfig?.offsetInMinute > 0) { - return translate('text_648b280da2ff5a00723b6b88', { date, time, offset }) - } - } else if (!!organizationTimezone) { - const date = DateTime.fromISO(formikProps.values.subscriptionAt) - .setZone(orgaTimezoneConfig.name) - .toFormat('LLL. dd, yyyy') - const time = `${DateTime.fromISO(formikProps.values.subscriptionAt) - .setZone(orgaTimezoneConfig.name) - .setLocale('en') - .toFormat('t')}` - const offset = TimeZonesConfig[organizationTimezone].offset - - if (orgaTimezoneConfig.offsetInMinute < 0) { - return translate('text_648b280da2ff5a00723b6b88', { date, time, offset }) - } else if (orgaTimezoneConfig.offsetInMinute > 0) { - return translate('text_648b280da2ff5a00723b6b88', { date, time, offset }) - } - } - } - - return undefined - }, [ - organizationTimezone, - customerTimezone, - customerTimezoneConfig, - formikProps.values.subscriptionAt, - orgaTimezoneConfig, - translate, - ]) - return ( {!existingSubscription && ( - <> -
- - - - - {!!subscriptionAtHelperText && ( - - {subscriptionAtHelperText} - - )} -
- + )} + +
+ + - - )} + + + + + {!formikProps.errors.endingAt && !formikProps.errors.subscriptionAt && ( + + )} +
)} @@ -410,17 +408,17 @@ const InlineFields = styled.div` display: flex; gap: ${theme.spacing(3)}; - > *:first-child { - flex: 1; - } - + > *:first-child, > *:last-child { flex: 1; - max-width: 192px; } ` -const InlineFieldsHelperText = styled(Typography)` +const InlineFieldsIcon = styled(Icon)` + margin-top: ${theme.spacing(10)}; +` + +const LocalSubscriptionDatesOffsetHelperComponent = styled(SubscriptionDatesOffsetHelperComponent)` margin-top: ${theme.spacing(1)}; ` diff --git a/src/components/customers/subscriptions/EditCustomerSubscriptionDrawer.tsx b/src/components/customers/subscriptions/EditCustomerSubscriptionDrawer.tsx index 528e744a6..07c754795 100644 --- a/src/components/customers/subscriptions/EditCustomerSubscriptionDrawer.tsx +++ b/src/components/customers/subscriptions/EditCustomerSubscriptionDrawer.tsx @@ -1,17 +1,24 @@ import { gql } from '@apollo/client' import { useFormik } from 'formik' +import { DateTime } from 'luxon' import { forwardRef, useImperativeHandle, useRef, useState } from 'react' +import styled from 'styled-components' +import { object, string } from 'yup' -import { Button, Drawer, DrawerRef, Typography } from '~/components/designSystem' +import { Button, Drawer, DrawerRef, Icon, Typography } from '~/components/designSystem' import { DatePickerField, TextInput, TextInputField } from '~/components/form' import { addToast } from '~/core/apolloClient' +import { dateErrorCodes } from '~/core/constants/form' import { StatusTypeEnum, + TimezoneEnum, UpdateSubscriptionInput, useUpdateCustomerSubscriptionMutation, } from '~/generated/graphql' import { useInternationalization } from '~/hooks/core/useInternationalization' -import { Card, DrawerContent, DrawerSubmitButton, DrawerTitle } from '~/styles' +import { Card, DrawerContent, DrawerSubmitButton, DrawerTitle, theme } from '~/styles' + +import { SubscriptionDatesOffsetHelperComponent } from './SubscriptionDatesOffsetHelperComponent' gql` mutation updateCustomerSubscription($input: UpdateSubscriptionInput!) { @@ -21,6 +28,7 @@ gql` status startedAt subscriptionAt + endingAt } } ` @@ -30,7 +38,9 @@ type SubscriptionInfos = { name?: string | null externalId?: string | null startDate: string + endDate?: string status?: StatusTypeEnum + customerTimezone?: TimezoneEnum | null } export interface EditCustomerSubscriptionDrawerRef { @@ -53,18 +63,59 @@ export const EditCustomerSubscriptionDrawer = forwardRef(undefined) const { translate } = useInternationalization() - const formikProps = useFormik>({ + const formikProps = useFormik< + Pick + >({ initialValues: { name: subscription?.name || '', subscriptionAt: subscription?.startDate || undefined, + endingAt: subscription?.endDate || undefined, }, validateOnMount: true, enableReinitialize: true, + validationSchema: object().shape({ + subscriptionAt: string().required(''), + endingAt: string() + .test({ + test: function (value, { from, path }) { + // Value can be undefined + if (!value) { + return true + } + + // Make sure value has correct format + if (!DateTime.fromISO(value).isValid) { + return this.createError({ + path, + message: dateErrorCodes.wrongFormat, + }) + } + + // Make sure endingAt is set later than subscriptionAt + if (from && from[0] && from[0].value && from[0].value.subscriptionAt) { + const subscriptionAt = DateTime.fromISO(from[0].value.subscriptionAt) + const endingAt = DateTime.fromISO(value) + + if (endingAt <= subscriptionAt) { + return this.createError({ + path, + message: dateErrorCodes.shouldBeFutureAndBiggerThanSubscriptionAt, + }) + } + } + + return true + }, + }) + .nullable(), + }), + onSubmit: async (values) => { await update({ variables: { input: { id: subscription?.id as string, + endingAt: !!values.endingAt ? values.endingAt : null, // Null is used to reset field value ...values, }, }, @@ -90,12 +141,6 @@ export const EditCustomerSubscriptionDrawer = forwardRef {translate('text_6335e8900c69f8ebdfef5312')} - {!!subscription?.externalId && ( )} - + +
+ + + + + + {!formikProps.errors.endingAt && !formikProps.errors.subscriptionAt && ( + + )} +
@@ -135,3 +213,21 @@ export const EditCustomerSubscriptionDrawer = forwardRef *:first-child, + > *:last-child { + flex: 1; + } +` + +const InlineFieldsIcon = styled(Icon)` + margin-top: ${theme.spacing(10)}; +` + +const LocalSubscriptionDatesOffsetHelperComponent = styled(SubscriptionDatesOffsetHelperComponent)` + margin-top: ${theme.spacing(1)}; +` diff --git a/src/components/customers/subscriptions/SubscriptionDatesOffsetHelperComponent.tsx b/src/components/customers/subscriptions/SubscriptionDatesOffsetHelperComponent.tsx new file mode 100644 index 000000000..fd95dd74d --- /dev/null +++ b/src/components/customers/subscriptions/SubscriptionDatesOffsetHelperComponent.tsx @@ -0,0 +1,93 @@ +import { DateTime } from 'luxon' +import { useCallback } from 'react' + +import { Typography } from '~/components/designSystem' +import { getTimezoneConfig, TimeZonesConfig } from '~/core/timezone' +import { TimezoneEnum } from '~/generated/graphql' +import { useInternationalization } from '~/hooks/core/useInternationalization' +import { useOrganizationInfos } from '~/hooks/useOrganizationInfos' + +export interface SubscriptionDatesOffsetHelperComponentProps { + customerTimezone?: TimezoneEnum | null + subscriptionAt?: string + endingAt?: string +} + +export const SubscriptionDatesOffsetHelperComponent = ({ + customerTimezone, + subscriptionAt, + endingAt, + ...props +}: SubscriptionDatesOffsetHelperComponentProps) => { + const { translate } = useInternationalization() + const { timezone: organizationTimezone, timezoneConfig: orgaTimezoneConfig } = + useOrganizationInfos() + const customerTimezoneConfig = customerTimezone ? getTimezoneConfig(customerTimezone) : undefined + + // subscriptionAt helper text + const subscriptionAtHelperText = useCallback((): string | undefined => { + if (!subscriptionAt) return undefined + + const date = DateTime.fromISO(subscriptionAt) + .setZone(customerTimezoneConfig?.name || orgaTimezoneConfig.name) + .toFormat('LLL. dd, yyyy') + const time = `${DateTime.fromISO(subscriptionAt) + .setZone(customerTimezoneConfig?.name || orgaTimezoneConfig.name) + .setLocale('en') + .toFormat('t')}` + const offset = TimeZonesConfig[customerTimezone || organizationTimezone].offset + + // If date is in the future + if (DateTime.fromISO(subscriptionAt).diff(DateTime.now().startOf('day'), 'days').days > 0) { + return translate('text_64ef8cc7c83f5d006131a488', { date, time, offset }) + } + + // If date is in the past + return translate('text_64ef81071c6da2010dd24b1d', { date, time, offset }) + }, [ + customerTimezone, + customerTimezoneConfig?.name, + orgaTimezoneConfig.name, + organizationTimezone, + subscriptionAt, + translate, + ]) + + // endingAt helper text + const endingAtHelperText = useCallback((): string => { + if (!endingAt) return translate('text_64ef81071c6da2010dd24b1e') + + const date = DateTime.fromISO(endingAt) + .setZone(customerTimezoneConfig?.name || orgaTimezoneConfig.name) + .toFormat('LLL. dd, yyyy') + const time = `${DateTime.fromISO(endingAt) + .setZone(customerTimezoneConfig?.name || orgaTimezoneConfig.name) + .setLocale('en') + .toFormat('t')}` + const offset = TimeZonesConfig[customerTimezone || organizationTimezone].offset + + return translate('text_64ef81071c6da2010dd24b1f', { date, time, offset }) + }, [ + customerTimezone, + customerTimezoneConfig?.name, + endingAt, + orgaTimezoneConfig.name, + organizationTimezone, + translate, + ]) + + // If no offset or no date, don't return any text + if (!subscriptionAt) return null + + return ( + + {/* Spaces here are important */} + {`${!!subscriptionAt ? `${subscriptionAtHelperText()} ` : ''}${endingAtHelperText()}`} + + ) +} diff --git a/src/components/customers/subscriptions/SubscriptionItem.tsx b/src/components/customers/subscriptions/SubscriptionItem.tsx index 3d211c686..37be953f6 100644 --- a/src/components/customers/subscriptions/SubscriptionItem.tsx +++ b/src/components/customers/subscriptions/SubscriptionItem.tsx @@ -29,6 +29,7 @@ gql` externalId periodEndDate subscriptionAt + endingAt plan { ...SubscriptionLinePlan } @@ -69,6 +70,7 @@ export const SubscriptionItem = forwardRef - {isDowngrading && !!nextPlan && ( + {isDowngrading && ( - {isDowngrading && !!nextPlan && ( + {isDowngrading ? ( {translate('text_62681c60582e4f00aa82938a', { planName: nextPlan?.name, @@ -111,15 +114,21 @@ export const SubscriptionItem = forwardRef - )} - {status === StatusTypeEnum.Pending && ( + ) : status === StatusTypeEnum.Pending ? ( {translate('text_6335e50b0b089e1d8ed50960', { planName: plan?.name, startDate: formatTimeOrgaTZ(subscriptionAt), })} - )} + ) : status === StatusTypeEnum.Active && !!endingAt ? ( + + {translate('text_64ef55a730b88e3d2117b44e', { + planName: plan?.name, + date: formatTimeOrgaTZ(endingAt), + })} + + ) : null} ) } diff --git a/src/components/customers/subscriptions/SubscriptionLine.tsx b/src/components/customers/subscriptions/SubscriptionLine.tsx index 03f3819cf..67be7ee13 100644 --- a/src/components/customers/subscriptions/SubscriptionLine.tsx +++ b/src/components/customers/subscriptions/SubscriptionLine.tsx @@ -37,6 +37,7 @@ interface SubscriptionLineProps { subscriptionExternalId: string subscriptionName?: string | null date: string + endDate?: string plan: SubscriptionLinePlanFragment periodEndDate: string isDowngrade?: boolean @@ -57,6 +58,7 @@ export const SubscriptionLine = forwardRef useInternationalization()) + + const mocks = [ + { + request: { + query: GetOrganizationInfosDocument, + }, + result: { + data: { + organization: { + id: '1234', + name: 'Organization Name', + timezone: organizationTimezone || TimezoneEnum.TzUtc, + }, + }, + }, + }, + ] + + await act(() => + render( + , + { + mocks, + } + ) + ) + + return { translate: result.current.translate } +} + +describe('SubscriptionDatesOffsetHelperComponent', () => { + afterEach(cleanup) + + it('renders', async () => { + await prepare() + + expect(screen.getByTestId(DATA_TEST_ID)).toBeInTheDocument() + }) + + // describe('with Organization in UTC', () => { + // describe('with only subscriptionAt', () => { + // it('should should display text for current date', async () => { + // const { translate } = await prepare({ + // organizationTimezone: TimezoneEnum.TzUtc, + // subscriptionAt: DEFAULT_SUBSCRIPTION_AT_NOW, + // }) + + // expect(screen.getByTestId(DATA_TEST_ID)).toHaveTextContent( + // 'The subscription will start on Aug. 31, 2023 at 3:29 PM UTC ±0:00 for your customer. It won’t end until you manually terminate it.' + // ) + // }) + // it('should should display text for future date', async () => {}) + // it('should should display text for past date', async () => {}) + // }) + // describe('with only endingAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with both subscriptionAt and endingAt', () => { + // it('should should display text', async () => {}) + // }) + + // describe('with Customer in positive UTC', () => { + // describe('with only subscriptionAt', () => { + // it('should should display text for current date', async () => {}) + // it('should should display text for future date', async () => {}) + // it('should should display text for past date', async () => {}) + // }) + // describe('with only endingAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with both subscriptionAt and endingAt', () => { + // it('should should display text', async () => {}) + // }) + // }) + + // describe('with Customer in negative UTC', () => { + // describe('with only subscriptionAt', () => { + // it('should should display text for current date', async () => {}) + // it('should should display text for future date', async () => {}) + // it('should should display text for past date', async () => {}) + // }) + // describe('with only endingAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with both subscriptionAt and endingAt', () => { + // it('should should display text', async () => {}) + // }) + // }) + // }) + + // describe('with Customer in UTC', () => { + // describe('with only subscriptionAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with only endingAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with both subscriptionAt and endingAt', () => { + // it('should should display text', async () => {}) + // }) + + // describe('with Organization in positive UTC', () => { + // describe('with only subscriptionAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with only endingAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with both subscriptionAt and endingAt', () => { + // it('should should display text', async () => {}) + // }) + // }) + + // describe('with Organization in negative UTC', () => { + // describe('with only subscriptionAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with only endingAt', () => { + // it('should should display text', async () => {}) + // }) + // describe('with both subscriptionAt and endingAt', () => { + // it('should should display text', async () => {}) + // }) + // }) + // }) +}) diff --git a/src/components/form/DatePicker/DatePicker.tsx b/src/components/form/DatePicker/DatePicker.tsx index 47ee72e86..4882bc849 100644 --- a/src/components/form/DatePicker/DatePicker.tsx +++ b/src/components/form/DatePicker/DatePicker.tsx @@ -1,5 +1,5 @@ import { gql } from '@apollo/client' -import { PopperProps as MuiPopperProps } from '@mui/material' +import { InputAdornment, PopperProps as MuiPopperProps } from '@mui/material' import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon' import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker' import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider' @@ -55,7 +55,7 @@ export const DatePicker = ({ disableFuture, disablePast, placeholder, - disabled, + disabled = false, placement = 'bottom-end', onError, onChange, @@ -157,20 +157,32 @@ export const DatePicker = ({ disabled={disabled} InputProps={{ endAdornment: ( - - - + + {!!props?.inputProps?.cleanable && !!localDate && !disabled && ( +