Add CYS Fiverr Logo Maker CTA (woocommerce#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
woocommerce#48486 (comment)
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>

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>
 			}
 		/>

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;
 	}

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>