SBIT-316: footer's subscription component's redirection issues fixed

src/components/Footer/Subscription/subscription.js

@@ -1,43 +1,59 @@
 import { Link } from "gatsby"
+import PropTypes from "prop-types"
 import React from "react"
-import { useFooter } from "../../../hooks"
+import { useFooter, useLandingUrl } from "../../../hooks"
 import "./subscription.scss"
 
+const SubscriptionLink = ({ children, subscriptionUrl, landing }) => {
+  const isExternalLink = subscriptionUrl?.startsWith('http')
+
+  if (landing) {
+    return <Link to={landing}>{children}</Link>
+  } else if (isExternalLink) {
+    return (
+      <a href={subscriptionUrl} rel="noopener noreferrer" target="_blank">
+        {children}
+      </a>
+    )
+  } else {
+    return <a href={subscriptionUrl}>{children}</a>
+  }
+}
+
+SubscriptionLink.propTypes = {
+  children: PropTypes.node.isRequired,
+  subscriptionUrl: PropTypes.string,
+  landing: PropTypes.string,
+}
+
 export default function Subscription() {
   const data = useFooter()
+  const getUrl = useLandingUrl()
+
   const dataSubscription = data?.allStrapiLayout?.nodes[0]?.footer?.subscription
+
   const subscriptionUrl = dataSubscription?.url
-  const subscriptionLanding = dataSubscription?.landing_page?.slug
+  const landing = getUrl(dataSubscription?.landing_page?.slug)
 
-  const isExternalLink = subscriptionUrl?.startsWith('http')
+  if (!dataSubscription?.landing_page && !subscriptionUrl) return null
 
   return (
     <div className="ContactData__Item contactData-container">
       <h6 className="titleSubscription">{dataSubscription?.title}</h6>
       <div>
         <div className="ContactData__Form d-flex flex-md-column justify-content-between">
           <button className="col-5">
-            {
-              isExternalLink ? (
-                <a href={subscriptionUrl} target="_blank" rel="noopener noreferrer">¡Aquí!</a>
-              ) : (
-                <Link to={subscriptionLanding}>¡Aquí!</Link>
-              )
-            }
-            {/* <Link to="/recibe-nuestra-newsletter" >¡Aquí!</Link> */}
+            <SubscriptionLink subscriptionUrl={subscriptionUrl} landing={landing}>
+              {dataSubscription?.callToAction}
+            </SubscriptionLink>
           </button>
         </div>
       </div>
       <button className="col-5 contactData-mobile_button">
-        {
-          isExternalLink ? (
-            <a href={subscriptionUrl} target="_blank" rel="noopener noreferrer">{dataSubscription?.title}</a>
-          ) : (
-            <Link to={subscriptionLanding}>{dataSubscription?.title}</Link>
-          )
-        }
-        {/* <Link to="/recibe-nuestra-newsletter" >{dataSubscription?.title}</Link> */}
+        <SubscriptionLink subscriptionUrl={subscriptionUrl} landing={landing}>
+          {dataSubscription?.title}
+        </SubscriptionLink>
       </button>
     </div>
   )
-}
+}

src/hooks/useFooter.js

@@ -92,6 +92,7 @@ const useFooter = () => {
             subscription {
               title
               url
+              callToAction
               landing_page {
                 slug
               }

src/schema/layoutSchema.js

@@ -118,6 +118,7 @@ type StrapiLayoutNavbarNavButtonLanding_page {
     id: Int
     title: String
     url: String
+    callToAction: String
     landing_page: StrapiLayoutFooterSubscriptionLanding
   }