From a203823d6207d954a324c1f209176d9a33b08542 Mon Sep 17 00:00:00 2001
From: "Daniel W. Robert" <danielwrobert@users.noreply.github.com>
Date: Mon, 17 Jun 2024 09:12:56 -0400
Subject: [PATCH] Add CYS Fiverr Logo Maker CTA (#48486)

* Add markup for Fiverr logo maker.

Add text CTA with link to WooCommerce landing page for Fiverr logo
maker in sidebar navigation on the logo view.

* Adjust styles for Fiverr logo maker CTA.

* Update string output to use interpolateComponents

The text in this addition is mixed with string and markup.

This segmentation can lead to translation issues because
different languages have different syntactic structures.

Here, we utilize interpolateComponents to remedy these potential issues.

See
https://github.com/woocommerce/woocommerce/pull/48486#discussion_r1639637477
for context.

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../sidebar-navigation-screen-logo.tsx        | 24 +++++++++++++++++++
 .../customize-store/assembler-hub/style.scss  | 11 +++++++++
 .../48486-add-cys-fiverr-logo-maker-cta       |  4 ++++
 3 files changed, 39 insertions(+)
 create mode 100644 plugins/woocommerce/changelog/48486-add-cys-fiverr-logo-maker-cta

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
index a7dd87cc947..731435d99f8 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
@@ -31,6 +31,8 @@ import {
 } from '@wordpress/block-editor';
 // @ts-ignore No types for this exist yet.
 import { store as noticesStore } from '@wordpress/notices';
+import interpolateComponents from '@automattic/interpolate-components';
+import { Link } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -526,6 +528,28 @@ export const SidebarNavigationScreenLogo = ( {
 						mediaItemData={ mediaItemData }
 						isLoading={ isLoading }
 					/>
+					<div className="woocommerce-customize-store__fiverr-cta-group">
+						<strong>
+							{ __( "DON'T HAVE A LOGO YET?", 'woocommerce' ) }
+						</strong>
+						<p>
+							{ interpolateComponents( {
+								mixedString: __(
+									'Get a custom logo designed by a professional on {{link}}Fiverr{{/link}}.',
+									'woocommerce'
+								),
+								components: {
+									link: (
+										<Link
+											href="https://www.fiverr.com/logo-maker/woo?afp=&cxd_token=917527_33214203&show_join=true"
+											target="_blank"
+											type="external"
+										/>
+									),
+								},
+							} ) }
+						</p>
+					</div>
 				</div>
 			}
 		/>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss b/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
index 227de6af915..1377de4f818 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss
@@ -345,6 +345,17 @@ body.woocommerce-assembler {
 		}
 	}
 
+	.woocommerce-customize-store__fiverr-cta-group {
+		margin-top: 32px;
+		padding-top: 32px;
+		border-top: 1px solid var(--gutenberg-gray-700, #dcdcde);
+		color: var(--gutenberg-gray-900, #1e1e1e);
+
+		p {
+			margin-top: 6px;
+		}
+	}
+
 	.block-editor-block-patterns-list__item-title {
 		display: none;
 	}
diff --git a/plugins/woocommerce/changelog/48486-add-cys-fiverr-logo-maker-cta b/plugins/woocommerce/changelog/48486-add-cys-fiverr-logo-maker-cta
new file mode 100644
index 00000000000..c594227c776
--- /dev/null
+++ b/plugins/woocommerce/changelog/48486-add-cys-fiverr-logo-maker-cta
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+CYS: add CTA to our Fiverr Logo Maker landing page.   </details>  <details>  <summary>Changelog Entry Comment</summary>
\ No newline at end of file