diff --git a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html index 0073733591..df55c738ed 100644 --- a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html +++ b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.html @@ -3,36 +3,35 @@
-
+
-
+
-
+
-
+
-
-
+
diff --git a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss index 73cfd41e92..38fa0623b8 100644 --- a/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss +++ b/src/app/fyle/personal-cards/transactions-shimmer/transactions-shimmer.component.scss @@ -1,6 +1,7 @@ .shimmer { &--section { margin-bottom: 30px; + padding: 12px; } &--date { @@ -15,16 +16,18 @@ } &--desc { - width: 65%; - height: 22px; + width: 100%; + height: 20px; } &--amount { - width: 25%; + width: 35%; + height: 22px; + margin-bottom: 8px; } &--sub-header { - width: 35%; + width: 45%; height: 20px; } } diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html index 09827d9d35..4b36601a15 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.html @@ -13,39 +13,55 @@
-
- {{ description }} -
-
- Create expense - View expense - - - + + + + +
+ +
+ {{ description }} +
+ + +
+ {{ currency }} + + + {{ { value: amount, currencyCode: currency, skipSymbol: true } | exactCurrency }} + + + DR + CR + +
+ + +
+ Create expense + View expense + + + +
-
- {{ currency }} - - {{ amount | currency : currency : '' }} - - - DR - CR - -
diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss index 75d9306fdf..ccb17d3de5 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.scss @@ -2,20 +2,17 @@ .personal-card-transaction { &--date { - color: $grey-light; + color: $black-light; font-size: 14px; - padding: 14px 0 4px 12px; + padding: 24px 16px 16px 16px; font-weight: 500; - - &__from-reports { - background-color: $pure-white; - } + background-color: $white; } &--body { background-color: $pure-white; min-height: 99px; - padding: 24px 4px 24px 12px; + padding: 12px; } &--deatils-block { @@ -41,15 +38,28 @@ } &--details { + display: flex; + justify-content: flex-start; + gap: 8px; flex-grow: 3; margin: 2px 25px 0px 0px; overflow: hidden; } + &--list-icon { + width: 16px; + height: 16px; + padding-top: 2px; + } + + &--vendor-amount-container { + max-width: 90%; + } + &--vendor { color: $black; - font-size: 18px; - font-weight: 500; + font-size: 14px; + font-weight: 400; line-height: 1.3; white-space: nowrap; overflow: hidden; @@ -57,10 +67,9 @@ } &--button { - color: $text-button-grey; + color: $brand-primary; font-size: 14px; line-height: 18px; - margin-top: 6px; font-weight: 500; &__not-filled { @@ -71,10 +80,11 @@ &--currency-amount-container { white-space: nowrap; flex-grow: 1; + margin: 10px 0; } &--currency { - color: $black-light; + color: $black; font-weight: 500; font-size: 16px; line-height: 20px; @@ -83,15 +93,15 @@ &--amount { color: $black; - font-size: 20px; + font-size: 16px; line-height: 26px; margin-right: 2px; font-weight: 500; } &--type { - color: $grey-light; - font-size: 12px; + color: $black-light; + font-size: 10px; line-height: 1.3; margin-right: 15px; font-weight: 400; diff --git a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts index 7f74196afe..f74c86bd39 100644 --- a/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts +++ b/src/app/shared/components/personal-card-transaction/personal-card-transaction.component.spec.ts @@ -4,6 +4,11 @@ import { PersonalCardTransactionComponent } from './personal-card-transaction.co import { IonicModule } from '@ionic/angular'; import { DateFormatPipe } from '../../pipes/date-format.pipe'; import { getElementBySelector, getTextContent } from 'src/app/core/dom-helpers'; +import { ExactCurrencyPipe } from '../../pipes/exact-currency.pipe'; +import { FyCurrencyPipe } from '../../pipes/fy-currency.pipe'; +import { CurrencyPipe } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { MatIconTestingModule } from '@angular/material/icon/testing'; describe('PersonalCardTransactionComponent', () => { let component: PersonalCardTransactionComponent; @@ -12,13 +17,15 @@ describe('PersonalCardTransactionComponent', () => { beforeEach(waitForAsync(() => { const dateFormatPipeSpy = jasmine.createSpyObj('DateFormatPipe', ['transform']); TestBed.configureTestingModule({ - declarations: [PersonalCardTransactionComponent, DateFormatPipe], - imports: [IonicModule.forRoot(), IconModule], + declarations: [PersonalCardTransactionComponent, DateFormatPipe, ExactCurrencyPipe, FyCurrencyPipe], + imports: [IonicModule.forRoot(), IconModule, MatIconTestingModule, MatIconModule], providers: [ { provide: DateFormatPipe, useValue: dateFormatPipeSpy, }, + FyCurrencyPipe, + CurrencyPipe, ], }).compileComponents(); @@ -75,12 +82,12 @@ describe('PersonalCardTransactionComponent', () => { it('should return true when the transaction is selected', () => { component.selectedElements = ['btxn4xVrxJS1Kz', 'btxnspKO99BGrB']; component.selectAll = true; - expect(component.isSelected).toBe(true); + expect(component.isSelected).toBeTrue(); }); it('should return false when the transaction is not selected', () => { component.txnId = 'some-other-txn-id'; - expect(component.isSelected).toBe(false); + expect(component.isSelected).toBeFalse(); }); }); @@ -115,14 +122,14 @@ describe('PersonalCardTransactionComponent', () => { it('should display the currency, amount, and type', () => { component.currency = 'USD'; - component.amount = 123.45; + component.amount = 123678965.45; component.type = 'debit'; fixture.detectChanges(); const currencyElement = getElementBySelector(fixture, '.personal-card-transaction--currency'); expect(getTextContent(currencyElement)).toEqual('USD'); const amountElement = getElementBySelector(fixture, '.personal-card-transaction--amount'); - expect(getTextContent(amountElement)).toEqual('123.45'); + expect(getTextContent(amountElement)).toEqual('123,678,965.45'); const typeElement = getElementBySelector(fixture, '.personal-card-transaction--type'); expect(getTextContent(typeElement)).toEqual('DR');