feat: add functionality to open and view invoices

chore: pr rework

src/components/Payment/Payment.module.scss

@@ -20,6 +20,15 @@
   }
 }
 
+.transactionDetails {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > div {
+    margin-left: variables.$base-spacing;
+  }
+}
+
 .price {
   font-size: 14px;
   line-height: 18px;

src/components/Payment/Payment.test.tsx

@@ -9,17 +9,9 @@ import subscription from '#test/fixtures/subscription.json';
 import type { Customer } from '#types/account';
 import type { PaymentDetail, Subscription, Transaction } from '#types/subscription';
 import { renderWithRouter } from '#test/testUtils';
-import * as checkoutController from '#src/stores/CheckoutController';
 
 describe('<Payment>', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
   test('renders and matches snapshot', () => {
-    const spy = vi.spyOn(checkoutController, 'getSubscriptionSwitches');
-    spy.mockResolvedValue(undefined);
-
     const { container } = renderWithRouter(
       <Payment
         accessModel="AVOD"
@@ -31,6 +23,7 @@ describe('<Payment>', () => {
         showAllTransactions={false}
         isLoading={false}
         offerSwitchesAvailable={false}
+        onShowReceiptClick={vi.fn()}
       />,
     );
 

src/components/Payment/Payment.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
-import { getSubscriptionSwitches } from '../../stores/CheckoutController';
+import IconButton from '../IconButton/IconButton';
+import ExternalLink from '../../icons/ExternalLink';
 
 import styles from './Payment.module.scss';
 
@@ -27,13 +28,15 @@ type Props = {
   customer: Customer;
   isLoading: boolean;
   offerSwitchesAvailable: boolean;
+  onShowReceiptClick: (transactionId: string) => void;
   panelClassName?: string;
   panelHeaderClassName?: string;
   onShowAllTransactionsClick?: () => void;
   onUpgradeSubscriptionClick?: () => void;
   showAllTransactions: boolean;
   canUpdatePaymentMethod: boolean;
   canRenewSubscription?: boolean;
+  canShowReceipts?: boolean;
 };
 
 const Payment = ({
@@ -47,7 +50,9 @@ const Payment = ({
   panelHeaderClassName,
   onShowAllTransactionsClick,
   showAllTransactions,
+  onShowReceiptClick,
   canRenewSubscription = false,
+  canShowReceipts = false,
   canUpdatePaymentMethod,
   onUpgradeSubscriptionClick,
   offerSwitchesAvailable,
@@ -90,10 +95,6 @@ const Payment = ({
     }
   }
 
-  useEffect(() => {
-    getSubscriptionSwitches();
-  }, []);
-
   return (
     <>
       {accessModel === 'SVOD' && (
@@ -188,11 +189,18 @@ const Payment = ({
                       method: transaction.paymentMethod,
                     })}
                 </p>
-                <p>
-                  {transaction.transactionId}
-                  <br />
-                  {formatDate(transaction.transactionDate)}
-                </p>
+                <div className={styles.transactionDetails}>
+                  <p>
+                    {transaction.transactionId}
+                    <br />
+                    {formatDate(transaction.transactionDate)}
+                  </p>
+                  {canShowReceipts && (
+                    <IconButton aria-label={t('user:payment.show_receipt')} onClick={() => !isLoading && onShowReceiptClick(transaction.transactionId)}>
+                      <ExternalLink />
+                    </IconButton>
+                  )}
+                </div>
               </div>
             ))}
             {!showAllTransactions && hasMoreTransactions ? (

src/components/Payment/__snapshots__/Payment.test.tsx.snap

@@ -73,11 +73,15 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         <br />
         user:payment.price_payed_with
       </p>
-      <p>
-        T712014024
-        <br />
-        5/5/2021
-      </p>
+      <div
+        class="_transactionDetails_c57ff5"
+      >
+        <p>
+          T712014024
+          <br />
+          5/5/2021
+        </p>
+      </div>
     </div>
     <div
       class="_infoBox_c57ff5"
@@ -92,11 +96,15 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         <br />
         user:payment.price_payed_with
       </p>
-      <p>
-        T177974068
-        <br />
-        5/5/2021
-      </p>
+      <div
+        class="_transactionDetails_c57ff5"
+      >
+        <p>
+          T177974068
+          <br />
+          5/5/2021
+        </p>
+      </div>
     </div>
     <div
       class="_infoBox_c57ff5"
@@ -111,11 +119,15 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         <br />
         user:payment.price_payed_with
       </p>
-      <p>
-        T996601696
-        <br />
-        5/5/2021
-      </p>
+      <div
+        class="_transactionDetails_c57ff5"
+      >
+        <p>
+          T996601696
+          <br />
+          5/5/2021
+        </p>
+      </div>
     </div>
   </div>
 </div>

src/icons/ExternalLink.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
+  </g>,
+);

src/pages/User/User.tsx

@@ -3,9 +3,6 @@ import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 
-import { useCheckoutStore } from '../../stores/CheckoutStore';
-import { addQueryParam } from '../../utils/location';
-
 import styles from './User.module.scss';
 
 import PlaylistContainer from '#src/containers/PlaylistContainer/PlaylistContainer';
@@ -24,8 +21,11 @@ import AccountComponent from '#components/Account/Account';
 import Button from '#components/Button/Button';
 import Favorites from '#components/Favorites/Favorites';
 import type { PlaylistItem } from '#types/playlist';
-import { logout } from '#src/stores/AccountController';
+import { getReceipt, logout } from '#src/stores/AccountController';
 import { clear as clearFavorites } from '#src/stores/FavoritesController';
+import { getSubscriptionSwitches } from '#src/stores/CheckoutController';
+import { useCheckoutStore } from '#src/stores/CheckoutStore';
+import { addQueryParam } from '#src/utils/location';
 
 const User = (): JSX.Element => {
   const { accessModel, favoritesList } = useConfigStore(
@@ -40,6 +40,8 @@ const User = (): JSX.Element => {
   const breakpoint = useBreakpoint();
   const [clearFavoritesOpen, setClearFavoritesOpen] = useState(false);
   const [showAllTransactions, setShowAllTransactions] = useState(false);
+  const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);
+
   const isLargeScreen = breakpoint > Breakpoint.md;
   const {
     user: customer,
@@ -50,6 +52,7 @@ const User = (): JSX.Element => {
     canUpdateEmail,
     canRenewSubscription,
     canUpdatePaymentMethod,
+    canShowReceipts,
   } = useAccountStore();
   const offerSwitches = useCheckoutStore((state) => state.offerSwitches);
   const location = useLocation();
@@ -64,6 +67,35 @@ const User = (): JSX.Element => {
     navigate(addQueryParam(location, 'u', 'upgrade-subscription'));
   };
 
+  const handleShowReceiptClick = async (transactionId: string) => {
+    setIsLoadingReceipt(true);
+
+    try {
+      const receipt = await getReceipt(transactionId);
+
+      if (receipt) {
+        const newWindow = window.open('', `Receipt ${transactionId}`, '');
+        const htmlString = window.atob(receipt);
+
+        if (newWindow) {
+          newWindow.opener = null;
+          newWindow.document.write(htmlString);
+          newWindow.document.close();
+        }
+      }
+    } catch (error: unknown) {
+      throw new Error("Couldn't parse receipt. " + (error instanceof Error ? error.message : ''));
+    }
+
+    setIsLoadingReceipt(false);
+  };
+
+  useEffect(() => {
+    if (accessModel !== 'AVOD') {
+      getSubscriptionSwitches();
+    }
+  }, [accessModel]);
+
   useEffect(() => {
     if (!loading && !customer) {
       navigate('/', { replace: true });
@@ -152,7 +184,7 @@ const User = (): JSX.Element => {
                   activePaymentDetail={activePayment}
                   transactions={transactions}
                   customer={customer}
-                  isLoading={loading}
+                  isLoading={loading || isLoadingReceipt}
                   panelClassName={styles.panel}
                   panelHeaderClassName={styles.panelHeader}
                   onShowAllTransactionsClick={() => setShowAllTransactions(true)}
@@ -161,6 +193,8 @@ const User = (): JSX.Element => {
                   canRenewSubscription={canRenewSubscription}
                   onUpgradeSubscriptionClick={handleUpgradeSubscriptionClick}
                   offerSwitchesAvailable={!!offerSwitches.length}
+                  canShowReceipts={canShowReceipts}
+                  onShowReceiptClick={handleShowReceiptClick}
                 />
               ) : (
                 <Navigate to="my-account" />

src/pages/User/__snapshots__/User.test.tsx.snap

@@ -743,11 +743,15 @@ exports[`User Component tests > Payments Page 1`] = `
             <br />
             user:payment.price_payed_with
           </p>
-          <p>
-            11232
-            <br />
-            7/16/2022
-          </p>
+          <div
+            class="_transactionDetails_c57ff5"
+          >
+            <p>
+              11232
+              <br />
+              7/16/2022
+            </p>
+          </div>
         </div>
         <div
           class="_infoBox_c57ff5"
@@ -762,11 +766,15 @@ exports[`User Component tests > Payments Page 1`] = `
             <br />
             user:payment.price_payed_with
           </p>
-          <p>
-            11234
-            <br />
-            11/9/2022
-          </p>
+          <div
+            class="_transactionDetails_c57ff5"
+          >
+            <p>
+              11234
+              <br />
+              11/9/2022
+            </p>
+          </div>
         </div>
       </div>
     </div>

src/services/cleeng.account.service.ts

@@ -232,3 +232,5 @@ export const canRenewSubscription = true;
 export const canExportAccountData = false;
 
 export const canUpdatePaymentMethod = true;
+
+export const canShowReceipts = true;

src/services/cleeng.subscription.service.ts

@@ -1,7 +1,7 @@
 import { patch, get } from './cleeng.service';
 
 import { addQueryParams } from '#src/utils/formatting';
-import type { GetPaymentDetails, GetSubscriptions, GetTransactions, UpdateSubscription } from '#types/subscription';
+import type { FetchReceipt, GetPaymentDetails, GetSubscriptions, GetTransactions, UpdateSubscription } from '#types/subscription';
 
 export async function getActiveSubscription({ sandbox, customerId, jwt }: { sandbox: boolean; customerId: string; jwt: string }) {
   const response = await getSubscriptions({ customerId }, sandbox, jwt);
@@ -42,3 +42,7 @@ export const getPaymentDetails: GetPaymentDetails = async (payload, sandbox, jwt
 export const getTransactions: GetTransactions = async ({ customerId, limit, offset }, sandbox, jwt) => {
   return get(sandbox, addQueryParams(`/customers/${customerId}/transactions`, { limit, offset }), jwt);
 };
+
+export const fetchReceipt: FetchReceipt = async ({ transactionId }, sandbox, jwt) => {
+  return get(sandbox, `/receipt/${transactionId}`, jwt);
+};

src/services/inplayer.account.service.ts

@@ -442,3 +442,5 @@ export const canRenewSubscription = false;
 export const canExportAccountData = true;
 
 export const canUpdatePaymentMethod = false;
+
+export const canShowReceipts = false;

src/stores/AccountController.ts

@@ -80,6 +80,7 @@ export const initializeAccount = async () => {
       canUpdatePaymentMethod: accountService.canUpdatePaymentMethod,
       canChangePasswordWithOldPassword: accountService.canChangePasswordWithOldPassword,
       canExportAccountData: accountService.canExportAccountData,
+      canShowReceipts: accountService.canShowReceipts,
     });
     accountService.setEnvironment(config);
 
@@ -368,7 +369,14 @@ export const resetPassword = async (email: string, resetUrl: string) => {
 
 export const changePasswordWithOldPassword = async (oldPassword: string, newPassword: string, newPasswordConfirmation: string) => {
   return await useService(async ({ accountService, sandbox = true }) => {
-    const response = await accountService.changePasswordWithOldPassword({ oldPassword, newPassword, newPasswordConfirmation }, sandbox);
+    const response = await accountService.changePasswordWithOldPassword(
+      {
+        oldPassword,
+        newPassword,
+        newPasswordConfirmation,
+      },
+      sandbox,
+    );
     if (response?.errors?.length > 0) throw new Error(response.errors[0]);
 
     return response?.responseData;
@@ -470,6 +478,18 @@ export async function exportAccountData() {
   });
 }
 
+export const getReceipt = async (transactionId: string) => {
+  return await useAccount(async ({ auth: { jwt } }) => {
+    return await useService(async ({ subscriptionService, sandbox = true }) => {
+      if (!subscriptionService || !('fetchReceipt' in subscriptionService)) return null;
+
+      const { responseData } = await subscriptionService.fetchReceipt({ transactionId }, sandbox, jwt);
+
+      return responseData;
+    });
+  });
+};
+
 /**
  * Get multiple media items for the given IDs. This function uses watchlists to get several medias via just one request.
  *