Merge pull request #93 from shafin-deriv/shafin/BOT-1869/chore-summar…

…y-card-issues

chore: fix summary card issues

src/app/CoreStoreProvider.tsx

@@ -1,4 +1,6 @@
 import { memo, useEffect } from 'react';
+import { FORM_ERROR_MESSAGES } from '@/components/shared/constants/form-error-messages';
+import { initFormErrorMessages } from '@/components/shared/utils/validation/declarative-validation-rules';
 import { useStore } from '@/hooks/useStore';
 import { GetLandingCompanyResult } from '@/stores/client-store';
 import { toMoment } from '@/utils/time';
@@ -45,6 +47,10 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = memo(({ child
         },
     };
 
+    useEffect(() => {
+        initFormErrorMessages(FORM_ERROR_MESSAGES());
+    }, []);
+
     useEffect(() => {
         if (common && currentLang) {
             common.setCurrentLanguage(currentLang);

src/components/shared/constants/form-error-messages.js

@@ -0,0 +1,69 @@
+import { localize } from '@deriv-com/translations';
+import { address_permitted_special_characters_message } from '../utils/validation';
+
+export const FORM_ERROR_MESSAGES = () => ({
+    empty_address: () => localize('This field is required'),
+    empty_barrier: () => localize('Barrier is a required field.'),
+    address: () =>
+        localize('Use only the following special characters: {{permitted_characters}}', {
+            permitted_characters: address_permitted_special_characters_message,
+            interpolation: { escapeValue: false },
+        }),
+    barrier: () =>
+        localize('Only numbers and these special characters are allowed: {{permitted_characters}}', {
+            permitted_characters: '+ - .',
+        }),
+    email: () => localize('Invalid email address.'),
+    general: () => localize('Only letters, numbers, space, hyphen, period, and apostrophe are allowed.'),
+    name: () => localize('Letters, spaces, periods, hyphens, apostrophes only.'),
+    password: () => localize('Password should have lower and uppercase English letters with numbers.'),
+    po_box: () => localize('P.O. Box is not accepted in address'),
+    phone: () => localize('Please enter a valid phone number (e.g. +15417541234).'),
+    postcode: () => localize('Only letters, numbers, space and hyphen are allowed.'),
+    signup_token: () => localize('The length of token should be 8.'),
+    tax_id: () => localize('Should start with letter or number, and may contain hyphen and underscore.'),
+    number: () => localize('Should be a valid number.'),
+    decimalPlaces: decimals =>
+        localize('Up to {{decimal_count}} decimal places are allowed.', { decimal_count: decimals }),
+    value: value => localize('Should be {{value}}', { value }),
+    betweenMinMax: (min_value, max_value) =>
+        localize('Should be between {{min_value}} and {{max_value}}', {
+            min_value,
+            max_value,
+        }),
+    minNumber: min_value => localize('Should be more than {{min_value}}', { min_value }),
+    maxNumber: max_value => localize('Should be less than {{max_value}}', { max_value }),
+    // all existing warning phrases from zxcvbn
+    password_warnings: {
+        use_a_few_words: () => localize('Use a few words, avoid common phrases'),
+        no_need_for_mixed_chars: () => localize('No need for symbols, digits, or uppercase letters'),
+        uncommon_words_are_better: () => localize('Add another word or two. Uncommon words are better.'),
+        straight_rows_of_keys_are_easy: () => localize('Straight rows of keys are easy to guess'),
+        short_keyboard_patterns_are_easy: () => localize('Short keyboard patterns are easy to guess'),
+        use_longer_keyboard_patterns: () => localize('Use a longer keyboard pattern with more turns'),
+        repeated_chars_are_easy: () => localize('Repeats like "aaa" are easy to guess'),
+        repeated_patterns_are_easy: () =>
+            localize('Repeats like "abcabcabc" are only slightly harder to guess than "abc"'),
+        avoid_repeated_chars: () => localize('Avoid repeated words and characters'),
+        sequences_are_easy: () => localize('Sequences like abc or 6543 are easy to guess'),
+        avoid_sequences: () => localize('Avoid sequences'),
+        recent_years_are_easy: () => localize('Recent years are easy to guess'),
+        avoid_recent_years: () => localize('Avoid recent years'),
+        avoid_associated_years: () => localize('Avoid years that are associated with you'),
+        dates_are_easy: () => localize('Dates are often easy to guess'),
+        avoid_associated_dates_and_years: () => localize('Avoid dates and years that are associated with you'),
+        top10_common_password: () => localize('This is a top-10 common password'),
+        top100_common_password: () => localize('This is a top-100 common password'),
+        very_common_password: () => localize('This is a very common password'),
+        similar_to_common_password: () => localize('This is similar to a commonly used password'),
+        a_word_is_easy: () => localize('A word by itself is easy to guess'),
+        names_are_easy: () => localize('Names and surnames by themselves are easy to guess'),
+        common_names_are_easy: () => localize('Common names and surnames are easy to guess'),
+        capitalization_doesnt_help: () => localize("Capitalization doesn't help very much"),
+        all_uppercase_doesnt_help: () => localize('All-uppercase is almost as easy to guess as all-lowercase'),
+        reverse_doesnt_help: () => localize("Reversed words aren't much harder to guess"),
+        substitution_doesnt_help: () =>
+            localize("Predictable substitutions like '@' instead of 'a' don't help very much"),
+        user_dictionary: () => localize('This password is on the blacklist'),
+    },
+});

src/components/shared/utils/validation/declarative-validation-rules.ts

@@ -178,9 +178,9 @@ const initPreBuildDVRs = () => ({
     },
 });
 
-export const initFormErrorMessages = (all_form_error_messages: TFormErrorMessagesTypes) => {
+export const initFormErrorMessages = (all_form_error_messages: Partial<TFormErrorMessagesTypes>) => {
     if (!pre_build_dvrs) {
-        form_error_messages = all_form_error_messages;
+        form_error_messages = all_form_error_messages as TFormErrorMessagesTypes;
         pre_build_dvrs = initPreBuildDVRs();
     }
 };

src/components/shared_ui/contract-card/contract-card-items/contract-card-header.tsx

@@ -14,8 +14,7 @@ import {
 } from '@/components/shared';
 import { TContractInfo } from '@/components/shared/utils/contract/contract-types';
 import { Icon } from '@/utils/tmp/dummy';
-import { useDevice } from '@deriv-com/ui';
-import Button from '../../button';
+import { Button, useDevice } from '@deriv-com/ui';
 import DesktopWrapper from '../../desktop-wrapper';
 import MobileWrapper from '../../mobile-wrapper';
 import ProgressSlider from '../../progress-slider';
@@ -163,10 +162,11 @@ const ContractCardHeader = ({
                                         'dc-btn--loading': is_sell_requested,
                                     })}
                                     disabled={!is_valid_to_sell || is_sell_requested}
-                                    label={getCardLabels().SELL}
                                     onClick={() => onClickSell(id)}
                                     variant='outlined'
-                                />
+                                >
+                                    {getCardLabels().SELL}
+                                </Button>
                             </div>
                         </CSSTransition>
                     ) : null}

src/components/shared_ui/contract-card/contract-card-items/contract-card-sell.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { hasContractEntered, isForwardStarting, isOpen, isValidToSell } from '@/components/shared';
 import { TContractInfo } from '@/components/shared/utils/contract/contract-types';
-import Button from '../../button';
+import { Button } from '@deriv-com/ui';
 import { TGetCardLables } from '../../types';
 
 export type TContractCardSellProps = {
@@ -34,10 +34,11 @@ const ContractCardSell = ({ contract_info, getCardLabels, is_sell_requested, onC
                     })}
                     data-testid='dt_contract_card_sell'
                     disabled={is_sell_requested}
-                    label={getCardLabels().SELL}
                     onClick={onClick}
                     variant='outlined'
-                />
+                >
+                    {getCardLabels().SELL}
+                </Button>
             ) : (
                 <div className='dc-contract-card__no-resale-msg'>{getCardLabels().RESALE_NOT_OFFERED}</div>
             )}

