feat(router): added Payment link new design (#2731)

Co-authored-by: Sahkal Poddar <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kashif <[email protected]>
Co-authored-by: Kashif <[email protected]>

Author: 4 people

crates/api_models/src/admin.rs

@@ -463,9 +463,8 @@ pub struct PaymentLinkConfig {
 #[serde(deny_unknown_fields)]
 
 pub struct PaymentLinkColorSchema {
-    pub primary_color: Option<String>,
-    pub primary_accent_color: Option<String>,
-    pub secondary_color: Option<String>,
+    pub background_primary_color: Option<String>,
+    pub sdk_theme: Option<String>,
 }
 
 #[derive(Clone, Debug, Deserialize, ToSchema, Serialize)]

crates/api_models/src/payments.rs

@@ -3150,6 +3150,7 @@ pub struct PaymentLinkDetails {
     pub merchant_logo: String,
     pub return_url: String,
     pub merchant_name: String,
-    pub order_details: Vec<pii::SecretSerdeValue>,
+    pub order_details: Option<Vec<OrderDetailsWithAmount>>,
     pub max_items_visible_after_collapse: i8,
+    pub sdk_theme: Option<String>,
 }

crates/common_enums/Cargo.toml

@@ -12,9 +12,9 @@ dummy_connector = []
 
 [dependencies]
 diesel = { version = "2.1.0", features = ["postgres"] }
-serde  = { version = "1.0.160", features = [ "derive" ] }
+serde = { version = "1.0.160", features = ["derive"] }
 serde_json = "1.0.96"
-strum  = { version = "0.25", features = [ "derive" ] }
+strum = { version = "0.25", features = ["derive"] }
 time = { version = "0.3.21", features = ["serde", "serde-well-known", "std"] }
 utoipa = { version = "3.3.0", features = ["preserve_order"] }
 

crates/common_utils/src/consts.rs

@@ -29,3 +29,15 @@ pub const SURCHARGE_PERCENTAGE_PRECISION_LENGTH: u8 = 2;
 
 /// Header Key for application overhead of a request
 pub const X_HS_LATENCY: &str = "x-hs-latency";
+
+/// SDK Default Theme const
+pub const DEFAULT_SDK_THEME: &str = "#7EA8F6";
+
+/// Default Payment Link Background color
+pub const DEFAULT_BACKGROUND_COLOR: &str = "#E5E5E5";
+
+/// Default product Img Link
+pub const DEFAULT_PRODUCT_IMG: &str = "https://i.imgur.com/On3VtKF.png";
+
+/// Default Merchant Logo Link
+pub const DEFAULT_MERCHANT_LOGO: &str = "https://i.imgur.com/RfxPFQo.png";

crates/router/src/core/payment_link.rs

@@ -1,6 +1,12 @@
 use api_models::admin as admin_types;
+use common_utils::{
+    consts::{
+        DEFAULT_BACKGROUND_COLOR, DEFAULT_MERCHANT_LOGO, DEFAULT_PRODUCT_IMG, DEFAULT_SDK_THEME,
+    },
+    ext_traits::ValueExt,
+};
 use error_stack::{IntoReport, ResultExt};
-use masking::PeekInterface;
+use masking::{PeekInterface, Secret};
 
 use super::errors::{self, RouterResult, StorageErrorExt};
 use crate::{
@@ -76,12 +82,7 @@ pub async fn intiate_payment_link_flow(
         })
         .transpose()?;
 
-    let order_details = payment_intent
-        .order_details
-        .get_required_value("order_details")
-        .change_context(errors::ApiErrorResponse::MissingRequiredField {
-            field_name: "order_details",
-        })?;
+    let order_details = validate_order_details(payment_intent.order_details)?;
 
     let return_url = if let Some(payment_create_return_url) = payment_intent.return_url {
         payment_create_return_url
@@ -99,6 +100,9 @@ pub async fn intiate_payment_link_flow(
         payment_intent.client_secret,
     )?;
 
+    let (default_sdk_theme, default_background_color) =
+        (DEFAULT_SDK_THEME, DEFAULT_BACKGROUND_COLOR);
+
     let payment_details = api_models::payments::PaymentLinkDetails {
         amount: payment_intent.amount,
         currency,
@@ -116,13 +120,25 @@ pub async fn intiate_payment_link_flow(
         client_secret,
         merchant_logo: payment_link_config
             .clone()
-            .map(|pl_metadata| pl_metadata.merchant_logo.unwrap_or_default())
+            .map(|pl_config| {
+                pl_config
+                    .merchant_logo
+                    .unwrap_or(DEFAULT_MERCHANT_LOGO.to_string())
+            })
             .unwrap_or_default(),
         max_items_visible_after_collapse: 3,
+        sdk_theme: payment_link_config.clone().and_then(|pl_config| {
+            pl_config
+                .color_scheme
+                .map(|color| color.sdk_theme.unwrap_or(default_sdk_theme.to_string()))
+        }),
     };
 
     let js_script = get_js_script(payment_details)?;
-    let css_script = get_color_scheme_css(payment_link_config.clone());
+    let css_script = get_color_scheme_css(
+        payment_link_config.clone(),
+        default_background_color.to_string(),
+    );
     let payment_link_data = services::PaymentLinkFormData {
         js_script,
         sdk_url: state.conf.payment_link.sdk_url.clone(),
@@ -149,38 +165,21 @@ fn get_js_script(
 
 fn get_color_scheme_css(
     payment_link_config: Option<api_models::admin::PaymentLinkConfig>,
+    default_primary_color: String,
 ) -> String {
-    let (default_primary_color, default_accent_color, default_secondary_color) = (
-        "#C6C7C8".to_string(),
-        "#6A8EF5".to_string(),
-        "#0C48F6".to_string(),
-    );
-
-    let (primary_color, primary_accent_color, secondary_color) = payment_link_config
+    let background_primary_color = payment_link_config
         .and_then(|pl_config| {
             pl_config.color_scheme.map(|color| {
-                (
-                    color.primary_color.unwrap_or(default_primary_color.clone()),
-                    color
-                        .primary_accent_color
-                        .unwrap_or(default_accent_color.clone()),
-                    color
-                        .secondary_color
-                        .unwrap_or(default_secondary_color.clone()),
-                )
+                color
+                    .background_primary_color
+                    .unwrap_or(default_primary_color.clone())
             })
         })
-        .unwrap_or((
-            default_primary_color,
-            default_accent_color,
-            default_secondary_color,
-        ));
+        .unwrap_or(default_primary_color);
 
     format!(
         ":root {{
-      --primary-color: {primary_color};
-      --primary-accent-color: {primary_accent_color};
-      --secondary-color: {secondary_color};
+      --primary-color: {background_primary_color};
     }}"
     )
 }
@@ -203,3 +202,36 @@ fn validate_sdk_requirements(
     })?;
     Ok((pub_key, currency, client_secret))
 }
+
+fn validate_order_details(
+    order_details: Option<Vec<Secret<serde_json::Value>>>,
+) -> Result<
+    Option<Vec<api_models::payments::OrderDetailsWithAmount>>,
+    error_stack::Report<errors::ApiErrorResponse>,
+> {
+    let order_details = order_details
+        .map(|order_details| {
+            order_details
+                .iter()
+                .map(|data| {
+                    data.to_owned()
+                        .parse_value("OrderDetailsWithAmount")
+                        .change_context(errors::ApiErrorResponse::InvalidDataValue {
+                            field_name: "OrderDetailsWithAmount",
+                        })
+                        .attach_printable("Unable to parse OrderDetailsWithAmount")
+                })
+                .collect::<Result<Vec<api_models::payments::OrderDetailsWithAmount>, _>>()
+        })
+        .transpose()?;
+
+    let updated_order_details = order_details.map(|mut order_details| {
+        for order in order_details.iter_mut() {
+            if order.product_img_link.is_none() {
+                order.product_img_link = Some(DEFAULT_PRODUCT_IMG.to_string());
+            }
+        }
+        order_details
+    });
+    Ok(updated_order_details)
+}