From 088bc10dcf5080b2e33c637630280a510af0f353 Mon Sep 17 00:00:00 2001
From: "sabrina.bongiovanni" <sabrina.bongiovanni@redturtle.it>
Date: Thu, 14 Nov 2024 11:54:45 +0100
Subject: [PATCH] feat: added CTA component for blocks

---
 packages/volto-blocks/package.json            |  2 +-
 .../components/blocks/IconsAndText/Edit.tsx   | 21 ++++++++---------
 .../components/blocks/IconsAndText/View.tsx   | 15 ++++++------
 .../components/blocks/Testimonials/Edit.tsx   | 21 ++++++++---------
 .../components/blocks/Testimonials/View.tsx   | 15 ++++++------
 .../src/components/blocks/Text1/Edit.tsx      | 21 ++++++++---------
 .../src/components/blocks/Text1/View.tsx      | 15 ++++++------
 .../src/components/blocks/Text6/Edit.tsx      | 21 ++++++++---------
 .../src/components/blocks/Text6/View.tsx      | 15 ++++++------
 .../src/components/blocks/Text7/Edit.tsx      | 21 ++++++++---------
 .../src/components/blocks/Text7/View.tsx      | 23 +++++++++----------
 .../src/components/blocks/commons/CTA.tsx     | 20 ++++++++++++++++
 12 files changed, 110 insertions(+), 100 deletions(-)
 create mode 100644 packages/volto-blocks/src/components/blocks/commons/CTA.tsx

diff --git a/packages/volto-blocks/package.json b/packages/volto-blocks/package.json
index 08c77f3..d65f139 100644
--- a/packages/volto-blocks/package.json
+++ b/packages/volto-blocks/package.json
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@loadable/component": "5.14.1",
-    "@plone/components": "2.0.0-alpha.13",
+    "@plone/components": "^2.1.1",
     "@redturtle/volto-slate-extras": "workspace:^2.0.1",
     "classnames": "2.2.6",
     "lodash": "4.17.21",
diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx
index 09dda97..f113946 100644
--- a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx
@@ -15,6 +15,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { v4 as uuid } from 'uuid';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type IconsAndTextEditProps = BlockEditProps & {
   data: IconsAndTextData;
@@ -123,17 +124,15 @@ export default function Edit(props: IconsAndTextEditProps) {
               ))}
           </div>
           {data.linkHref?.[0] && (
-            <div className={cx('block-iconsandtext-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                  e.preventDefault();
-                }}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                e.preventDefault();
+              }}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </Container>
       </section>
diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx
index 27d00ff..20258c5 100644
--- a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx
@@ -6,6 +6,7 @@ import ViewItem from '@redturtle/volto-blocks/components/blocks/IconsAndText/Vie
 import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss';
 import cx from 'classnames';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: IconsAndTextData;
@@ -53,14 +54,12 @@ export default function View({ data, className, style }: Props) {
               ))}
           </div>
           {data.linkHref?.[0] && (
-            <div className={cx('block-iconsandtext-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </Container>
       </section>
diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx
index 64b6742..daad1be 100644
--- a/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/Testimonials/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text7.svg';
 import type { TestimonialsData } from '@redturtle/volto-blocks/components/blocks/Testimonials/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type TestimonialsEditProps = BlockEditProps & {
   data: TestimonialsData;
@@ -91,17 +92,15 @@ export default function Edit(props: TestimonialsEditProps) {
               placeholder={intl.formatMessage(messages.text)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-testimonials-cta', styles.cta)}>
-                <UniversalLink
-                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                  openLinkInNewTab={false}
-                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                    e.preventDefault();
-                  }}
-                >
-                  {data.linkTitle}
-                </UniversalLink>
-              </div>
+              <CTA
+                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                linkTitle={data.linkTitle}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              />
             )}
           </div>
         </Container>
diff --git a/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx b/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx
index 0ebc3be..ec1f684 100644
--- a/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/Testimonials/View.tsx
@@ -7,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Testimonials/style
 import type { TestimonialsData } from '@redturtle/volto-blocks/components/blocks/Testimonials/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: TestimonialsData;
@@ -48,14 +49,12 @@ export default function View({ data, className, style }: Props) {
             </div>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-testimonials-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </div>
       </Container>
diff --git a/packages/volto-blocks/src/components/blocks/Text1/Edit.tsx b/packages/volto-blocks/src/components/blocks/Text1/Edit.tsx
index a70f30e..01a9055 100644
--- a/packages/volto-blocks/src/components/blocks/Text1/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/Text1/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text1.svg';
 import type { Text1Data } from '@redturtle/volto-blocks/components/blocks/Text1/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Text1EditProps = BlockEditProps & {
   data: Text1Data;
@@ -64,17 +65,15 @@ export default function Edit(props: Text1EditProps) {
               placeholder={intl.formatMessage(messages.title)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-text1-cta', styles.cta)}>
-                <UniversalLink
-                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                  openLinkInNewTab={false}
-                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                    e.preventDefault();
-                  }}
-                >
-                  {data.linkTitle}
-                </UniversalLink>
-              </div>
+              <CTA
+                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                linkTitle={data.linkTitle}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              />
             )}
           </div>
           <div className={cx('block-text1-wide-col', styles.wide)}>
diff --git a/packages/volto-blocks/src/components/blocks/Text1/View.tsx b/packages/volto-blocks/src/components/blocks/Text1/View.tsx
index 5dde9e3..f8f3ad2 100644
--- a/packages/volto-blocks/src/components/blocks/Text1/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/Text1/View.tsx
@@ -7,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Text1/styles.modul
 import type { Text1Data } from '@redturtle/volto-blocks/components/blocks/Text1/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: Text1Data;
@@ -29,14 +30,12 @@ export default function View({ data, className, style }: Props) {
             </h2>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-text1-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </div>
         <div className={cx('block-text1-wide-col', styles.wide)}>
diff --git a/packages/volto-blocks/src/components/blocks/Text6/Edit.tsx b/packages/volto-blocks/src/components/blocks/Text6/Edit.tsx
index 71f68a9..8e0df49 100644
--- a/packages/volto-blocks/src/components/blocks/Text6/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/Text6/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text6.svg';
 import type { Text6Data } from '@redturtle/volto-blocks/components/blocks/Text6/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Text6EditProps = BlockEditProps & {
   data: Text6Data;
@@ -73,17 +74,15 @@ export default function Edit(props: Text6EditProps) {
             placeholder={intl.formatMessage(messages.text)}
           />
           {data.linkHref?.[0] && (
-            <div className={cx('block-text6-cta', styles.cta)}>
-              <UniversalLink
-                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                openLinkInNewTab={false}
-                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                  e.preventDefault();
-                }}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+              linkTitle={data.linkTitle}
+              onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                e.preventDefault();
+              }}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </Container>
       </section>
diff --git a/packages/volto-blocks/src/components/blocks/Text6/View.tsx b/packages/volto-blocks/src/components/blocks/Text6/View.tsx
index c72b59e..5134db1 100644
--- a/packages/volto-blocks/src/components/blocks/Text6/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/Text6/View.tsx
@@ -7,6 +7,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Text6/styles.modul
 import type { Text6Data } from '@redturtle/volto-blocks/components/blocks/Text6/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: Text6Data;
@@ -33,14 +34,12 @@ export default function View({ data, className, style }: Props) {
           </div>
         )}
         {data.linkHref?.[0] && (
-          <div className={cx('block-text6-cta', styles.cta)}>
-            <UniversalLink
-              href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-              openLinkInNewTab={false}
-            >
-              {data.linkTitle}
-            </UniversalLink>
-          </div>
+          <CTA
+            href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+            linkTitle={data.linkTitle}
+            openLinkInNewTab={false}
+            {...data}
+          />
         )}
       </Container>
     </section>
