Evaluate using TransactionLineItem vs extracting invoice item to its own component
We've some repeated code in renew subscription form
, dotcom subscription form
and in add seats invoice
where we show the invoice data.
We need to consider using TransactionLineItem
vs extracting the repeated code into its own component.
The idea started in discussion from !2197
TransactionLineItem
<div>
<hr v-if="topBorderEnabled" class="gl-my-5" />
<div class="gl-display-flex gl-justify-content-space-between">
<strong data-testid="label">{{ label }}</strong>
<div class="gl-my-auto">
<gl-loading-icon v-if="isLoading" />
<span v-else-if="value" data-testid="value">{{ value }}</span>
</div>
</div>
<div v-if="description && !isLoading" data-testid="description" class="text-muted gl-mt-3">
{{ description }}
</div>
</div>
[what's used in the renew transactions]
<div class="d-flex justify-content-between py-3 border-top border-light">
<h3 class="gl-text-black-normal gl-my-auto">Sub-total</h3>
<gl-loading-icon v-if="isLoading" inline />
<p v-else-if="subTotal" class="gl-text-gray-900 gl-font-lg gl-my-auto">
{{ formatMoney(subTotal) }}
</p>
</div>
Availability & Testing
Edited by Dan Davison