src/components/shared_ui/contract-card/contract-card-items/contract-update-form.tsx

@@ -11,8 +11,8 @@ import {
 } from '@/components/shared';
 import { TContractInfo, TContractStore } from '@/components/shared/utils/contract/contract-types';
 import { Localize } from '@deriv-com/translations';
+import { Button } from '@deriv-com/ui';
 import ArrowIndicator from '../../arrow-indicator';
-import Button from '../../button';
 import InputWithCheckbox from '../../input-wth-checkbox';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';
@@ -249,10 +249,12 @@ const ContractUpdateForm = (props: TContractUpdateFormProps) => {
                 {is_multiplier && <div className='dc-contract-card-dialog__input'>{stop_loss_input}</div>}
                 <div className='dc-contract-card-dialog__button'>
                     <Button
-                        label={getCardLabels().APPLY}
                         onClick={onClick}
                         disabled={has_validation_errors || !is_valid_contract_update || isStateUnchanged()}
-                    />
+                        isFullWidth
+                    >
+                        {getCardLabels().APPLY}
+                    </Button>
                 </div>
             </div>
         </React.Fragment>

src/components/shared_ui/contract-card/contract-card-items/multiplier-close-actions.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { isValidToCancel } from '@/components/shared';
 import { TContractInfo } from '@/components/shared/utils/contract/contract-types';
-import Button from '../../button';
+import { Button } from '@deriv-com/ui';
 import RemainingTime from '../../remaining-time';
 import { TGetCardLables } from '../../types';
 
@@ -37,14 +37,15 @@ const MultiplierCloseActions = ({
                     'dc-btn--loading': is_sell_requested,
                 })}
                 disabled={is_sell_requested || (Number(profit) < 0 && is_valid_to_cancel)}
