MOHAN
13054be377
root.jsx already renders a support chat FAB at bottom:24px/right:24px; place the WhatsApp button beside it instead of underneath. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
70 lines
3.5 KiB
JavaScript
70 lines
3.5 KiB
JavaScript
import { Button } from '@shopify/polaris';
|
|
|
|
const WHATSAPP_NUMBER = '+16476797651';
|
|
const WHATSAPP_NUMBER_DIALED = WHATSAPP_NUMBER.replace(/[^\d]/g, '');
|
|
|
|
export function getWhatsAppLink(message) {
|
|
const base = `https://wa.me/${WHATSAPP_NUMBER_DIALED}`;
|
|
return message ? `${base}?text=${encodeURIComponent(message)}` : base;
|
|
}
|
|
|
|
const WhatsAppIcon = () => (
|
|
<svg
|
|
viewBox="0 0 32 32"
|
|
width="18"
|
|
height="18"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<path d="M16.004 0C7.166 0 0 7.163 0 16c0 2.82.744 5.554 2.156 7.965L0 32l8.24-2.13A15.93 15.93 0 0 0 16.004 32C24.84 32 32 24.837 32 16S24.84 0 16.004 0zm0 29.235c-2.6 0-5.14-.7-7.35-2.02l-.527-.312-4.89 1.264 1.31-4.77-.343-.49A13.19 13.19 0 0 1 2.77 16c0-7.31 5.95-13.235 13.234-13.235S29.238 8.69 29.238 16 23.288 29.235 16.004 29.235zm7.24-9.905c-.397-.198-2.35-1.16-2.714-1.293-.364-.133-.63-.198-.894.198-.264.397-1.026 1.293-1.258 1.558-.232.264-.463.298-.86.1-.397-.198-1.677-.618-3.195-1.972-1.18-1.053-1.977-2.353-2.209-2.75-.232-.397-.025-.612.173-.81.178-.177.397-.463.596-.694.198-.232.264-.397.397-.662.132-.264.066-.496-.033-.694-.1-.198-.893-2.155-1.224-2.95-.322-.774-.65-.67-.893-.682l-.762-.013c-.264 0-.694.099-1.058.496-.364.397-1.388 1.356-1.388 3.306 0 1.95 1.421 3.834 1.62 4.1.198.264 2.797 4.27 6.78 5.987.947.409 1.686.653 2.263.836.951.303 1.816.26 2.5.158.763-.114 2.35-.96 2.681-1.888.331-.926.331-1.72.232-1.887-.1-.166-.364-.264-.762-.462z"/>
|
|
</svg>
|
|
);
|
|
|
|
export default function WhatsAppButton({ message, label = 'Chat on WhatsApp', size, fullWidth }) {
|
|
return (
|
|
<Button
|
|
url={getWhatsAppLink(message)}
|
|
external
|
|
icon={WhatsAppIcon}
|
|
size={size}
|
|
fullWidth={fullWidth}
|
|
>
|
|
{label}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function WhatsAppFloatingButton() {
|
|
return (
|
|
<a
|
|
href={getWhatsAppLink("Hi! I'd like help with Data4Autos.")}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Contact us on WhatsApp"
|
|
title={`WhatsApp: ${WHATSAPP_NUMBER}`}
|
|
style={{
|
|
position: 'fixed',
|
|
bottom: '24px',
|
|
right: '92px',
|
|
width: '54px',
|
|
height: '54px',
|
|
borderRadius: '50%',
|
|
background: '#25D366',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
|
|
zIndex: 1000,
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
<svg viewBox="0 0 32 32" width="30" height="30" fill="currentColor" aria-hidden="true">
|
|
<path d="M16.004 0C7.166 0 0 7.163 0 16c0 2.82.744 5.554 2.156 7.965L0 32l8.24-2.13A15.93 15.93 0 0 0 16.004 32C24.84 32 32 24.837 32 16S24.84 0 16.004 0zm0 29.235c-2.6 0-5.14-.7-7.35-2.02l-.527-.312-4.89 1.264 1.31-4.77-.343-.49A13.19 13.19 0 0 1 2.77 16c0-7.31 5.95-13.235 13.234-13.235S29.238 8.69 29.238 16 23.288 29.235 16.004 29.235zm7.24-9.905c-.397-.198-2.35-1.16-2.714-1.293-.364-.133-.63-.198-.894.198-.264.397-1.026 1.293-1.258 1.558-.232.264-.463.298-.86.1-.397-.198-1.677-.618-3.195-1.972-1.18-1.053-1.977-2.353-2.209-2.75-.232-.397-.025-.612.173-.81.178-.177.397-.463.596-.694.198-.232.264-.397.397-.662.132-.264.066-.496-.033-.694-.1-.198-.893-2.155-1.224-2.95-.322-.774-.65-.67-.893-.682l-.762-.013c-.264 0-.694.099-1.058.496-.364.397-1.388 1.356-1.388 3.306 0 1.95 1.421 3.834 1.62 4.1.198.264 2.797 4.27 6.78 5.987.947.409 1.686.653 2.263.836.951.303 1.816.26 2.5.158.763-.114 2.35-.96 2.681-1.888.331-.926.331-1.72.232-1.887-.1-.166-.364-.264-.762-.462z"/>
|
|
</svg>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
export { WHATSAPP_NUMBER };
|