TP-52213 | Varun Jain | Transaction Status Widget (#9158)

2024-01-17 13:13:52 +05:30
parent a60a8dc6f5
commit 7e01980368
18 changed files with 614 additions and 1 deletions
--- a/navi-chat/src/main/java/com/navi/chat/db/utils/ChatUtils.kt
+++ b/navi-chat/src/main/java/com/navi/chat/db/utils/ChatUtils.kt
@@ -73,6 +73,9 @@ fun transformFirestoreToWidgetModel(data: Map<String, Any>): NaviChatWidget =
        NaviChatFileAttachmentWidget.WIDGET_NAME -> {
            convertMapToJson<NaviChatFileAttachmentWidget>(data) as NaviChatFileAttachmentWidget
        }
+        NaviChatTransactionStatusWidget.WIDGET_NAME -> {
+            convertMapToJson<NaviChatTransactionStatusWidget>(data) as NaviChatTransactionStatusWidget
+        }
        else -> {
            NaviChatMessageWidget()
        }
--- a/navi-chat/src/main/java/com/navi/chat/utils/ChatJsonDeserializer.kt
+++ b/navi-chat/src/main/java/com/navi/chat/utils/ChatJsonDeserializer.kt
@@ -27,6 +27,7 @@ import com.navi.naviwidgets.models.response.NaviChatMessageWithItemListWidget
 import com.navi.naviwidgets.models.response.NaviChatResolutionStatusResponseWidget
 import com.navi.naviwidgets.models.response.NaviChatResolutionStatusWidget
 import com.navi.naviwidgets.models.response.NaviChatTimerExpiredWidget
+import com.navi.naviwidgets.models.response.NaviChatTransactionStatusWidget
 import com.navi.naviwidgets.models.response.NaviCsatOptionWidget
 import com.navi.naviwidgets.utils.NAVI_CHAT_RT_CREATED_AT
 import com.navi.naviwidgets.utils.NAVI_CHAT_WIDGET_NAME
@@ -171,6 +172,15 @@ object ChatJsonDeserializer : JsonDeserializer<NaviChatWidget> {
                        naviChatWidget.rt_created_at = timestamp
                        naviChatWidget
                    }
+                    NaviChatTransactionStatusWidget.WIDGET_NAME -> {
+                        val naviChatWidget =
+                            Gson().fromJson(
+                                jsonObject,
+                                NaviChatTransactionStatusWidget::class.java
+                            )
+                        naviChatWidget.rt_created_at = timestamp
+                        naviChatWidget
+                    }
                    else -> {
                        val naviChatWidget =
                            Gson().fromJson(jsonObject, NaviChatMessageWidget::class.java)
--- a/navi-design/src/main/res/values/colors.xml
+++ b/navi-design/src/main/res/values/colors.xml
@@ -278,4 +278,5 @@
    <color name="dark_grey">#B5ACB9</color>
    <color name="ctaPurplePrimaryColor">#1F002A</color>
    <color name="scrollbar_color">#D9D9D9</color>
+    <color name="light_grey_border_color">#1A3C0050</color>
 </resources>
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/interfaces/NaviChatTransactionStatusMessageItemWidgetInfo.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/interfaces/NaviChatTransactionStatusMessageItemWidgetInfo.kt
@@ -0,0 +1,7 @@
+package com.navi.naviwidgets.interfaces
+
+interface NaviChatTransactionStatusMessageItemWidgetInfo {
+    fun messageId(): String?
+    fun label(): String?
+    fun value(): String?
+}
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/interfaces/NaviChatTransactionStatusWidgetInfo.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/interfaces/NaviChatTransactionStatusWidgetInfo.kt
@@ -0,0 +1,13 @@
+package com.navi.naviwidgets.interfaces
+
+import com.google.firebase.Timestamp
+import com.navi.naviwidgets.models.response.NaviChatTransactionItemWidget
+
+interface NaviChatTransactionStatusWidgetInfo {
+    fun messageId(): String?
+    fun title(): String?
+    fun messageItems(): List<NaviChatTransactionItemWidget>?
+    fun senderName(): String?
+    fun timeStamp(): Timestamp?
+    fun footer(): String?
+}
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/NaviChatTransactionItemWidget.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/NaviChatTransactionItemWidget.kt
@@ -0,0 +1,63 @@
+package com.navi.naviwidgets.models.response
+
+import com.google.firebase.Timestamp
+import com.google.firebase.firestore.PropertyName
+import com.google.gson.annotations.SerializedName
+import com.navi.naviwidgets.interfaces.NaviChatTransactionStatusMessageItemWidgetInfo
+import com.navi.naviwidgets.models.NaviChatWidget
+import com.navi.naviwidgets.utils.LABEL
+import com.navi.naviwidgets.utils.NAVI_CHAT_ICON_CODE
+import com.navi.naviwidgets.utils.NAVI_CHAT_MESSAGE_ID
+import com.navi.naviwidgets.utils.NAVI_CHAT_META_DATA
+import com.navi.naviwidgets.utils.NAVI_CHAT_RT_CREATED_AT
+import com.navi.naviwidgets.utils.NAVI_CHAT_SENDER_ID
+import com.navi.naviwidgets.utils.NAVI_CHAT_SENDER_TYPE
+import com.navi.naviwidgets.utils.NAVI_CHAT_SHOULD_DISPLAY_IN_CHAT_HISTORY
+import com.navi.naviwidgets.utils.NAVI_CHAT_WIDGET_NAME
+import com.navi.naviwidgets.utils.VALUE
+import java.io.Serializable
+
+data class NaviChatTransactionItemWidget(
+    @get:PropertyName(NAVI_CHAT_MESSAGE_ID)
+    @SerializedName(NAVI_CHAT_MESSAGE_ID)
+    override val messageId: String? = null,
+    @set:PropertyName(NAVI_CHAT_WIDGET_NAME)
+    @get:PropertyName(NAVI_CHAT_WIDGET_NAME)
+    @SerializedName(NAVI_CHAT_WIDGET_NAME)
+    override var widgetNameForBaseAdapter: String? = WIDGET_NAME,
+    @get:PropertyName(NAVI_CHAT_ICON_CODE)
+    @SerializedName(NAVI_CHAT_ICON_CODE)
+    val iconCode: String? = null,
+    @get:PropertyName(LABEL)
+    @SerializedName(LABEL)
+    val label: String? = null,
+    @get:PropertyName(VALUE)
+    @SerializedName(VALUE)
+    val value: String? = null,
+    @get:PropertyName(NAVI_CHAT_META_DATA)
+    @SerializedName(NAVI_CHAT_META_DATA)
+    val metaData: NaviChatMetaData? = null,
+    @get:PropertyName(NAVI_CHAT_SHOULD_DISPLAY_IN_CHAT_HISTORY)
+    @SerializedName(NAVI_CHAT_SHOULD_DISPLAY_IN_CHAT_HISTORY)
+    override val shouldDisplayInChatHistory: Boolean = true,
+    @SerializedName(NAVI_CHAT_RT_CREATED_AT)
+    override var rt_created_at: Timestamp? = null,
+    @get:PropertyName(NAVI_CHAT_SENDER_ID)
+    @SerializedName(NAVI_CHAT_SENDER_ID)
+    override val senderId: String? = null,
+    @get:PropertyName(NAVI_CHAT_SENDER_TYPE)
+    @SerializedName(NAVI_CHAT_SENDER_TYPE)
+    override val senderType: String? = null, var isSelectionDone: Boolean = false
+) : NaviChatWidget, NaviChatTransactionStatusMessageItemWidgetInfo, Serializable {
+
+    companion object {
+        const val WIDGET_NAME = "CHAT_TRANSACTION_ITEM"
+    }
+
+    override fun messageId(): String? = messageId
+
+    override fun label(): String? = label
+
+    override fun value(): String? = value
+
+}
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/NaviChatTransactionStatusWidget.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/NaviChatTransactionStatusWidget.kt
@@ -0,0 +1,92 @@
+package com.navi.naviwidgets.models.response
+
+import com.google.firebase.Timestamp
+import com.google.firebase.firestore.PropertyName
+import com.google.firebase.firestore.ServerTimestamp
+import com.google.gson.annotations.SerializedName
+import com.navi.naviwidgets.interfaces.NaviChatTransactionStatusWidgetInfo
+import com.navi.naviwidgets.models.NaviChatWidget
+import com.navi.naviwidgets.utils.FOOTER
+import com.navi.naviwidgets.utils.NAVI_CHAT_ITEMS
+import com.navi.naviwidgets.utils.NAVI_CHAT_MESSAGE_DATA
+import com.navi.naviwidgets.utils.NAVI_CHAT_MESSAGE_ID
+import com.navi.naviwidgets.utils.NAVI_CHAT_RT_CREATED_AT
+import com.navi.naviwidgets.utils.NAVI_CHAT_SENDER_ID
+import com.navi.naviwidgets.utils.NAVI_CHAT_SENDER_NAME
+import com.navi.naviwidgets.utils.NAVI_CHAT_SENDER_TYPE
+import com.navi.naviwidgets.utils.NAVI_CHAT_SHOULD_DISPLAY_IN_CHAT_HISTORY
+import com.navi.naviwidgets.utils.NAVI_CHAT_TITLE
+import com.navi.naviwidgets.utils.NAVI_CHAT_WIDGET_DATA
+import com.navi.naviwidgets.utils.NAVI_CHAT_WIDGET_NAME
+import com.navi.naviwidgets.utils.TEXT
+import java.io.Serializable
+
+data class NaviChatTransactionStatusWidget(
+    @SerializedName(NAVI_CHAT_MESSAGE_ID)
+    override val messageId: String? = null,
+    @set:PropertyName(NAVI_CHAT_WIDGET_NAME)
+    @get:PropertyName(NAVI_CHAT_WIDGET_NAME)
+    @SerializedName(NAVI_CHAT_WIDGET_NAME)
+    override var widgetNameForBaseAdapter: String? = WIDGET_NAME,
+    @get:PropertyName(NAVI_CHAT_WIDGET_DATA)
+    @SerializedName(NAVI_CHAT_WIDGET_DATA)
+    val widgetData: NaviChatTransactionStatusListData? = null,
+    @get:PropertyName(NAVI_CHAT_SHOULD_DISPLAY_IN_CHAT_HISTORY)
+    @SerializedName(NAVI_CHAT_SHOULD_DISPLAY_IN_CHAT_HISTORY)
+    override val shouldDisplayInChatHistory: Boolean = true,
+    @ServerTimestamp
+    @SerializedName(NAVI_CHAT_RT_CREATED_AT)
+    override var rt_created_at: Timestamp? = null,
+    @get:PropertyName(NAVI_CHAT_SENDER_ID)
+    @SerializedName(NAVI_CHAT_SENDER_ID)
+    override val senderId: String? = null,
+    @get:PropertyName(NAVI_CHAT_SENDER_TYPE)
+    @SerializedName(NAVI_CHAT_SENDER_TYPE)
+    override val senderType: String? = null
+) : NaviChatWidget, NaviChatTransactionStatusWidgetInfo, Serializable {
+
+    companion object {
+        const val WIDGET_NAME = "TRANSACTION_STATUS_WIDGET"
+    }
+
+    override fun messageId(): String? = messageId
+
+    override fun title(): String? = widgetData?.messageData?.title?.text
+
+    override fun messageItems(): List<NaviChatTransactionItemWidget>? =
+        widgetData?.messageData?.messageItems
+
+    override fun senderName(): String? = widgetData?.senderName
+
+    override fun timeStamp(): Timestamp? = rt_created_at
+
+    override fun footer(): String? = widgetData?.messageData?.footer?.text
+
+}
+
+data class NaviChatTransactionStatusListData(
+    @get:PropertyName(NAVI_CHAT_MESSAGE_DATA)
+    @SerializedName(NAVI_CHAT_MESSAGE_DATA)
+    val messageData: NaviChatTransactionMessageData? = null,
+    @get:PropertyName(NAVI_CHAT_SENDER_NAME)
+    @SerializedName(NAVI_CHAT_SENDER_NAME)
+    val senderName: String? = null,
+) : Serializable
+
+data class NaviChatTransactionMessageData(
+    @get:PropertyName(NAVI_CHAT_TITLE)
+    @SerializedName(NAVI_CHAT_TITLE)
+    val title: NaviChatTransactionStatusTitleWidget? = null,
+    @get:PropertyName(FOOTER)
+    @SerializedName(FOOTER)
+    val footer: NaviChatTransactionStatusTitleWidget? = null,
+    @get:PropertyName(NAVI_CHAT_ITEMS)
+    @SerializedName(NAVI_CHAT_ITEMS)
+    val messageItems: List<NaviChatTransactionItemWidget>? = null,
+) : Serializable
+
+data class NaviChatTransactionStatusTitleWidget(
+    @get:PropertyName(TEXT)
+    @SerializedName(TEXT)
+    val text: String? = null,
+) : Serializable
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/utils/Constants.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/utils/Constants.kt
@@ -184,4 +184,8 @@ const val DATE_SELECTOR_CONTAINER = "DATE_SELECTOR_CONTAINER"
 const val UPDATE_CALENDAR_DATE = "UPDATE_CALENDAR_DATE"
 const val DARK_PURPLE = "#1F002A"
 const val COLOR_TRANSPARENT = "#00FFFFFF"
-const val AP_LAUNCH = "applicationPlatform/launch"
+const val AP_LAUNCH = "applicationPlatform/launch"
+const val LABEL = "label"
+const val VALUE = "value"
+const val TEXT = "text"
+const val FOOTER = "footer"
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/viewholder/NaviChatTransactionStatusMessageItemVH.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/viewholder/NaviChatTransactionStatusMessageItemVH.kt
@@ -0,0 +1,31 @@
+package com.navi.naviwidgets.viewholder
+
+import androidx.databinding.ViewDataBinding
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.databinding.LayoutNaviChatTransactionStatusMessageItemBinding
+import com.navi.naviwidgets.models.response.NaviChatTransactionItemWidget
+import com.navi.naviwidgets.widgets.NaviChatTransactionStatusMessageItemLayout
+
+class NaviChatTransactionStatusMessageItemVH(private val viewDataBinding: ViewDataBinding) :
+    BaseViewHolder<NaviChatTransactionItemWidget>(view = viewDataBinding.root) {
+
+    override fun bind(
+        model: NaviChatTransactionItemWidget,
+        widgetCallback: WidgetCallback,
+        position: Int,
+        totalItems: Int
+    ) {
+        if (itemView is NaviChatTransactionStatusMessageItemLayout) {
+            (itemView as NaviChatTransactionStatusMessageItemLayout).update(
+                info = model,
+                binding = (viewDataBinding as LayoutNaviChatTransactionStatusMessageItemBinding)
+            )
+        }
+    }
+
+    override fun bindError(errorData: Any?) {/*No-op*/
+    }
+
+    override fun bindWidgetStateChanged(payload: Any?) {/*No-op*/
+    }
+}
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/viewholder/NaviChatTransactionStatusVH.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/viewholder/NaviChatTransactionStatusVH.kt
@@ -0,0 +1,33 @@
+package com.navi.naviwidgets.viewholder
+
+import androidx.databinding.ViewDataBinding
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.databinding.LayoutNaviChatTransactionStatusBinding
+import com.navi.naviwidgets.models.response.NaviChatTransactionStatusWidget
+import com.navi.naviwidgets.widgets.NaviChatTransactionStatusWidgetLayout
+
+class NaviChatTransactionStatusVH(private val viewDataBinding: ViewDataBinding) :
+    BaseViewHolder<NaviChatTransactionStatusWidget>(view = viewDataBinding.root) {
+
+    override fun bind(
+        model: NaviChatTransactionStatusWidget,
+        widgetCallback: WidgetCallback,
+        position: Int,
+        totalItems: Int
+    ) {
+        if (itemView is NaviChatTransactionStatusWidgetLayout) {
+            (itemView as NaviChatTransactionStatusWidgetLayout).update(
+                info = model,
+                binding = (viewDataBinding as LayoutNaviChatTransactionStatusBinding),
+                widgetCallback = widgetCallback,
+                widgetPosition = position
+            )
+        }
+    }
+
+    override fun bindError(errorData: Any?) {/*No-op*/
+    }
+
+    override fun bindWidgetStateChanged(payload: Any?) {/*No-op*/
+    }
+}
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/viewholder/NaviChatViewHolderFactoryImpl.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/viewholder/NaviChatViewHolderFactoryImpl.kt
@@ -14,6 +14,7 @@ import com.navi.analytics.utils.WIDGET_NOT_HANDLED_BY_APP
 import com.navi.naviwidgets.R
 import com.navi.naviwidgets.models.GenericWidgetDataInfo
 import com.navi.naviwidgets.models.NaviBaseAdapterModel
+import com.navi.naviwidgets.models.response.NaviChatTransactionItemWidget
 import com.navi.naviwidgets.models.response.*

@Suppress("UNCHECKED_CAST")
@@ -42,6 +43,8 @@ class NaviChatViewHolderFactoryImpl<T : NaviBaseAdapterModel>(
            R.layout.layout_navi_chat_message_with_deeplink
        private val NAVI_CHAT_TYPING_STATUS_WIDGET = R.layout.layout_navi_chat_typing_status
        private val NAVI_CHAT_ACTIVITY_REDIRECTION_WIDGET = R.layout.layout_navi_chat_message_with_activity_redirection
+        private val NAVI_CHAT_TRANSACTION_STATUS_WIDGET = R.layout.layout_navi_chat_transaction_status
+        private val NAVI_CHAT_TRANSACTION_STATUS_ITEM_WIDGET = R.layout.layout_navi_chat_transaction_status_message_item
    }

    override fun type(item: NaviBaseAdapterModel?): Int =
@@ -68,6 +71,8 @@ class NaviChatViewHolderFactoryImpl<T : NaviBaseAdapterModel>(
                    NAVI_CHAT_RECEIVED_MESSAGE_WITH_ATTACHMENT_WIDGET
                }
            is NaviChatTypingStatusWidget -> NAVI_CHAT_TYPING_STATUS_WIDGET
+            is NaviChatTransactionStatusWidget -> NAVI_CHAT_TRANSACTION_STATUS_WIDGET
+            is NaviChatTransactionItemWidget -> NAVI_CHAT_TRANSACTION_STATUS_ITEM_WIDGET
            else -> {
                NaviTrackEvent.trackEvent(
                    WIDGET_NOT_HANDLED_BY_APP,
@@ -99,6 +104,8 @@ class NaviChatViewHolderFactoryImpl<T : NaviBaseAdapterModel>(
                NaviChatReceivedMessageWithAttachmentVH(viewDataBinding = parent)
            NAVI_CHAT_TYPING_STATUS_WIDGET -> NaviChatTypingStatusVH(viewDataBinding = parent)
            NAVI_CHAT_ACTIVITY_REDIRECTION_WIDGET -> NaviChatActivityRedirectionWidgetVH(viewDataBinding = parent)
+            NAVI_CHAT_TRANSACTION_STATUS_WIDGET -> NaviChatTransactionStatusVH(viewDataBinding = parent)
+            NAVI_CHAT_TRANSACTION_STATUS_ITEM_WIDGET -> NaviChatTransactionStatusMessageItemVH(viewDataBinding = parent)
            UNKNOWN_WIDGET -> UnknownWidgetVH(view = parent)
            else -> UnknownWidgetVH(view = parent)
        }
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/widgets/NaviChatTransactionStatusMessageItemLayout.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/widgets/NaviChatTransactionStatusMessageItemLayout.kt
@@ -0,0 +1,32 @@
+package com.navi.naviwidgets.widgets
+
+import android.content.Context
+import android.util.AttributeSet
+import androidx.constraintlayout.widget.ConstraintLayout
+import com.navi.naviwidgets.databinding.LayoutNaviChatTransactionStatusMessageItemBinding
+import com.navi.naviwidgets.extensions.showWhenDataIsAvailable
+import com.navi.naviwidgets.interfaces.NaviChatTransactionStatusMessageItemWidgetInfo
+
+class NaviChatTransactionStatusMessageItemLayout @JvmOverloads constructor(
+    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+
+    private lateinit var binding: LayoutNaviChatTransactionStatusMessageItemBinding
+    private lateinit var info: NaviChatTransactionStatusMessageItemWidgetInfo
+
+    fun update(
+        info: NaviChatTransactionStatusMessageItemWidgetInfo,
+        binding: LayoutNaviChatTransactionStatusMessageItemBinding
+    ) {
+        this.binding = binding
+        this.info = info
+        setProperties()
+    }
+
+    private fun setProperties() {
+        binding.apply {
+            label.showWhenDataIsAvailable(showText = info.label())
+            description.showWhenDataIsAvailable(showText = info.value())
+        }
+    }
+}
--- a/navi-widgets/src/main/java/com/navi/naviwidgets/widgets/NaviChatTransactionStatusWidgetLayout.kt
+++ b/navi-widgets/src/main/java/com/navi/naviwidgets/widgets/NaviChatTransactionStatusWidgetLayout.kt
@@ -0,0 +1,87 @@
+package com.navi.naviwidgets.widgets
+
+import android.content.Context
+import android.util.AttributeSet
+import android.widget.LinearLayout
+import androidx.lifecycle.Lifecycle
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.recyclerview.widget.RecyclerView
+import com.navi.design.R
+import com.navi.naviwidgets.adapters.NaviAdapter
+import com.navi.naviwidgets.callbacks.WidgetCallback
+import com.navi.naviwidgets.databinding.LayoutNaviChatTransactionStatusBinding
+import com.navi.naviwidgets.extensions.showWhenDataIsAvailable
+import com.navi.naviwidgets.interfaces.NaviChatTransactionStatusWidgetInfo
+import com.navi.naviwidgets.utils.EMPTY
+import com.navi.naviwidgets.utils.convertTo12HourFormatTime
+import com.navi.naviwidgets.utils.setNaviChatMessageMargin
+import com.navi.naviwidgets.viewholder.NaviChatViewHolderFactoryImpl
+
+class NaviChatTransactionStatusWidgetLayout @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0,
+) : LinearLayout(context, attrs, defStyleAttr) {
+
+    private lateinit var binding: LayoutNaviChatTransactionStatusBinding
+    private lateinit var info: NaviChatTransactionStatusWidgetInfo
+    private lateinit var widgetCallback: WidgetCallback
+    private var widgetPosition: Int = Int.MAX_VALUE
+    private val naviAdapter = NaviAdapter(
+        widgetCallback = object : WidgetCallback {
+            override fun getLifeCycle(): Lifecycle? {
+                return if (::widgetCallback.isInitialized) {
+                    widgetCallback.getLifeCycle()
+                } else {
+                    null
+                }
+            }
+        }, factory = NaviChatViewHolderFactoryImpl(EMPTY, EMPTY), isRecyclable = true
+    )
+
+
+    fun update(
+        info: NaviChatTransactionStatusWidgetInfo,
+        binding: LayoutNaviChatTransactionStatusBinding,
+        widgetCallback: WidgetCallback,
+        widgetPosition: Int,
+    ) {
+        this.info = info
+        this.binding = binding
+        this.widgetCallback = widgetCallback
+        this.widgetPosition = widgetPosition
+        setProperties()
+        setUp()
+        setMargin()
+    }
+
+    private fun setProperties() {
+        binding.apply {
+            tvMessageTitle.showWhenDataIsAvailable(showText = info.title())
+            tvTimestamp.showWhenDataIsAvailable(showText = info.timeStamp()?.let { timeStamp ->
+                convertTo12HourFormatTime(timeStamp)
+            })
+            replyMessage.showWhenDataIsAvailable(showText = info.footer())
+        }
+
+    }
+
+    private fun setUp() {
+        binding.rvOptionList.apply {
+            info.messageItems()?.let { naviChatTransactionInfoList ->
+                layoutManager = LinearLayoutManager(
+                    context, LinearLayoutManager.VERTICAL, false
+                )
+                naviAdapter.list = naviChatTransactionInfoList
+                adapter = naviAdapter
+            }
+        }
+    }
+
+    private fun setMargin() {
+        (binding.root.layoutParams as? RecyclerView.LayoutParams)?.setNaviChatMessageMargin(
+            bottomMargin = binding.root.context.resources.getInteger(R.integer.integer_8),
+            topMargin = binding.root.context.resources.getInteger(R.integer.integer_16)
+        )
+    }
+}
--- a/navi-widgets/src/main/res/drawable/bg_border_dark_grey_fill_color_grey_top_rounded.xml
+++ b/navi-widgets/src/main/res/drawable/bg_border_dark_grey_fill_color_grey_top_rounded.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ /*
+  ~  *
+  ~  *  * Copyright © 2024 by Navi Technologies Private Limited
+  ~  *  * All rights reserved. Strictly confidential
+  ~  *
+  ~  */
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/light_grey_border_color" />
+
+            <corners
+                android:topLeftRadius="@dimen/dp_16"
+                android:topRightRadius="@dimen/dp_16" />
+        </shape>
+    </item>
+    <item
+        android:top="@dimen/dp_1"
+        android:bottom="@dimen/dp_1"
+        android:left="@dimen/dp_1"
+        android:right="@dimen/dp_1">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/grey_alabaster" />
+            <corners
+                android:topLeftRadius="@dimen/dp_16"
+                android:topRightRadius="@dimen/dp_16" />
+        </shape>
+    </item>
+</layer-list>
--- a/navi-widgets/src/main/res/drawable/bg_border_dark_grey_grey_fill_color_bottom_rounded.xml
+++ b/navi-widgets/src/main/res/drawable/bg_border_dark_grey_grey_fill_color_bottom_rounded.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ /*
+  ~  *
+  ~  *  * Copyright © 2024 by Navi Technologies Private Limited
+  ~  *  * All rights reserved. Strictly confidential
+  ~  *
+  ~  */
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/light_grey_border_color" />
+
+            <corners
+                android:bottomLeftRadius="@dimen/dp_16"
+                android:bottomRightRadius="@dimen/dp_16" />
+        </shape>
+    </item>
+    <item
+        android:top="@dimen/dp_1"
+        android:bottom="@dimen/dp_1"
+        android:left="@dimen/dp_1"
+        android:right="@dimen/dp_1">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/grey_alabaster" />
+            <corners
+                android:bottomLeftRadius="@dimen/dp_16"
+                android:bottomRightRadius="@dimen/dp_16" />
+        </shape>
+    </item>
+</layer-list>
--- a/navi-widgets/src/main/res/drawable/bg_border_dark_grey_white_color_rect.xml
+++ b/navi-widgets/src/main/res/drawable/bg_border_dark_grey_white_color_rect.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ /*
+  ~  * Copyright © 2019 by Navi Technologies Private Limited
+  ~  * All rights reserved. Strictly confidential
+  ~  */
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/light_grey_border_color" />
+
+        </shape>
+    </item>
+    <item
+        android:left="@dimen/dp_1"
+        android:right="@dimen/dp_1">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white" />
+        </shape>
+    </item>
+
+</layer-list>
--- a/navi-widgets/src/main/res/layout/layout_navi_chat_transaction_status.xml
+++ b/navi-widgets/src/main/res/layout/layout_navi_chat_transaction_status.xml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+      ~ /*
+      ~  * Copyright © 2023 by Navi Technologies Private Limited
+      ~  * All rights reserved. Strictly confidential
+      ~  */
+      -->
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <com.navi.naviwidgets.widgets.NaviChatTransactionStatusWidgetLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="@dimen/dp_32"
+        android:gravity="bottom"
+        android:orientation="horizontal">
+
+        <androidx.cardview.widget.CardView
+            android:id="@+id/cvReceivedMessage"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/dp_16"
+            android:layout_marginBottom="@dimen/dp_18"
+            app:cardCornerRadius="@dimen/dp_24"
+            app:cardElevation="@dimen/dp_2">
+
+            <androidx.appcompat.widget.AppCompatImageView
+                android:id="@+id/ivReceivedMessage"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:background="@drawable/ic_navi_chat_logo" />
+
+        </androidx.cardview.widget.CardView>
+
+        <LinearLayout
+            android:id="@+id/llTransactionStatus"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/dp_8"
+            android:orientation="vertical">
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/tvMessageTitle"
+                style="@style/NaviChatReceivedMessageStyle"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@drawable/bg_border_dark_grey_fill_color_grey_top_rounded"
+                android:fontFamily="@font/tt_regular"
+                android:paddingVertical="@dimen/dp_16"
+                android:textColor="@color/titleSecondaryColor"
+                app:fontFamily="@font/tt_medium"
+                tools:text="Complaint raised to biller" />
+
+            <androidx.recyclerview.widget.RecyclerView
+                android:id="@+id/rvOptionList"
+                android:paddingVertical="@dimen/dp_6"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@drawable/bg_border_dark_grey_white_color_rect"
+                android:splitMotionEvents="false"
+                tools:itemCount="4"
+                tools:listitem="@layout/layout_navi_chat_transaction_status_message_item" />
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/replyMessage"
+                style="@style/NaviChatReceivedMessageStyle"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@drawable/bg_border_dark_grey_grey_fill_color_bottom_rounded"
+                android:fontFamily="@font/tt_regular"
+                android:paddingTop="@dimen/dp_12"
+                android:paddingBottom="@dimen/dp_16"
+                android:textColor="@color/ctaTitleDark"
+                tools:text="Waiting reply from biller" />
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/tvTimestamp"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/dp_2"
+                android:fontFamily="@font/tt_regular"
+                android:textColor="@color/navi_chat_time_stamp_text_color"
+                android:textSize="@dimen/font_extra_small"
+                app:fontFamily="@font/tt_regular"
+                tools:text="10:20" />
+        </LinearLayout>
+
+    </com.navi.naviwidgets.widgets.NaviChatTransactionStatusWidgetLayout>
+</layout>
--- a/navi-widgets/src/main/res/layout/layout_navi_chat_transaction_status_message_item.xml
+++ b/navi-widgets/src/main/res/layout/layout_navi_chat_transaction_status_message_item.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+    ~ /*
+    ~  * Copyright © 2024 by Navi Technologies Private Limited
+    ~  * All rights reserved. Strictly confidential
+    ~  */
+    -->
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <com.navi.naviwidgets.widgets.NaviChatTransactionStatusMessageItemLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginVertical="@dimen/dp_7">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintBottom_toBottomOf="parent">
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/label"
+                android:layout_width="0dp"
+                android:paddingStart="@dimen/dp_16"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:fontFamily="@font/tt_regular"
+                android:paddingEnd="@dimen/dp_12"
+                android:textColor="@color/titleTertiaryColor"
+                android:textSize="@dimen/sp_12"
+                app:layout_constraintEnd_toStartOf="@id/description"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:text="Transaction Status" />
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/description"
+                android:layout_width="0dp"
+                android:paddingEnd="@dimen/dp_14"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:fontFamily="@font/tt_regular"
+                android:gravity="start"
+                android:textColor="@color/black"
+                android:textSize="@dimen/sp_12"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/label"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:text="12/12/2022  03:05pm" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+    </com.navi.naviwidgets.widgets.NaviChatTransactionStatusMessageItemLayout>
+
+</layout>