From a1d6a2a191963c46c13b7783686123e71a08b8c7 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 19 Jul 2024 16:29:09 +0530 Subject: [PATCH 01/15] fix: add negative sign to amount --- packages/blade/src/components/Amount/Amount.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index 33e550eb29f..3f11781e291 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -116,6 +116,7 @@ const AmountValue = ({ fontFamily={numberFontFamily} as={isReactNative ? undefined : 'span'} > + {amount.minusSign} {amount.integer} + {amount.minusSign} {amount.formatted} ); @@ -179,7 +181,7 @@ export const formatAmountWithSuffix = ({ maximumFractionDigits: 2, minimumFractionDigits: 2, }, - }; + } as const; return { ...formatNumberByParts(value, options), formatted: formatNumber(value, options), From 97f6583c76c4d682ae3d2f35522fa3b08ec37e0c Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Wed, 24 Jul 2024 16:13:54 +0530 Subject: [PATCH 02/15] fix: negative numbers for amount --- packages/blade/package.json | 8 ++-- .../blade/src/components/Amount/Amount.tsx | 30 ++++++++---- yarn.lock | 47 +++++-------------- 3 files changed, 37 insertions(+), 48 deletions(-) diff --git a/packages/blade/package.json b/packages/blade/package.json index 274aebd8ba4..72a66b682e5 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -280,8 +280,8 @@ "typescript-transform-paths": "3.4.7", "@types/body-scroll-lock": "3.1.0", "ramda": "0.29.1", - "@razorpay/i18nify-js": "1.9.3", - "@razorpay/i18nify-react": "4.0.8", + "@razorpay/i18nify-js": "1.10.3", + "@razorpay/i18nify-react": "4.0.9", "plop": "3.1.1", "node-plop": "0.32.0", "svgson": "5.3.1" @@ -300,8 +300,8 @@ "react-hot-toast": "2.4.1", "@gorhom/bottom-sheet": "^4.4.6", "@gorhom/portal": "^1.0.14", - "@razorpay/i18nify-js": "^1.9.3", - "@razorpay/i18nify-react": "^4.0.8" + "@razorpay/i18nify-js": "^1.10.3", + "@razorpay/i18nify-react": "^4.0.9" }, "peerDependenciesMeta": { "react-native": { diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index 3f11781e291..04cb73fe93e 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -116,7 +116,6 @@ const AmountValue = ({ fontFamily={numberFontFamily} as={isReactNative ? undefined : 'span'} > - {amount.minusSign} {amount.integer} - {amount.minusSign} {amount.formatted} ); @@ -188,27 +186,29 @@ export const formatAmountWithSuffix = ({ }; } case 'humanize': { - const formatted = formatNumber(value, { + const options = { intlOptions: { notation: 'compact', maximumFractionDigits: 2, trailingZeroDisplay: 'stripIfInteger', }, - }); + } as const; return { - formatted, + ...formatNumberByParts(value, options), + formatted: formatNumber(value, options), }; } default: { - const formatted = formatNumber(value, { + const options = { intlOptions: { maximumFractionDigits: 0, roundingMode: 'floor', }, - }); + } as const; return { - formatted, + ...formatNumberByParts(value, options), + formatted: formatNumber(value, options), }; } } @@ -298,6 +298,8 @@ const _Amount = ({ : normalAmountSizes[type][size]; const isReactNative = getPlatformType() === 'react-native'; + console.log(renderedValue); + return ( + {renderedValue.minusSign ? ( + + {renderedValue.minusSign} + + ) : null} {currencyPosition === 'left' && ( Date: Mon, 12 Aug 2024 12:03:06 +0530 Subject: [PATCH 03/15] feat: remove formatted --- .../blade/src/components/Amount/Amount.tsx | 33 ++++++++----------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index 04cb73fe93e..ca8a5612c4c 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import type { CurrencyCodeType } from '@razorpay/i18nify-js/currency'; -import { formatNumber, formatNumberByParts } from '@razorpay/i18nify-js/currency'; +import { formatNumberByParts } from '@razorpay/i18nify-js/currency'; import type { AmountTypeProps } from './amountTokens'; import { normalAmountSizes, subtleFontSizes, amountLineHeights } from './amountTokens'; import type { BaseTextProps } from '~components/Typography/BaseText/types'; @@ -82,7 +82,7 @@ const getTextColorProps = ({ color }: { color: AmountProps['color'] }): ColorPro return props; }; -type AmountType = Partial> & { formatted: string }; +type AmountType = Partial>; interface AmountValue extends Omit { amountValueColor: BaseTextProps['color']; @@ -141,7 +141,10 @@ const AmountValue = ({ color={amountValueColor} lineHeight={amountLineHeights[type][size]} > - {amount.formatted} + {amount.integer} + {amount.decimal} + {amount.fraction} + {amount.compact} ); }; @@ -156,15 +159,13 @@ type FormatAmountWithSuffixType = { * === Logic === * value = 12500.45 * if suffix === 'decimals' => { - "formatted": "12,500.45", "integer": "12,500", "decimal": ".", "fraction": "45", + "compact": "K", "isPrefixSymbol": false, "rawParts": [{"type": "integer","value": "12"},{"type": "group","value": ","},{"type": "integer","value": "500"},{"type": "decimal","value": "."},{"type": "fraction","value": "45"}] } - * else if suffix === 'humanize' => { formatted: "1.2T" } - * else => { formatted: "1,23,456" } * @returns {AmountType} */ export const formatAmountWithSuffix = ({ @@ -180,10 +181,7 @@ export const formatAmountWithSuffix = ({ minimumFractionDigits: 2, }, } as const; - return { - ...formatNumberByParts(value, options), - formatted: formatNumber(value, options), - }; + return formatNumberByParts(value, options); } case 'humanize': { const options = { @@ -193,10 +191,7 @@ export const formatAmountWithSuffix = ({ trailingZeroDisplay: 'stripIfInteger', }, } as const; - return { - ...formatNumberByParts(value, options), - formatted: formatNumber(value, options), - }; + return formatNumberByParts(value, options); } default: { @@ -206,15 +201,12 @@ export const formatAmountWithSuffix = ({ roundingMode: 'floor', }, } as const; - return { - ...formatNumberByParts(value, options), - formatted: formatNumber(value, options), - }; + return formatNumberByParts(value, options); } } } catch (err: unknown) { return { - formatted: `${value}`, + integer: `${value}`, }; } }; @@ -284,6 +276,7 @@ const _Amount = ({ }); isPrefixSymbol = byParts.isPrefixSymbol; currencySymbol = byParts.currency; + // console.log({ value, byParts }); } catch (err: unknown) { isPrefixSymbol = true; currencySymbol = currency; @@ -298,7 +291,7 @@ const _Amount = ({ : normalAmountSizes[type][size]; const isReactNative = getPlatformType() === 'react-native'; - console.log(renderedValue); + // console.log(renderedValue); return ( Date: Mon, 12 Aug 2024 12:11:56 +0530 Subject: [PATCH 04/15] refactor: remove formatNumberByParts extra instances --- .../blade/src/components/Amount/Amount.tsx | 26 +++++++------------ .../Amount/__tests__/Amount.native.test.tsx | 14 +++++----- .../Amount/__tests__/Amount.web.test.tsx | 14 +++++----- 3 files changed, 24 insertions(+), 30 deletions(-) diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index ca8a5612c4c..1b67e55db18 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -152,6 +152,7 @@ const AmountValue = ({ type FormatAmountWithSuffixType = { suffix: AmountProps['suffix']; value: number; + currency: AmountProps['currency']; }; /** @@ -168,9 +169,10 @@ type FormatAmountWithSuffixType = { } * @returns {AmountType} */ -export const formatAmountWithSuffix = ({ +export const getAmountByParts = ({ suffix, value, + currency, }: FormatAmountWithSuffixType): AmountType => { try { switch (suffix) { @@ -180,6 +182,7 @@ export const formatAmountWithSuffix = ({ maximumFractionDigits: 2, minimumFractionDigits: 2, }, + currency, } as const; return formatNumberByParts(value, options); } @@ -190,6 +193,7 @@ export const formatAmountWithSuffix = ({ maximumFractionDigits: 2, trailingZeroDisplay: 'stripIfInteger', }, + currency, } as const; return formatNumberByParts(value, options); } @@ -200,6 +204,7 @@ export const formatAmountWithSuffix = ({ maximumFractionDigits: 0, roundingMode: 'floor', }, + currency, } as const; return formatNumberByParts(value, options); } @@ -207,6 +212,7 @@ export const formatAmountWithSuffix = ({ } catch (err: unknown) { return { integer: `${value}`, + currency, }; } }; @@ -269,21 +275,11 @@ const _Amount = ({ color, }); - let isPrefixSymbol, currencySymbol; - try { - const byParts = formatNumberByParts(value, { - currency, - }); - isPrefixSymbol = byParts.isPrefixSymbol; - currencySymbol = byParts.currency; - // console.log({ value, byParts }); - } catch (err: unknown) { - isPrefixSymbol = true; - currencySymbol = currency; - } + const renderedValue = getAmountByParts({ suffix, value, currency }); + const isPrefixSymbol = renderedValue.isPrefixSymbol ?? true; + const currencySymbol = renderedValue.currency ?? currency; const currencyPosition = isPrefixSymbol ? 'left' : 'right'; - const renderedValue = formatAmountWithSuffix({ suffix, value }); const currencySymbolOrCode = currencyIndicator === 'currency-symbol' ? currencySymbol : currency; const currencyFontSize = isAffixSubtle @@ -291,8 +287,6 @@ const _Amount = ({ : normalAmountSizes[type][size]; const isReactNative = getPlatformType() === 'react-native'; - // console.log(renderedValue); - return ( ', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); - expect(formatAmountWithSuffix({ value: 1000.22, suffix: 'humanize' })).toEqual({ + expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ formatted: '1T', }); - expect(formatAmountWithSuffix({ value: 1000000.0, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '10,00,000.00', fraction: '00', @@ -138,11 +138,11 @@ describe('', () => { { type: 'fraction', value: '00' }, ], }); - expect(formatAmountWithSuffix({ value: 10000000, suffix: 'none' })).toEqual({ + expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' })).toEqual({ formatted: '1,00,00,000', }); // Related issue - https://github.com/razorpay/blade/issues/1572 - expect(formatAmountWithSuffix({ value: 2.07, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 2.07, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '2.07', fraction: '07', @@ -154,7 +154,7 @@ describe('', () => { { type: 'fraction', value: '07' }, ], }); - expect(formatAmountWithSuffix({ value: 2.077, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 2.077, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '2.08', fraction: '08', @@ -166,7 +166,7 @@ describe('', () => { { type: 'fraction', value: '08' }, ], }); - expect(formatAmountWithSuffix({ value: 2.3, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 2.3, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '2.30', fraction: '30', diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index 00bbd0c5d8d..7d14f1c5304 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -1,7 +1,7 @@ import { setState } from '@razorpay/i18nify-js'; import { I18nProvider } from '@razorpay/i18nify-react'; import type { AmountProps } from '../Amount'; -import { Amount, formatAmountWithSuffix } from '../Amount'; +import { Amount, getAmountByParts } from '../Amount'; import { AMOUNT_SUFFIX_TEST_SET } from './mock'; import renderWithTheme from '~utils/testing/renderWithTheme.web'; import assertAccessible from '~utils/testing/assertAccessible.web'; @@ -144,10 +144,10 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); - expect(formatAmountWithSuffix({ value: 1000.22, suffix: 'humanize' })).toEqual({ + expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ formatted: '1T', }); - expect(formatAmountWithSuffix({ value: 1000000.0, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '10,00,000.00', fraction: '00', @@ -163,11 +163,11 @@ describe('', () => { { type: 'fraction', value: '00' }, ], }); - expect(formatAmountWithSuffix({ value: 10000000, suffix: 'none' })).toEqual({ + expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' })).toEqual({ formatted: '1,00,00,000', }); // Related issue - https://github.com/razorpay/blade/issues/1572 - expect(formatAmountWithSuffix({ value: 2.07, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 2.07, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '2.07', fraction: '07', @@ -179,7 +179,7 @@ describe('', () => { { type: 'fraction', value: '07' }, ], }); - expect(formatAmountWithSuffix({ value: 2.077, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 2.077, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '2.08', fraction: '08', @@ -191,7 +191,7 @@ describe('', () => { { type: 'fraction', value: '08' }, ], }); - expect(formatAmountWithSuffix({ value: 2.3, suffix: 'decimals' })).toEqual({ + expect(getAmountByParts({ value: 2.3, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', formatted: '2.30', fraction: '30', From 7df675008988943c6edd3ebcfc4c701191afd2a6 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Mon, 12 Aug 2024 14:32:07 +0530 Subject: [PATCH 05/15] feat: remove formatted number --- .../Amount/__tests__/Amount.native.test.tsx | 11 +++++------ .../components/Amount/__tests__/Amount.web.test.tsx | 9 +++------ 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx index 9ca00019397..ce0d66137d6 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx @@ -120,11 +120,13 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ - formatted: '1T', + integer: '1000', + decimal: '.', + fraction: '72', + compact: 'T', }); expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '10,00,000.00', fraction: '00', integer: '10,00,000', isPrefixSymbol: false, @@ -139,12 +141,11 @@ describe('', () => { ], }); expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' })).toEqual({ - formatted: '1,00,00,000', + integer: '1,00,00,000', }); // Related issue - https://github.com/razorpay/blade/issues/1572 expect(getAmountByParts({ value: 2.07, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '2.07', fraction: '07', integer: '2', isPrefixSymbol: false, @@ -156,7 +157,6 @@ describe('', () => { }); expect(getAmountByParts({ value: 2.077, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '2.08', fraction: '08', integer: '2', isPrefixSymbol: false, @@ -168,7 +168,6 @@ describe('', () => { }); expect(getAmountByParts({ value: 2.3, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '2.30', fraction: '30', integer: '2', isPrefixSymbol: false, diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index 7d14f1c5304..bbcfe58a031 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -145,11 +145,11 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ - formatted: '1T', + integer: '1', + compact: 'T', }); expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '10,00,000.00', fraction: '00', integer: '10,00,000', isPrefixSymbol: false, @@ -164,12 +164,11 @@ describe('', () => { ], }); expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' })).toEqual({ - formatted: '1,00,00,000', + integer: '1,00,00,000', }); // Related issue - https://github.com/razorpay/blade/issues/1572 expect(getAmountByParts({ value: 2.07, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '2.07', fraction: '07', integer: '2', isPrefixSymbol: false, @@ -181,7 +180,6 @@ describe('', () => { }); expect(getAmountByParts({ value: 2.077, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '2.08', fraction: '08', integer: '2', isPrefixSymbol: false, @@ -193,7 +191,6 @@ describe('', () => { }); expect(getAmountByParts({ value: 2.3, suffix: 'decimals', currency: 'INR' })).toEqual({ decimal: '.', - formatted: '2.30', fraction: '30', integer: '2', isPrefixSymbol: false, From 58051745be88a03c383b2a8a70c2b34f0e0f70f2 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 13 Aug 2024 11:00:35 +0530 Subject: [PATCH 06/15] fix: tests for node 20 --- .../src/components/Amount/Amount.stories.tsx | 6 ++- .../Amount/__tests__/Amount.web.test.tsx | 40 +++++++++++++------ .../__snapshots__/Amount.web.test.tsx.snap | 7 +++- .../src/components/Amount/__tests__/mock.ts | 2 +- 4 files changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx index 14cd45d04ac..b4d3bd91682 100644 --- a/packages/blade/src/components/Amount/Amount.stories.tsx +++ b/packages/blade/src/components/Amount/Amount.stories.tsx @@ -56,7 +56,11 @@ export default { } as Meta; const AmountDefaultTemplate: StoryFn = (args) => { - return ; + return ( + + + + ); }; export const Amount = AmountDefaultTemplate.bind({}); diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index bbcfe58a031..3d8cabe3204 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -145,15 +145,24 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ + compact: 'K', + currency: '₹', integer: '1', - compact: 'T', + isPrefixSymbol: true, + rawParts: [ + { type: 'currency', value: '₹' }, + { type: 'integer', value: '1' }, + { type: 'compact', value: 'K' }, + ], }); expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '00', integer: '10,00,000', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '10' }, { type: 'group', value: ',' }, { type: 'integer', value: '00' }, @@ -163,38 +172,44 @@ describe('', () => { { type: 'fraction', value: '00' }, ], }); - expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' })).toEqual({ - integer: '1,00,00,000', - }); + expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' }).integer).toBe( + '1,00,00,000', + ); // Related issue - https://github.com/razorpay/blade/issues/1572 expect(getAmountByParts({ value: 2.07, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '07', integer: '2', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '2' }, { type: 'decimal', value: '.' }, { type: 'fraction', value: '07' }, ], }); expect(getAmountByParts({ value: 2.077, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '08', integer: '2', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '2' }, { type: 'decimal', value: '.' }, { type: 'fraction', value: '08' }, ], }); expect(getAmountByParts({ value: 2.3, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '30', integer: '2', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '2' }, { type: 'decimal', value: '.' }, { type: 'fraction', value: '30' }, @@ -202,8 +217,9 @@ describe('', () => { }); }); - AMOUNT_SUFFIX_TEST_SET.forEach((item) => { - it(`should render ${item.output} in Amount for value:${item.value} & suffix:${item.suffix}`, () => { + it.each(AMOUNT_SUFFIX_TEST_SET.filter((item) => item.output.includes('Mio')))( + `should render different outputs in Amount for different suffix values`, + (item) => { const { getByTestId } = renderWithTheme( ', () => { ); expect(getByTestId('amount-test')).toHaveTextContent(item.output); - }); - }); + }, + ); }); diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap index 8ce1964cf34..f8a8d6dc329 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap @@ -542,7 +542,8 @@ exports[` should render amount with Humanize value 1`] = ` class="c3" data-blade-component="base-text" > - 1K + 1 + K @@ -2055,7 +2056,9 @@ exports[` should render negative intent Amount 1`] = ` class="c3" data-blade-component="base-text" > - 1,000.00 + 1,000 + . + 00 diff --git a/packages/blade/src/components/Amount/__tests__/mock.ts b/packages/blade/src/components/Amount/__tests__/mock.ts index 0af60951011..b2e116640e3 100644 --- a/packages/blade/src/components/Amount/__tests__/mock.ts +++ b/packages/blade/src/components/Amount/__tests__/mock.ts @@ -6,7 +6,7 @@ export const AMOUNT_SUFFIX_TEST_SET: { output: string; locale?: string; }[] = [ - { value: 1000000.22, suffix: 'humanize', output: '1 Mio.₹', locale: 'de-DE' }, + { value: 1000000.22, suffix: 'humanize', output: '1Mio.₹', locale: 'de-DE' }, { value: 1000000.0, suffix: 'decimals', output: '₹1,000,000.00', locale: 'en-US' }, { value: 10000000, suffix: 'none', output: '₹10,000,000', locale: 'en-US' }, { value: 2.07, suffix: 'decimals', output: '2,07₹', locale: 'fr-FR' }, From 846b83024970c03871fa41ba3acd260b98a4345a Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Tue, 13 Aug 2024 11:56:10 +0530 Subject: [PATCH 07/15] fix: native amount tests --- .../Amount/__tests__/Amount.native.test.tsx | 45 ++++++++++++++----- .../__snapshots__/Amount.native.test.tsx.snap | 7 ++- 2 files changed, 39 insertions(+), 13 deletions(-) diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx index ce0d66137d6..c2090e7ca31 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx @@ -120,17 +120,34 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ - integer: '1000', - decimal: '.', - fraction: '72', - compact: 'T', + compact: 'K', + currency: '₹', + integer: '1', + isPrefixSymbol: true, + rawParts: [ + { + type: 'currency', + value: '₹', + }, + { + type: 'integer', + value: '1', + }, + { + type: 'compact', + value: 'K', + }, + ], }); + expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '00', integer: '10,00,000', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '10' }, { type: 'group', value: ',' }, { type: 'integer', value: '00' }, @@ -140,38 +157,44 @@ describe('', () => { { type: 'fraction', value: '00' }, ], }); - expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' })).toEqual({ - integer: '1,00,00,000', - }); + expect(getAmountByParts({ value: 10000000, suffix: 'none', currency: 'INR' }).integer).toBe( + '1,00,00,000', + ); // Related issue - https://github.com/razorpay/blade/issues/1572 expect(getAmountByParts({ value: 2.07, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '07', integer: '2', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '2' }, { type: 'decimal', value: '.' }, { type: 'fraction', value: '07' }, ], }); expect(getAmountByParts({ value: 2.077, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '08', integer: '2', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '2' }, { type: 'decimal', value: '.' }, { type: 'fraction', value: '08' }, ], }); expect(getAmountByParts({ value: 2.3, suffix: 'decimals', currency: 'INR' })).toEqual({ + currency: '₹', decimal: '.', fraction: '30', integer: '2', - isPrefixSymbol: false, + isPrefixSymbol: true, rawParts: [ + { type: 'currency', value: '₹' }, { type: 'integer', value: '2' }, { type: 'decimal', value: '.' }, { type: 'fraction', value: '30' }, diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap index 143dac8d05b..d91e9c0cce9 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap @@ -2507,7 +2507,8 @@ exports[` should render amount with Humanize value 1`] = ` ] } > - 1T + 1 + K @@ -2973,7 +2974,9 @@ exports[` should render information intent Amount 1`] = ` ] } > - 1,000.00 + 1,000 + . + 00 From 9b8097c9decdf90727d1ac9e0ee8f55f848b896f Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Thu, 17 Oct 2024 16:34:43 +0530 Subject: [PATCH 08/15] feat: upgrade i18nify --- packages/blade/package.json | 8 ++-- .../blade/src/components/Amount/Amount.tsx | 43 +++++++++++++++++++ yarn.lock | 16 +++---- 3 files changed, 55 insertions(+), 12 deletions(-) diff --git a/packages/blade/package.json b/packages/blade/package.json index 72a66b682e5..3e70bb02cf3 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -280,8 +280,8 @@ "typescript-transform-paths": "3.4.7", "@types/body-scroll-lock": "3.1.0", "ramda": "0.29.1", - "@razorpay/i18nify-js": "1.10.3", - "@razorpay/i18nify-react": "4.0.9", + "@razorpay/i18nify-js": "1.12.3", + "@razorpay/i18nify-react": "4.0.12", "plop": "3.1.1", "node-plop": "0.32.0", "svgson": "5.3.1" @@ -300,8 +300,8 @@ "react-hot-toast": "2.4.1", "@gorhom/bottom-sheet": "^4.4.6", "@gorhom/portal": "^1.0.14", - "@razorpay/i18nify-js": "^1.10.3", - "@razorpay/i18nify-react": "^4.0.9" + "@razorpay/i18nify-js": "^1.12.3", + "@razorpay/i18nify-react": "^4.0.12" }, "peerDependenciesMeta": { "react-native": { diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index 1b67e55db18..21402e88c62 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -19,6 +19,49 @@ import { Text } from '~components/Typography'; import { opacity } from '~tokens/global'; import type { FontFamily } from '~tokens/global'; +// /** +// * Pollyfill function to get around +// */ +// const stripTrailingZerosFromParts = ( +// parts: ReturnType, +// ): ReturnType => { +// const decimalPart = parts.rawParts +// .filter(({ type }) => type === 'fraction') +// .map(({ value }) => value) +// .join(''); + +// const hasFraction = parts.rawParts.some(({ type }) => type === 'fraction'); + +// if (hasFraction && /^0+$/.test(decimalPart)) { +// delete parts.decimal; +// delete parts.fraction; +// parts.rawParts = parts.rawParts.filter(({ type }) => type !== 'decimal' && type !== 'fraction'); +// } + +// return parts; +// }; + +// const pollyfilledFormatNumberByParts: typeof formatNumberByParts = (value, options) => { +// const parts = formatNumberByParts(value, options); + +// // { +// // ...options, +// // intlOptions: { +// // ...options?.intlOptions, +// // trailingZeroDisplay: undefined, +// // } + +// // }); + +// console.log({ value, parts }); + +// if (options?.intlOptions?.trailingZeroDisplay === 'stripIfInteger') { +// return stripTrailingZerosFromParts(parts); +// } + +// return parts; +// }; + type AmountCommonProps = { /** * The value to be rendered within the component. diff --git a/yarn.lock b/yarn.lock index b781e1c8c31..95d14803cf4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4334,17 +4334,17 @@ dependencies: "@babel/runtime" "^7.13.10" -"@razorpay/i18nify-js@1.10.3": - version "1.10.3" - resolved "https://registry.yarnpkg.com/@razorpay/i18nify-js/-/i18nify-js-1.10.3.tgz#a42596e7306cf378c3fff4ee90f6fc1d6216f355" - integrity sha512-zP7wRR4x6+kaZm/ptao81Gbw5KraUiswf93yFIHAZzQUAJnLsIPRa/O9Uz2cbDkhz0sF7JPJMGnadxAafrhnxA== +"@razorpay/i18nify-js@1.12.3": + version "1.12.3" + resolved "https://npm.pkg.github.com/download/@razorpay/i18nify-js/1.12.3/6fa86ba0f9277a436df5eae1fa1db9ce3d2bbb6a#6fa86ba0f9277a436df5eae1fa1db9ce3d2bbb6a" + integrity sha512-e5WtYcA9LQAJ+9h4Iasyftj3c6qIg9XrieAgl6vvk1JHFOkGHgoM7EQmo0ztttTOLxwkLp38VTdCI4B1H0fiLg== dependencies: "@internationalized/date" "^3.5.2" -"@razorpay/i18nify-react@4.0.9": - version "4.0.9" - resolved "https://registry.yarnpkg.com/@razorpay/i18nify-react/-/i18nify-react-4.0.9.tgz#3419b000fb0a69b1b6713f6ef42aa50e56cb4051" - integrity sha512-7GR21S8LtTnxKbQsXqyzdvaVsPi+IsOgKr49Vpkvj3Dqdy0qgaLCDt8eHpv+iMndm/4AYMiWn+CL/bwjYlFp5A== +"@razorpay/i18nify-react@4.0.12": + version "4.0.12" + resolved "https://npm.pkg.github.com/download/@razorpay/i18nify-react/4.0.12/e440fb70e3034ef314e6fc404f513035b99d7bbf#e440fb70e3034ef314e6fc404f513035b99d7bbf" + integrity sha512-0q573j1bGN3CcF1UCMfg0JTDZlM9wTiiQEUprRMPviS3QG5yhTRFrswkY3K+9CXf0wHV5Fu4SKOCCQoJHueMMg== "@react-hook/intersection-observer@^3.1.1": version "3.1.1" From 5179a543251057aaf199074042f74947dbbfef61 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 18 Oct 2024 10:18:48 +0530 Subject: [PATCH 09/15] refactor: remove hardcoded story --- .../src/components/Amount/Amount.stories.tsx | 6 +- .../blade/src/components/Amount/Amount.tsx | 76 +++++++++---------- 2 files changed, 36 insertions(+), 46 deletions(-) diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx index b4d3bd91682..14cd45d04ac 100644 --- a/packages/blade/src/components/Amount/Amount.stories.tsx +++ b/packages/blade/src/components/Amount/Amount.stories.tsx @@ -56,11 +56,7 @@ export default { } as Meta; const AmountDefaultTemplate: StoryFn = (args) => { - return ( - - - - ); + return ; }; export const Amount = AmountDefaultTemplate.bind({}); diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index 21402e88c62..b60f0bf7b0b 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -19,48 +19,42 @@ import { Text } from '~components/Typography'; import { opacity } from '~tokens/global'; import type { FontFamily } from '~tokens/global'; -// /** -// * Pollyfill function to get around -// */ -// const stripTrailingZerosFromParts = ( -// parts: ReturnType, -// ): ReturnType => { -// const decimalPart = parts.rawParts -// .filter(({ type }) => type === 'fraction') -// .map(({ value }) => value) -// .join(''); - -// const hasFraction = parts.rawParts.some(({ type }) => type === 'fraction'); - -// if (hasFraction && /^0+$/.test(decimalPart)) { -// delete parts.decimal; -// delete parts.fraction; -// parts.rawParts = parts.rawParts.filter(({ type }) => type !== 'decimal' && type !== 'fraction'); -// } - -// return parts; -// }; - -// const pollyfilledFormatNumberByParts: typeof formatNumberByParts = (value, options) => { -// const parts = formatNumberByParts(value, options); - -// // { -// // ...options, -// // intlOptions: { -// // ...options?.intlOptions, -// // trailingZeroDisplay: undefined, -// // } +/** + * Pollyfill function to get around the node 18 error + * + * This function is maintained by i18nify team. Reach out to them for any change regarding this. + */ +const stripTrailingZerosFromParts = ( + parts: ReturnType, +): ReturnType => { + const decimalPart = parts.rawParts + .filter(({ type }) => type === 'fraction') + .map(({ value }) => value) + .join(''); + + const hasFraction = parts.rawParts.some(({ type }) => type === 'fraction'); + + if (hasFraction && /^0+$/.test(decimalPart)) { + delete parts.decimal; + delete parts.fraction; + parts.rawParts = parts.rawParts.filter(({ type }) => type !== 'decimal' && type !== 'fraction'); + } -// // }); + return parts; +}; -// console.log({ value, parts }); +/** + * Wrapper that uses pollyfill of i18nify team + */ +const pollyfilledFormatNumberByParts: typeof formatNumberByParts = (value, options) => { + const parts = formatNumberByParts(value, options); -// if (options?.intlOptions?.trailingZeroDisplay === 'stripIfInteger') { -// return stripTrailingZerosFromParts(parts); -// } + if (options?.intlOptions?.trailingZeroDisplay === 'stripIfInteger') { + return stripTrailingZerosFromParts(parts); + } -// return parts; -// }; + return parts; +}; type AmountCommonProps = { /** @@ -227,7 +221,7 @@ export const getAmountByParts = ({ }, currency, } as const; - return formatNumberByParts(value, options); + return pollyfilledFormatNumberByParts(value, options); } case 'humanize': { const options = { @@ -238,7 +232,7 @@ export const getAmountByParts = ({ }, currency, } as const; - return formatNumberByParts(value, options); + return pollyfilledFormatNumberByParts(value, options); } default: { @@ -249,7 +243,7 @@ export const getAmountByParts = ({ }, currency, } as const; - return formatNumberByParts(value, options); + return pollyfilledFormatNumberByParts(value, options); } } } catch (err: unknown) { From 57728d86b11a1cea46a3a8eda811b60bd0065900 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 18 Oct 2024 10:20:45 +0530 Subject: [PATCH 10/15] fix: failing tests --- .../src/components/Amount/__tests__/Amount.native.test.tsx | 4 ++-- .../blade/src/components/Amount/__tests__/Amount.web.test.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx index c2090e7ca31..9196921c7d0 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx @@ -120,7 +120,7 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ - compact: 'K', + compact: 'T', currency: '₹', integer: '1', isPrefixSymbol: true, @@ -135,7 +135,7 @@ describe('', () => { }, { type: 'compact', - value: 'K', + value: 'T', }, ], }); diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index 3d8cabe3204..7d6a1501766 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -145,14 +145,14 @@ describe('', () => { it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { setState({ locale: 'en-IN' }); expect(getAmountByParts({ value: 1000.22, suffix: 'humanize', currency: 'INR' })).toEqual({ - compact: 'K', + compact: 'T', currency: '₹', integer: '1', isPrefixSymbol: true, rawParts: [ { type: 'currency', value: '₹' }, { type: 'integer', value: '1' }, - { type: 'compact', value: 'K' }, + { type: 'compact', value: 'T' }, ], }); expect(getAmountByParts({ value: 1000000.0, suffix: 'decimals', currency: 'INR' })).toEqual({ From bd8c4203e9ed3a7b89258c7aac7689a5d1f780ab Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 18 Oct 2024 10:46:38 +0530 Subject: [PATCH 11/15] fix: snapshots --- .../Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap index d91e9c0cce9..549e4573043 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap @@ -2508,7 +2508,7 @@ exports[` should render amount with Humanize value 1`] = ` } > 1 - K + T From 44358d3508f4a76b4bd2a344f93e888257bfb411 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 18 Oct 2024 12:03:57 +0530 Subject: [PATCH 12/15] fix: phone number input compatibility with i18nify --- .../components/Input/PhoneNumberInput/PhoneNumberInput.web.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.web.tsx b/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.web.tsx index 4f25e97f6a0..60b475cdf16 100644 --- a/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.web.tsx +++ b/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.web.tsx @@ -109,6 +109,7 @@ const _PhoneNumberInput: React.ForwardRefRenderFunction !countryCode.includes('-')) // remove the non ISO 3166-1 alpha-2 country codes .map((countryCode) => { return { code: countryCode, From 397b17271420e368b5288cd8351875d7ab9ee158 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 18 Oct 2024 12:11:17 +0530 Subject: [PATCH 13/15] feat: snapshots update --- .../__snapshots__/PhoneNumberInput.ssr.test.tsx.snap | 4 ++-- .../__snapshots__/PhoneNumberInput.web.test.tsx.snap | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/blade/src/components/Input/PhoneNumberInput/__tests__/__snapshots__/PhoneNumberInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/PhoneNumberInput/__tests__/__snapshots__/PhoneNumberInput.ssr.test.tsx.snap index be2f461c3e3..cffdcaf4036 100644 --- a/packages/blade/src/components/Input/PhoneNumberInput/__tests__/__snapshots__/PhoneNumberInput.ssr.test.tsx.snap +++ b/packages/blade/src/components/Input/PhoneNumberInput/__tests__/__snapshots__/PhoneNumberInput.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render 1`] = `"

+91

"`; +exports[` should render 1`] = `"

+91

"`; exports[` should render 2`] = ` .c0.c0.c0.c0.c0 { @@ -604,7 +604,7 @@ exports[` should render 2`] = ` alt="" loading="lazy" role="presentation" - src="https://unpkg.com/@razorpay/i18nify-js/lib/assets/flags/IN.svg" + src="https://unpkg.com/@razorpay/i18nify-js/lib/assets/flags/in.svg" width="20px" />
should render 1`] = ` alt="" loading="lazy" role="presentation" - src="https://unpkg.com/@razorpay/i18nify-js/lib/assets/flags/IN.svg" + src="https://unpkg.com/@razorpay/i18nify-js/lib/assets/flags/in.svg" width="20px" />
should render large size 1`] = ` alt="" loading="lazy" role="presentation" - src="https://unpkg.com/@razorpay/i18nify-js/lib/assets/flags/IN.svg" + src="https://unpkg.com/@razorpay/i18nify-js/lib/assets/flags/in.svg" width="24px" />
Date: Fri, 18 Oct 2024 12:37:15 +0530 Subject: [PATCH 14/15] fix: CI installation error --- yarn.lock | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index 95d14803cf4..89e65e6d1f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2652,9 +2652,9 @@ integrity sha512-mtup3wVKia3ZwULPHcbs4Mor8Voi+iIXEWD7wCNbIO6lYR62oPCTQyrddi5OMYVXHzeCSoneZwJuS8sBvlEwDw== "@internationalized/date@^3.5.2": - version "3.5.2" - resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.5.2.tgz#d760ace32bb47e869b8c607a4a786c8b208aacc2" - integrity sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ== + version "3.5.6" + resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.5.6.tgz#0833c2fa75efb3573f4e3bf10e3895f1019e87dd" + integrity sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw== dependencies: "@swc/helpers" "^0.5.0" @@ -4336,14 +4336,14 @@ "@razorpay/i18nify-js@1.12.3": version "1.12.3" - resolved "https://npm.pkg.github.com/download/@razorpay/i18nify-js/1.12.3/6fa86ba0f9277a436df5eae1fa1db9ce3d2bbb6a#6fa86ba0f9277a436df5eae1fa1db9ce3d2bbb6a" + resolved "https://registry.yarnpkg.com/@razorpay/i18nify-js/-/i18nify-js-1.12.3.tgz#6fa86ba0f9277a436df5eae1fa1db9ce3d2bbb6a" integrity sha512-e5WtYcA9LQAJ+9h4Iasyftj3c6qIg9XrieAgl6vvk1JHFOkGHgoM7EQmo0ztttTOLxwkLp38VTdCI4B1H0fiLg== dependencies: "@internationalized/date" "^3.5.2" "@razorpay/i18nify-react@4.0.12": version "4.0.12" - resolved "https://npm.pkg.github.com/download/@razorpay/i18nify-react/4.0.12/e440fb70e3034ef314e6fc404f513035b99d7bbf#e440fb70e3034ef314e6fc404f513035b99d7bbf" + resolved "https://registry.yarnpkg.com/@razorpay/i18nify-react/-/i18nify-react-4.0.12.tgz#e440fb70e3034ef314e6fc404f513035b99d7bbf" integrity sha512-0q573j1bGN3CcF1UCMfg0JTDZlM9wTiiQEUprRMPviS3QG5yhTRFrswkY3K+9CXf0wHV5Fu4SKOCCQoJHueMMg== "@react-hook/intersection-observer@^3.1.1": @@ -6787,9 +6787,9 @@ integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ== "@swc/helpers@^0.5.0": - version "0.5.8" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.8.tgz#65d56b1961487fd99795ffd8c68edb7a591571fb" - integrity sha512-lruDGw3pnfM3wmZHeW7JuhkGQaJjPyiKjxeGhdmfoOT53Ic9qb5JLDNaK2HUdl1zLDeX28H221UvKjfdvSLVMg== + version "0.5.13" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.13.tgz#33e63ff3cd0cade557672bd7888a39ce7d115a8c" + integrity sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w== dependencies: tslib "^2.4.0" From d9e314d0093d5bc9827a15d0254aa11ad412d798 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Fri, 18 Oct 2024 13:00:31 +0530 Subject: [PATCH 15/15] fix: snapshots, add more tests for negative amount --- .../Amount/__tests__/Amount.native.test.tsx | 5 + .../Amount/__tests__/Amount.web.test.tsx | 7 +- .../__snapshots__/Amount.native.test.tsx.snap | 211 ++++++++++++++++++ .../__snapshots__/Amount.web.test.tsx.snap | 140 ++++++++++++ .../src/components/Amount/__tests__/mock.ts | 2 + 5 files changed, 364 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx index 9196921c7d0..92e659bcacc 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx @@ -20,6 +20,11 @@ describe('', () => { expect(toJSON()).toMatchSnapshot(); }); + it('should render Amount with negative sign', () => { + const { toJSON } = renderWithTheme(); + expect(toJSON()).toMatchSnapshot(); + }); + it('should throw an error when a string is passed', () => { // @ts-expect-error testing failure case when value is passed as a string expect(() => renderWithTheme()).toThrow( diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index 7d6a1501766..3c895ab0097 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -20,6 +20,11 @@ describe('', () => { expect(container).toMatchSnapshot(); }); + it('should render Amount with negative value', () => { + const { container } = renderWithTheme(); + expect(container).toMatchSnapshot(); + }); + it('should accept testID', () => { const { getByTestId } = renderWithTheme(); @@ -217,7 +222,7 @@ describe('', () => { }); }); - it.each(AMOUNT_SUFFIX_TEST_SET.filter((item) => item.output.includes('Mio')))( + it.each(AMOUNT_SUFFIX_TEST_SET)( `should render different outputs in Amount for different suffix values`, (item) => { const { getByTestId } = renderWithTheme( diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap index 549e4573043..90d9e7fe0a4 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap @@ -356,6 +356,217 @@ exports[` should render Amount with default props 1`] = ` `; +exports[` should render Amount with negative sign 1`] = ` + + + + + - + + + ₹ + + + + 10,000 + + + . + 00 + + + + + +`; + exports[` should render MYR currency Amount 1`] = ` should render Amount with default props 1`] = `
`; +exports[` should render Amount with negative value 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + position: relative; +} + +.c2.c2.c2.c2.c2 { + color: hsla(212,39%,16%,1); + font-family: "Inter","Inter Fallback Arial",Arial; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + margin-right: 4px; + margin-left: 4px; +} + +.c3.c3.c3.c3.c3 { + color: hsla(212,39%,16%,1); + font-family: "Inter","Inter Fallback Arial",Arial; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; + margin-right: 2px; +} + +.c4.c4.c4.c4.c4 { + color: hsla(212,39%,16%,1); + font-family: "Inter","Inter Fallback Arial",Arial; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(212,39%,16%,1); + font-family: "Inter","Inter Fallback Arial",Arial; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; +} + +
+
+
+ + - + + + ₹ + + + 10,000 + + + . + 00 + +
+
+
+`; + exports[` should render MYR currency Amount 1`] = ` .c0.c0.c0.c0.c0 { display: -webkit-inline-box; diff --git a/packages/blade/src/components/Amount/__tests__/mock.ts b/packages/blade/src/components/Amount/__tests__/mock.ts index b2e116640e3..3e41eb6317e 100644 --- a/packages/blade/src/components/Amount/__tests__/mock.ts +++ b/packages/blade/src/components/Amount/__tests__/mock.ts @@ -13,4 +13,6 @@ export const AMOUNT_SUFFIX_TEST_SET: { { value: 2.077, suffix: 'decimals', output: '₹2.08', locale: 'en-IN' }, { value: 2.3, suffix: 'decimals', output: '₹2.30', locale: 'en-IN' }, { value: 1000000.12, suffix: 'decimals', output: '₹10,00,000.12', locale: 'en-IN' }, + { value: -1000000.12, suffix: 'decimals', output: '-₹10,00,000.12', locale: 'en-IN' }, + { value: -1000000.12, suffix: 'humanize', output: '-1Mio.₹', locale: 'de-De' }, ];