Add VAT Included line item for inclusive taxes

.changeset/wet-plants-float.md

@@ -0,0 +1,6 @@
+---
+"@godaddy/localizations": patch
+"@godaddy/react": patch
+---
+
+Add line item for inclusive taxes during checkout

packages/localizations/src/deDe.ts

@@ -168,6 +168,7 @@ export const deDe = {
     shipping: 'Versand',
     tip: 'Trinkgeld',
     estimatedTaxes: 'Geschätzte Steuern',
+    vatIncluded: 'MwSt. enthalten',
     fees: 'Gebühren',
     totalDue: 'Gesamtbetrag',
     orderSummary: 'Bestellübersicht',

packages/localizations/src/enAu.ts

@@ -168,6 +168,7 @@ export const enAu = {
     shipping: 'Shipping',
     tip: 'Tip',
     estimatedTaxes: 'Estimated GST',
+    vatIncluded: 'GST included',
     fees: 'Fees',
     totalDue: 'Total Due',
     orderSummary: 'Order Summary',

packages/localizations/src/enIe.ts

@@ -168,6 +168,7 @@ export const enIe = {
     shipping: 'Shipping',
     tip: 'Tip',
     estimatedTaxes: 'Estimated VAT',
+    vatIncluded: 'VAT included',
     fees: 'Fees',
     totalDue: 'Total Due',
     orderSummary: 'Order Summary',

packages/localizations/src/enUs.ts

@@ -168,6 +168,7 @@ export const enUs = {
     shipping: 'Shipping',
     tip: 'Tip',
     estimatedTaxes: 'Estimated taxes',
+    vatIncluded: 'VAT included',
     fees: 'Fees',
     totalDue: 'Total Due',
     orderSummary: 'Order Summary',

packages/localizations/src/esAr.ts

@@ -169,6 +169,7 @@ export const esAr = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a Pagar',
     orderSummary: 'Resumen del Pedido',

packages/localizations/src/esCl.ts

@@ -169,6 +169,7 @@ export const esCl = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a Pagar',
     orderSummary: 'Resumen del Pedido',

packages/localizations/src/esCo.ts

@@ -169,6 +169,7 @@ export const esCo = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a pagar',
     orderSummary: 'Resumen del pedido',

packages/localizations/src/esEs.ts

@@ -169,6 +169,7 @@ export const esEs = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a pagar',
     orderSummary: 'Resumen del pedido',

packages/localizations/src/esMx.ts

@@ -169,6 +169,7 @@ export const esMx = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a Pagar',
     orderSummary: 'Resumen del Pedido',

packages/localizations/src/esPe.ts

@@ -169,6 +169,7 @@ export const esPe = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a Pagar',
     orderSummary: 'Resumen del Pedido',

packages/localizations/src/esUs.ts

@@ -169,6 +169,7 @@ export const esUs = {
     shipping: 'Envío',
     tip: 'Propina',
     estimatedTaxes: 'Impuestos estimados',
+    vatIncluded: 'IVA incluido',
     fees: 'Cargos',
     totalDue: 'Total a Pagar',
     orderSummary: 'Resumen del Pedido',

packages/localizations/src/frCa.ts

@@ -169,6 +169,7 @@ export const frCa = {
     shipping: 'Expédition',
     tip: 'Pourboire',
     estimatedTaxes: 'Taxes estimées',
+    vatIncluded: 'TVA incluse',
     fees: 'Frais',
     totalDue: 'Total à payer',
     orderSummary: 'Résumé de la commande',

packages/localizations/src/frFr.ts

@@ -169,6 +169,7 @@ export const frFr = {
     shipping: 'Expédition',
     tip: 'Pourboire',
     estimatedTaxes: 'Taxes estimées',
+    vatIncluded: 'TVA incluse',
     fees: 'Frais',
     totalDue: 'Total à payer',
     orderSummary: 'Récapitulatif de la commande',

packages/localizations/src/idId.ts

@@ -168,6 +168,7 @@ export const idId = {
     shipping: 'Pengiriman',
     tip: 'Tip',
     estimatedTaxes: 'Perkiraan pajak',
+    vatIncluded: 'Termasuk PPN',
     fees: 'Biaya',
     totalDue: 'Total Pembayaran',
     orderSummary: 'Ringkasan Pesanan',

packages/localizations/src/itIt.ts

@@ -169,6 +169,7 @@ export const itIt = {
     shipping: 'Spedizione',
     tip: 'Mancia',
     estimatedTaxes: 'Tasse stimate',
+    vatIncluded: 'IVA inclusa',
     fees: 'Commissioni',
     totalDue: 'Totale Dovuto',
     orderSummary: 'Riepilogo Ordine',

packages/localizations/src/ptBr.ts

@@ -168,6 +168,7 @@ export const ptBr = {
     shipping: 'Envio',
     tip: 'Gorjeta',
     estimatedTaxes: 'Impostos estimados',
+    vatIncluded: 'IVA incluído',
     fees: 'Taxas',
     totalDue: 'Total a Pagar',
     orderSummary: 'Resumo do Pedido',

packages/localizations/src/qaPs.ts

@@ -169,6 +169,7 @@ export const qaPs = {
     shipping: '[Šhîþþîñg Çöšţš]',
     tip: '[Ţîþ Âmöüñţ]',
     estimatedTaxes: '[Ëšţîmâţëd ţâxëš çâlçülâţîöñ]',
+    vatIncluded: '[VÂŢ îñçlüdëd]',
     fees: '[Fëëš Çhârgëd]',
     totalDue: '[Tötâl Âmöüñţ Düë]',
     orderSummary: '[Ördër Šümmârÿ Dëţâîlš]',

packages/localizations/src/trTr.ts

@@ -168,6 +168,7 @@ export const trTr = {
     shipping: 'Kargo',
     tip: 'Bahşiş',
     estimatedTaxes: 'Tahmini vergiler',
+    vatIncluded: 'KDV dahil',
     fees: 'Ücretler',
     totalDue: 'Ödenecek Toplam',
     orderSummary: 'Sipariş Özeti',

packages/localizations/src/viVn.ts

@@ -168,6 +168,7 @@ export const viVn = {
     shipping: 'Vận chuyển',
     tip: 'Tip',
     estimatedTaxes: 'Thuế ước tính',
+    vatIncluded: 'Đã bao gồm VAT',
     fees: 'Phí',
     totalDue: 'Tổng cộng',
     orderSummary: 'Tóm tắt đơn hàng',

packages/localizations/src/zhCn.ts

@@ -163,6 +163,7 @@ export const zhCn = {
     shipping: '配送费',
     tip: '小费',
     estimatedTaxes: '预估税费',
+    vatIncluded: '已含增值税',
     fees: '费用',
     totalDue: '应付总计',
     orderSummary: '订单摘要',

packages/localizations/src/zhSg.ts

@@ -163,6 +163,7 @@ export const zhSg = {
     shipping: '运费',
     tip: '小费',
     estimatedTaxes: '预估税费',
+    vatIncluded: '已含消费税',
     fees: '费用',
     totalDue: '应付总额',
     orderSummary: '订单摘要',

packages/react/src/components/checkout/__tests__/checkout-totals-summary.test.tsx

@@ -66,6 +66,47 @@ describe('Checkout totals and order summary UI', () => {
     expect(document.body).toHaveTextContent(/estimated taxes/i);
     expect(document.body).toHaveTextContent(/fees/i);
     expect(document.body).toHaveTextContent(/total due/i);
+    expect(document.body).not.toHaveTextContent(/vat included/i);
+  });
+
+  it('renders the total of included tax constituents separately from additive taxes', async () => {
+    renderCheckout({
+      draftOrderOverrides: {
+        totals: totals({
+          taxTotal: { value: 456, currencyCode: 'USD' },
+        }),
+        taxes: [
+          {
+            id: 'included-tax-1',
+            name: 'VAT',
+            included: true,
+            exempted: false,
+            ratePercentage: '2.5',
+            amount: { value: 100, currencyCode: 'USD' },
+          },
+          {
+            id: 'additive-tax',
+            name: 'Sales tax',
+            included: false,
+            exempted: false,
+            ratePercentage: '5',
+            amount: { value: 456, currencyCode: 'USD' },
+          },
+          {
+            id: 'included-tax-2',
+            name: 'VAT surcharge',
+            included: true,
+            exempted: false,
+            ratePercentage: '0.5',
+            amount: { value: 23, currencyCode: 'USD' },
+          },
+        ],
+      },
+    });
+    await waitForCheckoutReady();
+
+    expect(document.body).toHaveTextContent(/vat included/i);
+    expect(screen.getAllByText('$1.23').length).toBeGreaterThan(0);
   });
 
   it('renders loading skeleton rows for in-flight discount, shipping, tax, and fee mutations', async () => {

packages/react/src/components/checkout/form/checkout-form.tsx

@@ -25,7 +25,10 @@ import {
 import { NotesForm } from '@/components/checkout/notes/notes-form';
 import { DraftOrderSyncProvider } from '@/components/checkout/order/draft-order-sync-provider';
 import { isFreeOrderTotal } from '@/components/checkout/order/is-free-order';
-import { useDraftOrderTotals } from '@/components/checkout/order/use-draft-order';
+import {
+  useDraftOrderIncludedTaxTotal,
+  useDraftOrderTotals,
+} from '@/components/checkout/order/use-draft-order';
 import { BillingPolicyTransitionController } from '@/components/checkout/payment/billing-policy-transition-controller';
 import { PaymentForm } from '@/components/checkout/payment/payment-form';
 import {
@@ -200,6 +203,7 @@ export function CheckoutForm({
   }, [dirtyFields, form, formValues, isCheckoutBusy]);
 
   const draftOrderTotalsQuery = useDraftOrderTotals();
+  const { data: vatIncluded = 0 } = useDraftOrderIncludedTaxTotal();
 
   const { data: totals, isLoading: totalsLoading } = draftOrderTotalsQuery;
   validationContextRef.current.totals = totals;
@@ -551,6 +555,7 @@ export function CheckoutForm({
                                 currencyCode={currencyCode}
                                 tip={tipTotal}
                                 taxes={taxTotal}
+                                vatIncluded={vatIncluded}
                                 fees={feeTotal}
                                 isTaxLoading={isUpdatingTaxes}
                                 isFeeLoading={isUpdatingFees}
@@ -622,6 +627,7 @@ export function CheckoutForm({
                             currencyCode={currencyCode}
                             tip={tipTotal}
                             taxes={taxTotal}
+                            vatIncluded={vatIncluded}
                             fees={feeTotal}
                             isTaxLoading={isUpdatingTaxes}
                             isFeeLoading={isUpdatingFees}
@@ -656,6 +662,7 @@ export function CheckoutForm({
                     currencyCode={currencyCode}
                     tip={tipTotal}
                     taxes={taxTotal}
+                    vatIncluded={vatIncluded}
                     fees={feeTotal}
                     isTaxLoading={isUpdatingTaxes}
                     isFeeLoading={isUpdatingFees}

packages/react/src/components/checkout/order/use-draft-order.ts

@@ -1,5 +1,6 @@
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 import { useCheckoutContext } from '@/components/checkout/checkout';
+import { getIncludedTaxTotal } from '@/components/checkout/totals/utils/get-included-tax-total';
 import { checkoutQueryKeys } from '@/components/checkout/utils/query-keys';
 import { useGoDaddyContext } from '@/godaddy-provider';
 import { getDraftOrder } from '@/lib/godaddy/godaddy';
@@ -63,6 +64,14 @@ export function useDraftOrderTotals() {
   );
 }
 
+export function useDraftOrderIncludedTaxTotal() {
+  return useDraftOrder<number>(
+    data =>
+      getIncludedTaxTotal(data.checkoutSession?.draftOrder?.taxes ?? null),
+    'draft-order'
+  );
+}
+
 export function useDraftOrderShipping() {
   return useDraftOrder<ShippingLines | null>(
     data => data.checkoutSession?.draftOrder?.shippingLines?.[0] ?? null,

packages/react/src/components/checkout/payment/payment-form.tsx

@@ -596,6 +596,7 @@ export function PaymentForm(
             currencyCode={props.currencyCode}
             tip={props.tip}
             taxes={props.taxes}
+            vatIncluded={props.vatIncluded}
             fees={props.fees}
             isTaxLoading={props.isTaxLoading}
             isFeeLoading={props.isFeeLoading}

packages/react/src/components/checkout/totals/totals.tsx

@@ -17,6 +17,7 @@ export interface DraftOrderTotalsProps {
   total?: number;
   tip?: number;
   taxes?: number;
+  vatIncluded?: number;
   isTaxLoading?: boolean;
   fees?: number;
   isFeeLoading?: boolean;
@@ -72,6 +73,7 @@ export function DraftOrderTotals({
   total = 0,
   tip = 0,
   taxes = 0,
+  vatIncluded = 0,
   fees = 0,
   enableDiscounts = false,
   enableTaxes = false,
@@ -155,6 +157,18 @@ export function DraftOrderTotals({
               inputInMinorUnits={inputInMinorUnits}
             />
           ))}
+        {vatIncluded > 0 ? (
+          isTaxLoading ? (
+            <TotalLineItemSkeleton title={t.totals.vatIncluded} />
+          ) : (
+            <TotalLineItem
+              currencyCode={currencyCode}
+              title={t.totals.vatIncluded}
+              value={vatIncluded}
+              inputInMinorUnits={inputInMinorUnits}
+            />
+          )
+        ) : null}
         <Target id='checkout.summary.totals.fees.before' />
         {enableFees &&
           (isFeeLoading ? (

packages/react/src/components/checkout/totals/utils/get-included-tax-total.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { getIncludedTaxTotal } from './get-included-tax-total';
+
+describe('getIncludedTaxTotal', () => {
+  it('totals only included tax constituents', () => {
+    expect(
+      getIncludedTaxTotal([
+        { included: true, additional: false, amount: { value: 125 } },
+        { included: false, additional: true, amount: { value: 300 } },
+        { included: true, additional: null, amount: { value: 75 } },
+        { included: true, additional: true, amount: { value: 500 } },
+      ])
+    ).toBe(200);
+  });
+
+  it('returns zero when included taxes have no positive amount', () => {
+    expect(getIncludedTaxTotal()).toBe(0);
+    expect(getIncludedTaxTotal([{ included: true, amount: null }])).toBe(0);
+  });
+});

packages/react/src/components/checkout/totals/utils/get-included-tax-total.ts

@@ -0,0 +1,20 @@
+interface TaxAmount {
+  included?: boolean | null;
+  additional?: boolean | null;
+  amount?: {
+    value?: number | null;
+  } | null;
+}
+
+export function getIncludedTaxTotal(
+  taxes?: readonly TaxAmount[] | null
+): number {
+  return (
+    taxes?.reduce(
+      (total, tax) =>
+        total +
+        (tax.included && tax.additional !== true ? tax.amount?.value || 0 : 0),
+      0
+    ) ?? 0
+  );
+}

packages/react/src/components/storefront/cart.tsx

@@ -3,6 +3,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Loader2, ShoppingCart } from 'lucide-react';
 import type { Product } from '@/components/checkout/line-items/line-items';
+import { getIncludedTaxTotal } from '@/components/checkout/totals/utils/get-included-tax-total';
 import { CartLineItems } from '@/components/storefront/cart-line-items';
 import { CartTotals } from '@/components/storefront/cart-totals';
 import { Button } from '@/components/ui/button';
@@ -110,6 +111,7 @@ export function Cart({
   const subtotal = order?.totals?.subTotal?.value || 0;
   const shipping = order?.totals?.shippingTotal?.value || 0;
   const taxes = order?.totals?.taxTotal?.value || 0;
+  const vatIncluded = getIncludedTaxTotal(order?.taxes);
   const discount = order?.totals?.discountTotal?.value || 0;
   const total = order?.totals?.total?.value || 0;
 
@@ -122,6 +124,7 @@ export function Cart({
     total,
     tip: 0,
     taxes,
+    vatIncluded,
     enableDiscounts: false,
     enableTaxes: true,
     isTaxLoading: false,