-                label={getCardLabels().CLOSE}
                 onClick={ev => {
                     onClickSell(contract_id);
                     ev.stopPropagation();
                     ev.preventDefault();
                 }}
                 variant='outlined'
-            />
+            >
+                {getCardLabels().CLOSE}
+            </Button>
             {is_valid_to_cancel && (
                 <Button
                     id={`dc_contract_card_${contract_id}_cancel_button`}

src/constants/contract.ts

@@ -1,4 +1,4 @@
-import { getTotalProfit } from '@/components/shared';
+import { getTotalProfit, TContractStore } from '@/components/shared';
 import { localize } from '@deriv-com/translations';
 
 export type TContract = {

src/stores/summary-card-store.ts

@@ -1,11 +1,16 @@
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
-import { getIndicativePrice, isAccumulatorContract, isEqualObject, isMultiplierContract } from '@/components/shared';
+import {
+    getIndicativePrice,
+    isAccumulatorContract,
+    isEqualObject,
+    isMultiplierContract,
+    Validator,
+} from '@/components/shared';
 import { TContractInfo } from '@/components/summary/summary-card.types';
 import { getValidationRules, TValidationRuleIndex, TValidationRules } from '@/constants/contract';
 import { contract_stages } from '@/constants/contract-stage';
 import { api_base } from '@/external/bot-skeleton';
 import { getContractUpdateConfig } from '@/utils/multiplier';
-import Validator from '@/utils/tmp/validator';
 import { ProposalOpenContract, UpdateContractResponse } from '@deriv/api-types';
 import { TStores } from '@deriv/stores/types';
 import RootStore from './root-store';

src/utils/tmp/dummy.tsx

@@ -13,7 +13,6 @@ type TIconComponent = {
 const IconComponent: React.FC<TIconComponent> = ({ icon, ...rest }) => {
     const onError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
         // eslint-disable-next-line no-console
-        console.info(`${icon} not found, redirecting to fallback`, e);
         (e.target as HTMLImageElement).src = 'assets/icons/IcDashboard.svg';
     };