Likhith | Akmal / Vanilla options feature (binary-com#7033)

* Initial commit

* added mobile view

* feat: ✨ added info hints and mobile view

* feat: ➕ displays vanilla options under trade types

* feat: 🚧 incorporated mobile view

* feat: 💄 added icons

* feat: 💄 incorporated new UI changes

* feat: 💄 added required styling

* feat: 🎨 incorporated the changes for report section (#34)

* feat: ✨ description changes

* feat: ✨ incorporated strike field changes

* feat: 🎨 fixed the title for mobile view stake field

* feat: ✨ incorporated mobile view

* feat: 🔥 removed master changes

* feat: 🎨 incorporated payout button change

* feat: purchase button text css

* feat: ✨ disabled barrier drag for vanilla

* fix: 🐛 strike field design fix

* feat: 💄 incorporated info hint message for Payout button

* fix: 🐛 title change

* fix: 🐛 payout per point value fix

* feat: ✨ incorporated barrier validation condition for vanilla

* feat: ✨ computing min-max stake values

* refactor: ♻️ incorporated review comments

* feat: add vanilla contract card for desktop

* feat: add vanilla contract card for contract details

* feat: change label to strike for vanilla contracts in contract details

* feat: use bid price for contract value

* feat: add vanilla option card for recent positions

* feat: ✨ incorporated condition to show contract audit

* feat: ✨ incorporated strike and Payout per point values in open position

* feat: ✨ incorporated chart floating message change for vanilla trade

* fix: enable collapsible button for vanilla contracts

* feat: 🎨 incorporated chart long code message for vanilla

* feat: ⚡ incorporated contract card for mobile

* feat: ✨ incorporated chart markers for mobile and desktop

* feat: ✨ incorporated currency unit for Payout per point

* feat: 🎨 color refactor

* feat: add responsive vanilla options card

* fix: strike formatting

* feat: add vanilla trade types component

* feat: implement new design for vanilla trade types

* fix: sort ui store

* fix: sort trade store

* fix: UI changes for vanilla option trade params

* feat: new design for trade parameters on mobile

* fix: remove unused variable

* fix: strike spot area

* feat: change design for vanilla option open positions for mobile

* fix: refactor code

* fix: merge issue

* feat: ♻️ incorporated review comments

* fix: review comments

* refactor: ♻️ incorporated review comments

* refactor: ♻️ incorporated view port sizes

* fix: remove comments

* fix: unlocalized strings

* fix: populate barrier options on error response

* fix: 🐛 report title fix

* fix: daily VO contracts to show in recent positions

* fix: update to latest content

* fix: content issues

* feat: add sorting logic for trade types

* fix: 🐛 resolved input validation failed error

* fix: incorrect label for vanilla calls

* fix: the icon is incorrect for some of the trades

* fix: 🐛 strike price is empty when there is duration change

* fix: 🐛 strike price dropdown is empty for day duration change

* fix: 🐛 modified stake boundary calculation for vanilla opts

* fix: callout not showing in contract details

* fix: 🐛 removed unused code snip

* fix: 🐛 capture stake boundary on error

* fix: merge conflicts

* fix: 🐛 ensuring correct boundary is set based on type of Vanilla contract

* fix: 🐛 set strike vlaue and list on error response

* fix: remove currency based rounding for usd amounts

* fix: payout rounding value

* fix: format numbers based on currency in p&l callout

* fix: change colors for vanilla closed contracts

* fix: 🐛 call proposal API on strike change

* feat: changed vanilla trade description

* feat: content change

* fix: 🐛 added missing label

* fix: align profit label only when it appears on the screen

* fix: 🐛 corrected field name

* fix: 🐛 refactored code to support additional configs

* fix: change icon colors in dark mode

* fix: 🐛 incorporated + sign in reports

* fix: 🐛 resolved issue with double error message

* fix: exit spot placement on y-axis

* feat: modified the content as per figma

* fix: tooltip alignment for strike description

* fix: size units

* feat: change content everywhere according to latest design

* feat: 🎨 added tooltip for stake

* feat: incorporated styles to stake tooltip

* fix: 🐛 fixed the type issue

* chore: ♻️ incorporated naming conventions

* feat: change paddings and profit/loss label positioning in mobile

* feat: content update as per figma

* fix: incorrect profit logic for prematurely sold contracts

* feat: change mobile modal to tooltip

* feat: 💄 set the layout for vanilla trade

---------

Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>

packages/components/src/components/collapsible/collapsible.scss

@@ -73,7 +73,15 @@
         margin-left: 0;
         margin-right: auto;
     }
-    //&__content {
-    //    transition: all 0.3s ease;
-    //}
+    // Vanilla Options specific styles
+    .trade-container {
+        &__fieldset {
+            flex: 1;
+            margin-left: 0.4rem;
+
+            .dc-button-menu__wrapper {
+                height: 4rem;
+            }
+        }
+    }
 }

packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx

@@ -8,7 +8,6 @@ import {
     getLimitOrderAmount,
     getCurrentTick,
     getDisplayStatus,
-    getTotalProfit,
     isValidToCancel,
     isValidToSell,
     shouldShowCancellation,
@@ -23,6 +22,101 @@ import Money from '../../money';
 import { ResultStatusIcon } from '../result-overlay/result-overlay.jsx';
 import ProgressSliderMobile from '../../progress-slider-mobile';
 
+const VanillaOptionsCardBody = ({ contract_info, currency, getCardLabels, is_sold, progress_slider, status }) => {
+    const { buy_price, bid_price, entry_spot_display_value, barrier, sell_price, profit } = contract_info;
+    const contract_value = is_sold ? sell_price : bid_price;
+
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <div className='dc-contract-card-items-wrapper'>
+                    <ContractCardItem header={getCardLabels().PURCHASE_PRICE}>
+                        <Money amount={buy_price} currency={currency} />
+                    </ContractCardItem>
+
+                    <ContractCardItem header={getCardLabels().CONTRACT_VALUE}>
+                        <Money amount={contract_value} currency={currency} />
+                    </ContractCardItem>
+
+                    <ContractCardItem header={getCardLabels().ENTRY_SPOT}>
+                        <Money amount={entry_spot_display_value} />
+                    </ContractCardItem>
+
+                    <ContractCardItem header={getCardLabels().STRIKE}>
+                        <Money amount={barrier} />
+                    </ContractCardItem>
+                </div>
+                <ContractCardItem
+                    className='dc-contract-card-item__total-profit-loss'
+                    header={getCardLabels().TOTAL_PROFIT_LOSS}
+                    is_crypto={isCryptocurrency(currency)}
+                    is_loss={+profit < 0}
+                    is_won={+profit > 0}
+                >
+                    <Money amount={profit} currency={currency} />
+                    <div
+                        className={classNames('dc-contract-card__indicative--movement', {
+                            'dc-contract-card__indicative--movement-complete': is_sold,
+                        })}
+                    >
+                        {status === 'profit' && <Icon icon='IcProfit' />}
+                        {status === 'loss' && <Icon icon='IcLoss' />}
+                    </div>
+                </ContractCardItem>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <div className='dc-contract-card-items-wrapper--mobile'>
+                    <div className='dc-contract-card-items-wrapper-group'>
+                        <ContractCardItem header={getCardLabels().PURCHASE_PRICE}>
+                            <Money amount={buy_price} currency={currency} />
+                        </ContractCardItem>
+
+                        <ContractCardItem header={getCardLabels().ENTRY_SPOT}>
+                            <Money amount={entry_spot_display_value} currency={currency} />
+                        </ContractCardItem>
+                    </div>
+
+                    <div className='dc-contract-card-items-wrapper-group'>
+                        <ContractCardItem header={getCardLabels().CONTRACT_VALUE}>
+                            <Money amount={contract_value} currency={currency} />
+                        </ContractCardItem>
+
+                        <ContractCardItem header={getCardLabels().STRIKE}>
+                            <Money amount={barrier} currency={currency} />
+                        </ContractCardItem>
+                    </div>
+
+                    {is_sold ? (
+                        <ResultStatusIcon
+                            getCardLabels={getCardLabels}
+                            is_contract_won={getDisplayStatus(contract_info) === 'won'}
+                        />
+                    ) : (
+                        progress_slider
+                    )}
+                    <ContractCardItem
+                        className='dc-contract-card-item__total-profit-loss'
+                        header={getCardLabels().TOTAL_PROFIT_LOSS}
+                        is_crypto={isCryptocurrency(currency)}
+                        is_loss={+profit < 0}
+                        is_won={+profit > 0}
+                    >
+                        <Money amount={profit} currency={currency} />
+                        <div
+                            className={classNames('dc-contract-card__indicative--movement', {
+                                'dc-contract-card__indicative--movement-complete': is_sold,
+                            })}
+                        >
+                            {status === 'profit' && <Icon icon='IcProfit' />}
+                            {status === 'loss' && <Icon icon='IcLoss' />}
+                        </div>
+                    </ContractCardItem>
+                </div>
+            </MobileWrapper>
+        </React.Fragment>
+    );
+};
+
 const MultiplierCardBody = ({
     addToast,
     contract_info,
@@ -46,7 +140,6 @@ const MultiplierCardBody = ({
 }) => {
     const { buy_price, bid_price, profit, limit_order, underlying } = contract_info;
 
-    const total_profit = getTotalProfit(contract_info);
     const { take_profit, stop_loss } = getLimitOrderAmount(contract_update || limit_order);
     const cancellation_price = getCancellationPrice(contract_info);
     const is_valid_to_cancel = isValidToCancel(contract_info);
@@ -130,10 +223,10 @@ const MultiplierCardBody = ({
                 className='dc-contract-card-item__total-profit-loss'
                 header={getCardLabels().TOTAL_PROFIT_LOSS}
                 is_crypto={isCryptocurrency(currency)}
-                is_loss={+total_profit < 0}
-                is_won={+total_profit > 0}
+                is_loss={+profit < 0}
+                is_won={+profit > 0}
             >
-                <Money amount={total_profit} currency={currency} />
+                <Money amount={profit} currency={currency} />
                 <div
                     className={classNames('dc-contract-card__indicative--movement', {
                         'dc-contract-card__indicative--movement-complete': is_sold,
@@ -161,6 +254,7 @@ const ContractCardBody = ({
     is_mobile,
     is_multiplier,
     is_sold,
+    is_vanilla,
     onMouseLeave,
     removeToast,
     server_time,
@@ -207,6 +301,16 @@ const ContractCardBody = ({
             should_show_cancellation_warning={should_show_cancellation_warning}
             toggleCancellationWarning={toggleCancellationWarning}
         />
+    ) : is_vanilla ? (
+        <VanillaOptionsCardBody
+            contract_info={contract_info}
+            currency={currency}
+            getCardLabels={getCardLabels}
+            is_sold={is_sold}
+            has_progress_slider={has_progress_slider}
+            progress_slider={progress_slider_mobile_el}
+            status={status}
+        />
     ) : (
         <React.Fragment>
             <div className='dc-contract-card-items-wrapper'>

packages/components/src/components/contract-card/contract-card-items/contract-type-cell.jsx

@@ -1,12 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import IconTradeTypes from '../../icon-trade-types';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { isVanillaContract } from '@deriv/shared';
 
 const ContractTypeCell = ({ getContractTypeDisplay, is_high_low, multiplier, type }) => (
     <div className='dc-contract-type'>
         <div className='dc-contract-type__type-wrapper'>
             <IconTradeTypes
-                type={is_high_low ? `${type.toLowerCase()}_barrier` : type.toLowerCase()}
+                type={is_high_low && !isVanillaContract(type) ? `${type.toLowerCase()}_barrier` : type.toLowerCase()}
                 className='category-type'
                 size={24}
             />

packages/components/src/components/contract-card/contract-card.scss

@@ -270,6 +270,12 @@
             grid-gap: 0.8rem 0.4rem;
             flex: 1;
             padding: 0.4rem 0;
+
+            .dc-contract-card-items-wrapper-group {
+                .dc-contract-card-item:first-child {
+                    margin-bottom: 0.8rem;
+                }
+            }
         }
         &--has-progress-slider {
             grid-template-columns: 1fr 1fr 1fr;
@@ -372,6 +378,7 @@
             @include mobile {
                 flex-direction: row;
                 justify-content: center;
+                grid-column: 1 / 4;
 
                 &-value {
                     margin-left: 0.2rem;

packages/components/src/components/data-list/data-list-cell.jsx

@@ -1,20 +1,22 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
+import { isVanillaContract } from '@deriv/shared';
 
 const DataListCell = ({ className, column, is_footer, passthrough, row }) => {
     if (!column) return null;
     const { col_index, title } = column;
     const cell_value = row[col_index];
+    const is_vanilla = isVanillaContract(row.contract_info?.contract_type);
     return (
         <div className={classNames(className, column.col_index)}>
             {!is_footer && (
                 <div className={classNames(`${column.col_index}__row-title`, 'data-list__row-title')}>
-                    {column.renderHeader ? column.renderHeader({ title }) : title}
+                    {column.renderHeader ? column.renderHeader({ title, is_vanilla }) : title}
                 </div>
             )}
             <div className='data-list__row-content'>
                 {column.renderCellContent
-                    ? column.renderCellContent({ cell_value, is_footer, passthrough, row_obj: row })
+                    ? column.renderCellContent({ cell_value, is_footer, passthrough, row_obj: row, is_vanilla })
                     : cell_value}
             </div>
         </div>

packages/components/src/components/data-list/data-list.scss

@@ -79,6 +79,9 @@
         &--wrapper:not(.data-list__item--dynamic-height-wrapper) {
             height: 100%;
         }
+        &--vanilla {
+            flex: none;
+        }
     }
     &__desc {
         &--wrapper {

packages/components/src/components/icon-trade-types/icon-trade-types.tsx

@@ -76,6 +76,10 @@ const IconTradeTypes = ({ type, className, ...props }: TIconTradeTypes) => {
             return <Icon icon='IcTradetypeTicklow' className={className} color='brand' {...props} />;
         case 'upordown':
             return <Icon icon='IcTradetypeUpordown' className={className} color='brand' {...props} />;
+        case 'vanillalongcall':
+            return <Icon icon='IcTradetypeVanillaLongCall' className={className} color='brand' {...props} />;
+        case 'vanillalongput':
+            return <Icon icon='IcTradetypeVanillaLongPut' className={className} color='brand' {...props} />;
         default:
             return <Icon icon='IcUnknown' className={className} {...props} />;
     }

packages/components/src/components/icon/icons.js

@@ -568,9 +568,11 @@ import './contract/ic-contract-exit-time-circle.svg';
 import './contract/ic-contract-exit-time.svg';
 import './contract/ic-contract-flag.svg';
 import './contract/ic-contract-id.svg';
+import './contract/ic-contract-payout.svg';
 import './contract/ic-contract-safeguard.svg';
 import './contract/ic-contract-start-time-circle.svg';
 import './contract/ic-contract-start-time.svg';
+import './contract/ic-contract-strike.svg';
 import './contract/ic-contract-target.svg';
 import './currency/ic-currency-aud.svg';
 import './currency/ic-currency-bch.svg';
@@ -747,6 +749,8 @@ import './tradetype/ic-tradetype-runlow.svg';
 import './tradetype/ic-tradetype-tickhigh.svg';
 import './tradetype/ic-tradetype-ticklow.svg';
 import './tradetype/ic-tradetype-upordown.svg';
+import './tradetype/ic-tradetype-vanilla-long-call.svg';
+import './tradetype/ic-tradetype-vanilla-long-put.svg';
 import './underlying/ic-underlying-1HZ100V.svg';
 import './underlying/ic-underlying-1HZ10V.svg';
 import './underlying/ic-underlying-1HZ150V.svg';

packages/components/src/components/popover/popover.tsx

@@ -32,6 +32,7 @@ const Popover = ({
     window_border,
     zIndex = '1',
     data_testid,
+    arrow_styles,
 }: React.PropsWithChildren<TPopoverProps>) => {
     const ref = React.useRef<HTMLDivElement | undefined>();
     const [popover_ref, setPopoverRef] = React.useState<HTMLDivElement | undefined>(undefined);
@@ -160,7 +161,9 @@ const Popover = ({
                                               margin: 'auto',
                                               bottom: '0px',
                                           }
-                                        : {}
+                                        : {
+                                              ...arrow_styles,
+                                          }
                                 }
                             >
                                 <div

packages/components/src/components/positions-drawer-card/positions-drawer-card.jsx

@@ -10,6 +10,7 @@ import {
     getCardLabels,
     getContractTypeDisplay,
     getEndTime,
+    isVanillaContract,
 } from '@deriv/shared';
 
 const PositionsDrawerCard = ({
@@ -43,6 +44,7 @@ const PositionsDrawerCard = ({
     toggleUnsupportedContractModal,
 }) => {
     const is_multiplier = isMultiplierContract(contract_info.contract_type);
+    const is_vanilla = isVanillaContract(contract_info.contract_type);
     const is_crypto = isCryptoContract(contract_info.underlying);
     const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
     const has_ended = !!getEndTime(contract_info);
@@ -83,6 +85,7 @@ const PositionsDrawerCard = ({
             is_mobile={is_mobile}
             is_multiplier={is_multiplier}
             is_sold={has_ended}
+            is_vanilla={is_vanilla}
             has_progress_slider={is_mobile && has_progress_slider}
             removeToast={removeToast}
             server_time={server_time}

packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.jsx

@@ -3,16 +3,14 @@ import React from 'react';
 import TickProgress from '../tick-progress';
 import Text from '../text';
 
-const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }) => {
-    return (
-        <div className='dc-progress-slider__ticks'>
-            <Text styles={{ lineHeight: '18px' }} size='xxs' className='dc-progress-slider__ticks-caption'>
-                {getCardLabels().TICK} {current_tick}
-            </Text>
-            <TickProgress columns={5} rows={ticks_count > 5 ? 2 : 1} size={ticks_count} value={current_tick} />
-        </div>
-    );
-};
+const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }) => (
+    <div className='dc-progress-slider__ticks'>
+        <Text styles={{ lineHeight: '18px' }} size='xxs' className='dc-progress-slider__ticks-caption'>
+            {getCardLabels().TICK} {current_tick}
+        </Text>
+        <TickProgress columns={5} rows={ticks_count > 5 ? 2 : 1} size={ticks_count} value={current_tick} />
+    </div>
+);
 
 ProgressTicksMobile.propTypes = {
     current_tick: PropTypes.number,

packages/components/src/components/types/popover.types.ts

@@ -26,4 +26,5 @@ export type TPopoverProps = {
     zIndex?: string;
     window_border?: number;
     data_testid?: string;
+    arrow_styles?: React.CSSProperties;
 };

packages/components/stories/icon/icons.js

@@ -774,6 +774,8 @@ export const icons =
         'IcTradetypeTickhigh',
         'IcTradetypeTicklow',
         'IcTradetypeUpordown',
+        'IcTradetypeVanillaLongCall',
+        'IcTradetypeVanillaLongPut',
     ],
     'underlying': [
         'IcUnderlying1HZ100V',