feat: #876 add explicit time in force labels (#877)

* feat: #876 add explicit time in force labels

* fix: update GTC and GTT

* fix: update GTC and GTT

* fix: deal ticket test update

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

@@ -7,8 +7,8 @@ import { addDecimal } from '@vegaprotocol/react-helpers';
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import { DealTicket } from './deal-ticket';
 import type { DealTicketQuery_market } from './__generated__/DealTicketQuery';
-import type { Order } from '../utils/get-default-order';
 import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
+import type { Order } from '@vegaprotocol/orders';
 
 const market: DealTicketQuery_market = {
   __typename: 'Market',
@@ -59,7 +59,8 @@ function generateJsx(order?: Order) {
   );
 }
 
-it('Displays ticket defaults', () => {
+describe('DealTicket', () => {
+  it('Displays ticket defaults', () => {
     render(generateJsx());
 
     // Assert defaults are used
@@ -86,9 +87,9 @@ it('Displays ticket defaults', () => {
         market.tradableInstrument.instrument.product.quoteName
       }`
     );
-});
+  });
 
-it('Can edit deal ticket', async () => {
+  it('Can edit deal ticket', async () => {
     render(generateJsx());
 
     // BUY is selected by default
@@ -119,9 +120,9 @@ it('Can edit deal ticket', async () => {
     expect(screen.getByTestId('order-tif').children).toHaveLength(
       Object.keys(VegaWalletOrderTimeInForce).length
     );
-});
+  });
 
-it('Handles TIF select box dependent on order type', () => {
+  it('Handles TIF select box dependent on order type', () => {
     render(generateJsx());
 
     // Check only IOC and
@@ -129,7 +130,7 @@ it('Handles TIF select box dependent on order type', () => {
       Array.from(screen.getByTestId('order-tif').children).map(
         (o) => o.textContent
       )
-  ).toEqual(['IOC', 'FOK']);
+    ).toEqual(['Immediate or Cancel (IOC)', 'Fill or Kill (FOK)']);
 
     // Switch to limit order and check all TIF options shown
     fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
@@ -164,4 +165,5 @@ it('Handles TIF select box dependent on order type', () => {
     expect(screen.getByTestId('order-tif')).toHaveValue(
       VegaWalletOrderTimeInForce.FOK
     );
+  });
 });

libs/deal-ticket/src/components/time-in-force-selector.tsx

@@ -11,6 +11,26 @@ interface TimeInForceSelectorProps {
   onSelect: (tif: VegaWalletOrderTimeInForce) => void;
 }
 
+// More detail in https://docs.vega.xyz/docs/mainnet/graphql/enums/order-time-in-force
+export const timeInForceLabel = (tif: string) => {
+  switch (tif) {
+    case VegaWalletOrderTimeInForce.GTC:
+      return t(`Good 'til Cancelled`);
+    case VegaWalletOrderTimeInForce.IOC:
+      return t('Immediate or Cancel');
+    case VegaWalletOrderTimeInForce.FOK:
+      return t('Fill or Kill');
+    case VegaWalletOrderTimeInForce.GTT:
+      return t(`Good 'til Time`);
+    case VegaWalletOrderTimeInForce.GFN:
+      return t('Good for Normal');
+    case VegaWalletOrderTimeInForce.GFA:
+      return t('Good for Auction');
+    default:
+      return t(tif);
+  }
+};
+
 export const TimeInForceSelector = ({
   value,
   orderType,
@@ -37,7 +57,7 @@ export const TimeInForceSelector = ({
         {options.map(([key, value]) => {
           return (
             <option key={key} value={value}>
-              {key}
+              {`${timeInForceLabel(value)} (${key})`}
             </option>
           );
         })}