O3-3016 Fix breaking print receipt function on the frontend

src/invoice/printable-invoice/print-receipt.component.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from '@carbon/react';
 import { Printer } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { ConfigurableLink } from '@openmrs/esm-framework';
 import styles from './print-receipt.scss';
 import { apiBasePath } from '../../constants';
 
@@ -11,17 +10,25 @@ interface PrintReceiptProps {
 }
 const PrintReceipt: React.FC<PrintReceiptProps> = ({ billId }) => {
   const { t } = useTranslation();
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const handlePrintReceiptClick = () => {
+    setIsRedirecting(true);
+    setTimeout(() => {
+      window.location.href = `/openmrs${apiBasePath}receipt?billId=${billId}`;
+      setIsRedirecting(false);
+    }, 1000);
+  };
+
   return (
     <Button
       kind="secondary"
       className={styles.button}
       size="md"
-      renderIcon={(props) => <Printer size={24} {...props} />}>
-      <ConfigurableLink
-        className={styles.configurableLink}
-        to={`\${openmrsBase}${apiBasePath}receipt?billId=${billId}`}>
-        {t('printReceipt', 'Print receipt')}
-      </ConfigurableLink>{' '}
+      renderIcon={(props) => <Printer size={24} {...props} />}
+      onClick={handlePrintReceiptClick}
+      disabled={isRedirecting}>
+      {isRedirecting ? t('loading', 'Loading') : t('printReceipt', 'Print receipt')}
     </Button>
   );
 };