diff --git a/packages/volto-blocks/src/components/blocks/Text7/Edit.tsx b/packages/volto-blocks/src/components/blocks/Text7/Edit.tsx
index bc6bacb..ef3d7f0 100644
--- a/packages/volto-blocks/src/components/blocks/Text7/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/Text7/Edit.tsx
@@ -15,6 +15,7 @@ import blockIcon from '@redturtle/volto-blocks/icons/text7.svg';
 import type { Text7Data } from '@redturtle/volto-blocks/components/blocks/Text7/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Text7EditProps = BlockEditProps & {
   data: Text7Data;
@@ -109,17 +110,15 @@ export default function Edit(props: Text7EditProps) {
               placeholder={intl.formatMessage(messages.text)}
             />
             {data.linkHref?.[0] && (
-              <div className={cx('block-text7-cta', styles.cta)}>
-                <UniversalLink
-                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
-                  openLinkInNewTab={false}
-                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
-                    e.preventDefault();
-                  }}
-                >
-                  {data.linkTitle}
-                </UniversalLink>
-              </div>
+              <CTA
+                href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                linkTitle={data.linkTitle}
+                onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                  e.preventDefault();
+                }}
+                openLinkInNewTab={false}
+                {...data}
+              />
             )}
           </div>
         </Container>
diff --git a/packages/volto-blocks/src/components/blocks/Text7/View.tsx b/packages/volto-blocks/src/components/blocks/Text7/View.tsx
index 8489f6f..ed46296 100644
--- a/packages/volto-blocks/src/components/blocks/Text7/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/Text7/View.tsx
@@ -8,6 +8,7 @@ import styles from '@redturtle/volto-blocks/components/blocks/Text7/styles.modul
 import type { Text7Data } from '@redturtle/volto-blocks/components/blocks/Text7/schema';
 
 import config from '@plone/registry';
+import CTA from '../commons/CTA';
 
 type Props = BlockViewProps & {
   data: Text7Data;
@@ -67,18 +68,16 @@ export default function View({ data, className, style }: Props) {
             </div>
           )}
           {data.linkHref?.[0] && (
-            <div className={cx('block-text7-cta', styles.cta)}>
-              <UniversalLink
-                href={
-                  data.linkHref
-                    ? flattenToAppURL(data.linkHref[0]['@id'])
-                    : undefined
-                }
-                openLinkInNewTab={false}
-              >
-                {data.linkTitle}
-              </UniversalLink>
-            </div>
+            <CTA
+              href={
+                data.linkHref
+                  ? flattenToAppURL(data.linkHref[0]['@id'])
+                  : undefined
+              }
+              linkTitle={data.linkTitle}
+              openLinkInNewTab={false}
+              {...data}
+            />
           )}
         </div>
       </Container>
diff --git a/packages/volto-blocks/src/components/blocks/commons/CTA.tsx b/packages/volto-blocks/src/components/blocks/commons/CTA.tsx
new file mode 100644
index 0000000..51e0956
--- /dev/null
+++ b/packages/volto-blocks/src/components/blocks/commons/CTA.tsx
@@ -0,0 +1,20 @@
+import { type ComponentProps } from 'react';
+import { UniversalLink } from '@plone/volto/components';
+
+const CTA = (props: ComponentProps<typeof UniversalLink>) => {
+  const { href, linkTitle, onClick, openLinkInNewTab } = props;
+  return (
+    <div>
+      <UniversalLink
+        href={href}
+        openLinkInNewTab={openLinkInNewTab}
+        onClick={onClick}
+        {...props}
+      >
+        {linkTitle}
+      </UniversalLink>
+    </div>
+  );
+};
+
+export default CTA;