fix: support mail and phone clickable on mobile

Author: malessani

components/composite/StepComplete/SupportMessage/index.tsx

@@ -9,14 +9,6 @@ export const SupportMessage: React.FC<Props> = ({
   supportPhone,
   supportEmail,
 }) => {
-  const handleEmail = () => {
-    return window.open(`mailto:${supportEmail}`)
-  }
-
-  const handlePhone = () => {
-    return window.open(`tel:${supportEmail}`)
-  }
-
   const setI18nKey = () => {
     if (supportPhone && supportEmail) {
       return "stepComplete.fullSupport"
@@ -38,18 +30,11 @@ export const SupportMessage: React.FC<Props> = ({
       i18nKey={setI18nKey()}
       values={{ email: supportEmail, phone: supportPhone }}
       components={{
-        WrapperEmail: (
-          <strong
-            className="text-black border-b border-gray-400 cursor-pointer"
-            onClick={handleEmail}
-          />
-        ),
-        WrapperPhone: (
-          <strong
-            className="text-black border-b border-gray-400 cursor-pointer"
-            onClick={handlePhone}
-          />
+        WrapperStyle: (
+          <strong className="text-black border-b border-gray-400 cursor-pointer" />
         ),
+        WrapperEmail: <a href={`mailto:${supportEmail}`} />,
+        WrapperPhone: <a href={`tel:${supportPhone}`} />,
       }}
     />
   )

public/static/locales/en/common.json

@@ -117,9 +117,9 @@
         "title": "Order successfully placed!",
         "description": "Your order No: <WrapperOrderId>#{{orderNumber}}</WrapperOrderId>",
         "continue": "Continue shopping",
-        "supportEmail": "If you have any questions about your order, you can email us at <br /><WrapperEmail>{{email}}</WrapperEmail>",
-        "supportPhone": "If you have any questions about your order, you can call us at <br /><WrapperPhone>{{phone}}</WrapperPhone>",
-        "fullSupport": "If you have any questions about your order, you can email us at <br /><WrapperEmail>{{email}}</WrapperEmail> or call us at <WrapperPhone>{{phone}}</WrapperPhone>",
+        "supportEmail": "If you have any questions about your order, you can email us at <br /><WrapperStyle><WrapperEmail>{{email}}</WrapperEmail></WrapperStyle>",
+        "supportPhone": "If you have any questions about your order, you can call us at <br /><WrapperStyle><WrapperPhone>{{phone}}</WrapperPhone></WrapperStyle>",
+        "fullSupport": "If you have any questions about your order, you can email us at <br /><WrapperStyle><WrapperEmail>{{email}}</WrapperEmail></WrapperStyle> or call us at <WrapperStyle><WrapperPhone>{{phone}}</WrapperPhone></WrapperStyle>",
         "ship_to": "Shipped to:",
         "billed_to": "Billed to:",
         "payment": "Payment:",

public/static/locales/it/common.json

@@ -117,9 +117,9 @@
         "title": "Ordine effettuato con successo!",
         "description": "Il tuo ordine No: <WrapperOrderId>#{{orderNumber}}</WrapperOrderId>",
         "continue": "Continua lo shopping",
-        "supportEmail": "Se hai domande sul tuo ordine, puoi inviarci un'e-mail a <WrapperEmail>{{email}}</WrapperEmail>",
-        "supportPhone": "Se hai domande sul tuo ordine, puoi chiamarci al numero <WrapperPhone>{{phone}}</WrapperPhone>",
-        "fullSupport": "Se hai domande sul tuo ordine, puoi inviarci un'email a <WrapperEmail>{{email}}</WrapperEmail> o chiamarci al <WrapperPhone>{{phone}}</WrapperPhone>",
+        "supportEmail": "Se hai domande sul tuo ordine, puoi inviarci un'e-mail a <br /><WrapperStyle><WrapperEmail>{{email}}</WrapperEmail></WrapperStyle>",
+        "supportPhone": "Se hai domande sul tuo ordine, puoi chiamarci al numero <br /><WrapperStyle><WrapperPhone>{{phone}}</WrapperPhone></WrapperStyle>",
+        "fullSupport": "Se hai domande sul tuo ordine, puoi inviarci un'email a <br /><WrapperStyle><WrapperEmail>{{email}}</WrapperEmail></WrapperStyle> o chiamarci al <WrapperStyle><WrapperPhone>{{phone}}</WrapperPhone></WrapperStyle>",
         "ship_to": "Spedito a:",
         "billed_to": "Fatturato a:",
         "payment": "Pagamento:",