Compare commits
No commits in common. "13054be3771543617290054948c42aac0db50801" and "49eba5278a0841403aebb1a7100d932ffcb37cfe" have entirely different histories.
13054be377
...
49eba5278a
@ -1,69 +0,0 @@
|
|||||||
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 };
|
|
||||||
@ -44,7 +44,6 @@ import { AppProvider } from "@shopify/shopify-app-remix/react";
|
|||||||
import { NavMenu } from "@shopify/app-bridge-react";
|
import { NavMenu } from "@shopify/app-bridge-react";
|
||||||
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
|
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
|
||||||
import { authenticate } from "../shopify.server";
|
import { authenticate } from "../shopify.server";
|
||||||
import { WhatsAppFloatingButton } from "../components/WhatsAppButton";
|
|
||||||
|
|
||||||
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
|
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
|
||||||
|
|
||||||
@ -67,7 +66,6 @@ export default function App() {
|
|||||||
<Link to="/app/help">🆘 Help</Link>
|
<Link to="/app/help">🆘 Help</Link>
|
||||||
</NavMenu>
|
</NavMenu>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
<WhatsAppFloatingButton />
|
|
||||||
</AppProvider>
|
</AppProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user