@cliqdigital/bloomreach-sdk
Version:
React component library for integrating Bloomreach SDK with push notifications support
47 lines (46 loc) • 2.71 kB
JavaScript
;
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConsentBanner = void 0;
var react_1 = __importDefault(require("react"));
var react_2 = require("react");
var BloomreachContext_1 = require("../context/BloomreachContext");
function ConsentBanner(_a) {
var _b = _a.title, title = _b === void 0 ? "Enable Push Notifications" : _b, _c = _a.description, description = _c === void 0 ? "Get updates on new content, offers, and important announcements." : _c, _d = _a.acceptLabel, acceptLabel = _d === void 0 ? "Allow" : _d, _e = _a.rejectLabel, rejectLabel = _e === void 0 ? "Not Now" : _e, onAccept = _a.onAccept, onReject = _a.onReject;
var _f = (0, react_2.useState)(true), isVisible = _f[0], setIsVisible = _f[1];
var setHasConsent = (0, BloomreachContext_1.useBloomreachContext)().setHasConsent;
var handleAccept = function () {
if (Notification.permission !== "granted") {
Notification.requestPermission().then(function (permission) {
if (permission === "granted") {
setHasConsent(true);
onAccept === null || onAccept === void 0 ? void 0 : onAccept();
}
});
}
else {
setHasConsent(true);
onAccept === null || onAccept === void 0 ? void 0 : onAccept();
}
setIsVisible(false);
};
var handleReject = function () {
setHasConsent(false);
onReject === null || onReject === void 0 ? void 0 : onReject();
setIsVisible(false);
};
if (!isVisible) {
return null;
}
return (react_1.default.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg border-t border-gray-200 z-50" },
react_1.default.createElement("div", { className: "max-w-screen-md mx-auto" },
react_1.default.createElement("h3", { className: "text-lg font-semibold mb-2" }, title),
react_1.default.createElement("p", { className: "mb-4 text-gray-600" }, description),
react_1.default.createElement("div", { className: "flex gap-4" },
react_1.default.createElement("button", { onClick: handleAccept, className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" }, acceptLabel),
react_1.default.createElement("button", { onClick: handleReject, className: "px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 transition-colors" }, rejectLabel)))));
}
exports.ConsentBanner = ConsentBanner;