feat: estimate detail footer.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js

@@ -1,43 +1,35 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import {
+  CommercialDocFooter,
   T,
-  TotalLines,
+  If,
-  TotalLine,
+  DetailsMenu,
-  TotalLineBorderStyle,
+  DetailItem,
-  TotalLineTextStyle,
-  FormatNumber,
 } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
- * Estimate details panel footer content.
+ * Estimate details footer.
+ * @returns {React.JSX}
  */
 export default function EstimateDetailFooter() {
   const { estimate } = useEstimateDetailDrawerContext();
-
+  
   return (
-    <EstimateDetailsFooterRoot>
+    <CommercialDocFooter>
-      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <TotalLine
+        <If condition={estimate.terms_conditions}>
-          title={<T id={'estimate.details.subtotal'} />}
+          <DetailItem label={<T id={'estimate.details.terms_conditions'} />}>
-          value={<FormatNumber value={estimate.amount} />}
+            {estimate.terms_conditions}
-          borderStyle={TotalLineBorderStyle.SingleDark}
+          </DetailItem>
-        />
+        </If>
-        <TotalLine
+        <If condition={estimate.note}>
-          title={<T id={'estimate.details.total'} />}
+          <DetailItem label={<T id={'estimate.details.note'} />}>
-          value={estimate.formatted_amount}
+            {estimate.note}
-          borderStyle={TotalLineBorderStyle.DoubleDark}
+          </DetailItem>
-          textStyle={TotalLineTextStyle.Bold}
+        </If>
-        />
+      </DetailsMenu>
-      </EstimateTotalLines>
+    </CommercialDocFooter>
-    </EstimateDetailsFooterRoot>
   );
 }
-
-export const EstimateDetailsFooterRoot = styled.div``;
-
-export const EstimateTotalLines = styled(TotalLines)`
-  margin-left: auto;
-`;

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js

@@ -4,13 +4,16 @@ import { CommercialDocBox } from 'components';
 
 import EstimateDetailHeader from './EstimateDetailHeader';
 import EstimateDetailTable from './EstimateDetailTable';
+import EstimateDetailTableFooter from './EstimateDetailTableFooter';
 import EstimateDetailFooter from './EstimateDetailFooter';
 
+
 export default function EstimateDetailTab() {
   return (
     <CommercialDocBox>
       <EstimateDetailHeader />
       <EstimateDetailTable />
+      <EstimateDetailTableFooter />
       <EstimateDetailFooter />
     </CommercialDocBox>
   );

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate details panel footer content.
+ */
+export default function EstimateDetailTableFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <EstimateDetailsFooterRoot>
+      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'estimate.details.subtotal'} />}
+          value={<FormatNumber value={estimate.amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'estimate.details.total'} />}
+          value={estimate.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </EstimateTotalLines>
+    </EstimateDetailsFooterRoot>
+  );
+}
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;