chore: Metadata ui change in payment ops table (#807)

Co-authored-by: Jeeva Ramachandran <[email protected]>
Co-authored-by: Pritish Budhiraja <[email protected]>

src/screens/Order/Metadata.res

@@ -0,0 +1,26 @@
+@react.component
+let make = (~displayValue) => {
+  open UIUtils
+  let (isTextVisible, setIsTextVisible) = React.useState(_ => false)
+
+  let handleClick = ev => {
+    ev->ReactEvent.Mouse.stopPropagation
+    setIsTextVisible(_ => true)
+  }
+
+  <div>
+    <RenderIf condition={isTextVisible}>
+      <div>
+        <HelperComponents.CopyTextCustomComp displayValue customTextCss="text-nowrap" />
+      </div>
+    </RenderIf>
+    <RenderIf condition={!isTextVisible && displayValue->LogicUtils.isNonEmptyString}>
+      <div className="flex text-nowrap gap-1">
+        <p className=""> {`${displayValue->String.slice(~start=0, ~end=17)}`->React.string} </p>
+        <span className="flex text-blue-811 text-sm font-extrabold" onClick={ev => handleClick(ev)}>
+          {"..."->React.string}
+        </span>
+      </div>
+    </RenderIf>
+  </div>
+}

src/screens/Order/OrderEntity.res

@@ -772,13 +772,7 @@ let getCell = (order, colType: colType): Table.cell => {
   let orderStatus = order.status->HSwitchOrderUtils.statusVariantMapper
   switch colType {
   | Metadata =>
-    CustomCell(
-      <HelperComponents.CopyTextCustomComp
-        displayValue={order.metadata->JSON.Encode.object->JSON.stringify}
-        customTextCss="text-nowrap"
-      />,
-      "",
-    )
+    CustomCell(<Metadata displayValue={order.metadata->JSON.Encode.object->JSON.stringify} />, "")
   | PaymentId => Text(order.payment_id)
   | MerchantId => Text(order.merchant_id)
   | Connector => CustomCell(<ConnectorCustomCell connectorName={order.connector} />, "")
@@ -812,7 +806,8 @@ let getCell = (order, colType: colType): Table.cell => {
   | Currency => Text(order.currency)
   | CustomerId => Text(order.customer_id)
   | CustomerEmail => Text(order.email)
-  | Description => Text(order.description)
+  | Description =>
+    CustomCell(<Metadata displayValue={order.metadata->JSON.Encode.object->JSON.stringify} />, "")
   | MandateId => Text(order.mandate_id)
   | MandateData => Text(order.mandate_data)
   | SetupFutureUsage => Text(order.setup_future_usage)