chore: hide transaction when is not exist

Author: pooriaset

src/app/[locale]/(main)/(container)/profile/orders/[id]/payment/successful/components/OrderDetails.tsx

@@ -10,19 +10,21 @@ import CheckedAnimation from './CheckedAnimation';
 
 export interface OrderDetailsProps {
   orderId: number | string;
-  transactionId: number | string;
+  transactionId?: number | string | null;
 }
 
 const OrderDetails: FC<OrderDetailsProps> = ({ orderId, transactionId }) => {
   const t = useTranslations();
 
   const handleClickOnCopy = () => {
-    navigator.clipboard
-      .writeText(transactionId.toString())
-      .then(() => {
-        toast.success(t('messages.copied'));
-      })
-      .catch((err) => {});
+    if (transactionId) {
+      navigator.clipboard
+        .writeText(transactionId.toString())
+        .then(() => {
+          toast.success(t('messages.copied'));
+        })
+        .catch((err) => {});
+    }
   };
 
   return (
@@ -42,18 +44,22 @@ const OrderDetails: FC<OrderDetailsProps> = ({ orderId, transactionId }) => {
         {t('order.payment.successful.description')}
       </Typography>
 
-      <Stack direction="row" alignItems="center" spacing={1}>
-        <Typography variant="body2" color="textSecondary" gutterBottom>
-          {t('order.payment.successful.transactionId')}{' '}
-        </Typography>
-        <Button
-          onClick={handleClickOnCopy}
-          variant="outlined"
-          endIcon={<ContentCopyOutlined fontSize="small" />}
-        >
-          <Typography variant="h6">{transactionId}</Typography>
-        </Button>
-      </Stack>
+      {!!transactionId && (
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <Typography variant="body2" color="textSecondary" gutterBottom>
+            {t('order.payment.successful.transactionId')}{' '}
+          </Typography>
+
+          <Button
+            onClick={handleClickOnCopy}
+            variant="outlined"
+            endIcon={<ContentCopyOutlined fontSize="small" />}
+          >
+            <Typography variant="h6">{transactionId}</Typography>
+          </Button>
+        </Stack>
+      )}
+
       <Button
         sx={{
           width: 'fit-content',

src/app/[locale]/(main)/(container)/profile/orders/[id]/payment/successful/page.tsx

@@ -29,7 +29,7 @@ const Page: FC<PageProps> = async (props) => {
       <Card variant="outlined" sx={{ width: '100%' }}>
         <CardContent>
           <OrderDetails
-            transactionId={data.order.transactionId!}
+            transactionId={data.order.transactionId}
             orderId={orderId}
           />
         </CardContent>