fix(deal-ticket): show expiresAt field value from state only, add required validation (#4626)

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx

@@ -1,7 +1,12 @@
 import { useRef, useCallback, useEffect } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { StopOrdersSubmission } from '@vegaprotocol/wallet';
-import { removeDecimal, toDecimal, validateAmount } from '@vegaprotocol/utils';
+import {
+  formatForInput,
+  removeDecimal,
+  toDecimal,
+  validateAmount,
+} from '@vegaprotocol/utils';
 import type { Control, UseFormWatch } from 'react-hook-form';
 import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
@@ -60,6 +65,7 @@ const getDefaultValues = (
   expire: false,
   expiryStrategy: Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT,
   size: '0',
+  oco: false,
   ocoType: type,
   ocoTimeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
   ocoTriggerType: 'price',
@@ -522,6 +528,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const rawPrice = watch('price');
   const rawSize = watch('size');
   const oco = watch('oco');
+  const expiresAt = watch('expiresAt');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -719,7 +726,17 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
             const { onChange: onCheckedChange, value } = field;
             return (
               <Checkbox
-                onCheckedChange={onCheckedChange}
+                onCheckedChange={(value) => {
+                  if (
+                    value &&
+                    (!expiresAt || new Date(expiresAt).getTime() < Date.now())
+                  ) {
+                    setValue('expiresAt', formatForInput(new Date()), {
+                      shouldValidate: true,
+                    });
+                  }
+                  onCheckedChange(value);
+                }}
                 checked={value}
                 name="expire"
                 label={t('Expire')}
@@ -767,6 +784,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               name="expiresAt"
               control={control}
               rules={{
+                required: t('You need provide a expiry time/date'),
                 validate: validateExpiration,
               }}
               render={({ field }) => {

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -34,6 +34,7 @@ import {
   removeDecimal,
   validateAmount,
   toDecimal,
+  formatForInput,
 } from '@vegaprotocol/utils';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { getDerivedPrice } from '@vegaprotocol/markets';
@@ -174,6 +175,7 @@ export const DealTicket = ({
   const rawPrice = watch('price');
   const iceberg = watch('iceberg');
   const peakSize = watch('peakSize');
+  const expiresAt = watch('expiresAt');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -465,7 +467,17 @@ export const DealTicket = ({
           <TimeInForceSelector
             value={field.value}
             orderType={type}
-            onSelect={field.onChange}
+            onSelect={(value) => {
+              if (
+                value === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT &&
+                (!expiresAt || new Date(expiresAt).getTime() < Date.now())
+              ) {
+                setValue('expiresAt', formatForInput(new Date()), {
+                  shouldValidate: true,
+                });
+              }
+              field.onChange(value);
+            }}
             market={market}
             marketData={marketData}
             errorMessage={errors.timeInForce?.message}
@@ -478,6 +490,7 @@ export const DealTicket = ({
             name="expiresAt"
             control={control}
             rules={{
+              required: t('You need provide a expiry time/date'),
               validate: validateExpiration,
             }}
             render={({ field }) => (

libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx

@@ -18,10 +18,6 @@ export const ExpirySelector = ({
   onSelect,
   errorMessage,
 }: ExpirySelectorProps) => {
-  const now = useRef(new Date());
-  const date = value ? new Date(value) : now.current;
-  const dateFormatted = formatForInput(date);
-  const minDate = formatForInput(date);
   return (
     <div className="mb-4">
       <TradingFormGroup
@@ -33,9 +29,9 @@ export const ExpirySelector = ({
           data-testid="date-picker-field"
           id="expiration"
           type="datetime-local"
-          value={dateFormatted}
+          value={value && formatForInput(new Date(value))}
           onChange={(e) => onSelect(e.target.value)}
-          min={minDate}
+          min={formatForInput(useRef(new Date()).current)}
           hasError={!!errorMessage}
         />
         {errorMessage && (