react_size_chart
Version:
Vestfoy smart size charts react package
458 lines • 22.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Border = exports.EAlignButton = exports.EButtonIcon = void 0;
exports.VestofySizeChartPopup = VestofySizeChartPopup;
exports.VestofyShowBtn = VestofyShowBtn;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var dangerously_set_html_content_1 = tslib_1.__importDefault(require("dangerously-set-html-content"));
var jquery_1 = tslib_1.__importDefault(require("jquery"));
require("../../assets/bootstrap.min.css");
require("../../assets/vestofy.css");
var EButtonIcon;
(function (EButtonIcon) {
EButtonIcon["meter_icon"] = "meter";
EButtonIcon["meter_icon_dark"] = "meter-dark";
})(EButtonIcon || (exports.EButtonIcon = EButtonIcon = {}));
var EAlignButton;
(function (EAlignButton) {
EAlignButton[EAlignButton["eAlignLeft"] = 0] = "eAlignLeft";
EAlignButton[EAlignButton["eAlignCenter"] = 1] = "eAlignCenter";
EAlignButton[EAlignButton["eAlignRight"] = 2] = "eAlignRight";
})(EAlignButton || (exports.EAlignButton = EAlignButton = {}));
var Border = /** @class */ (function () {
function Border() {
this.BorderColor = "#FFFFFF";
this.BorderWidth = 0;
this.BorderRadius = 0;
}
return Border;
}());
exports.Border = Border;
var g_sHtmlContent = "";
var devUrl = false;
var isString = function (value) { return typeof value === 'string'; };
function SaveStorageDialogContent(a_sHtmlDialogContent, a_sShop, a_sSizeChartId, a_sProductID, a_sVendor, a_sProductType, a_sTags) {
if (a_sSizeChartId === void 0) { a_sSizeChartId = null; }
if (a_sProductID === void 0) { a_sProductID = null; }
if (a_sVendor === void 0) { a_sVendor = null; }
if (a_sProductType === void 0) { a_sProductType = null; }
if (a_sTags === void 0) { a_sTags = null; }
try {
if (isString(a_sSizeChartId)) {
sessionStorage.setItem(a_sShop + a_sSizeChartId, a_sHtmlDialogContent);
}
else if (isString(a_sProductID)) {
sessionStorage.setItem(a_sShop + a_sProductID, a_sHtmlDialogContent);
}
else if (isString(a_sVendor)) {
sessionStorage.setItem(a_sShop + a_sVendor, a_sHtmlDialogContent);
}
else if (isString(a_sProductType)) {
sessionStorage.setItem(a_sShop + a_sProductType, a_sHtmlDialogContent);
}
else if (isString(a_sTags)) {
sessionStorage.setItem(a_sShop + a_sTags, a_sHtmlDialogContent);
}
else {
console.warn('Cant save content to storage');
}
}
catch (e) {
console.error('Save content to localstorage exception\n', e);
}
}
function LoadStorageDialogContent(a_sShop, a_sSizeChartId, a_sVendor, a_sProductType, a_sTags) {
if (a_sSizeChartId === void 0) { a_sSizeChartId = null; }
if (a_sVendor === void 0) { a_sVendor = null; }
if (a_sProductType === void 0) { a_sProductType = null; }
if (a_sTags === void 0) { a_sTags = null; }
try {
if (isString(a_sSizeChartId)) {
return sessionStorage.getItem(a_sShop + a_sSizeChartId);
}
else if (isString(a_sVendor)) {
return sessionStorage.getItem(a_sShop + a_sVendor);
}
else if (isString(a_sProductType)) {
return sessionStorage.getItem(a_sShop + a_sProductType);
}
else if (isString(a_sTags)) {
return sessionStorage.getItem(a_sShop + a_sTags);
}
else {
return null;
}
}
catch (e) {
console.error('Load content from storage exception\n', e);
return null;
}
}
var defaultBtnOptions = {
/**
* Text displayed on the button that open the guid popup (default: Size Guide)
*/
buttonText: 'Size Guide',
/**
* Text size displayed on the button that open the guid popup (default: 15px)
*/
buttonTextSize: 15,
/**
* Text color (hex format) displayed on the button that open the guid popup (default: #000000)
*/
buttonTextColor: '#000000',
/**
* Background color (hex format) of the button that open the guid popup (default: transparent)
*/
buttonBackgroundColor: '#FF000000',
/**
* Image displayed on the side of button
*/
buttonImgSrc: EButtonIcon.meter_icon.toString(),
/**
* Button alignment in parent component rule
*/
btnAlign: EAlignButton.eAlignLeft,
/*
* Button border
*/
border: { BorderColor: "#FFFFFFFF", BorderWidth: 0, BorderRadius: 0 },
/**
* Show size advice on parent window (product window)
*/
advice: true,
/**
* Size advice background color
*/
adviceBackgroundColor: "#FAB823",
/**
* Clearing sessionStorage every reload and some additional log (Use in while development)
*/
dev: false
};
var defaultPopupOptions = {
dialogTitle: 'Size Guide',
};
function buildBtnOptions(a_oPropsOptions) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
try {
var l_oOptions = {
buttonText: (_a = a_oPropsOptions.buttonText) !== null && _a !== void 0 ? _a : defaultBtnOptions.buttonText,
buttonTextSize: (_b = a_oPropsOptions.buttonTextSize) !== null && _b !== void 0 ? _b : defaultBtnOptions.buttonTextSize,
buttonTextColor: (_c = a_oPropsOptions.buttonTextColor) !== null && _c !== void 0 ? _c : defaultBtnOptions.buttonTextColor,
buttonBackgroundColor: (_d = a_oPropsOptions.buttonBackgroundColor) !== null && _d !== void 0 ? _d : defaultBtnOptions.buttonBackgroundColor,
buttonImgSrc: (_e = a_oPropsOptions.buttonImgSrc) !== null && _e !== void 0 ? _e : defaultBtnOptions.buttonImgSrc,
btnAlign: (_f = a_oPropsOptions.btnAlign) !== null && _f !== void 0 ? _f : defaultBtnOptions.btnAlign,
border: (_g = a_oPropsOptions.border) !== null && _g !== void 0 ? _g : defaultBtnOptions.border,
advice: (_h = a_oPropsOptions.advice) !== null && _h !== void 0 ? _h : defaultBtnOptions.advice,
adviceText: (_j = a_oPropsOptions.adviceText) !== null && _j !== void 0 ? _j : 'Find your best size',
adviceBackgroundColor: (_k = a_oPropsOptions.adviceBackgroundColor) !== null && _k !== void 0 ? _k : defaultBtnOptions.adviceBackgroundColor,
dev: (_l = a_oPropsOptions.dev) !== null && _l !== void 0 ? _l : defaultBtnOptions.dev
};
return l_oOptions;
}
catch (e) {
console.error('build options error:\n', e);
return defaultBtnOptions;
}
}
function buildPopupOptions(a_oPropsOptions) {
var _a;
try {
var l_oOptions = {
dialogTitle: (_a = a_oPropsOptions.dialogTitle) !== null && _a !== void 0 ? _a : defaultPopupOptions.dialogTitle,
// dev: typeof a_oPropsOptions.dev != 'undefined' ? a_oPropsOptions.dev : defaultPopupOptions.dev
};
return l_oOptions;
}
catch (e) {
console.error('build options error:\n', e);
return defaultPopupOptions;
}
}
var g_oVestofyContentLoadedEvent = new CustomEvent("VestofyContentLoadedEvent", {
detail: {},
bubbles: true,
cancelable: true,
composed: false,
});
function addScript(src, id, integrity, crossorigin, onLoad) {
try {
var existing = document.getElementById(id);
if (existing) {
onLoad();
return existing;
}
else {
var script = document.createElement("script");
script.src = src;
script.id = id;
if (integrity) {
script.integrity = integrity;
}
if (crossorigin) {
script.crossOrigin = crossorigin;
}
script.async = true;
script.onload = function () {
if (onLoad) {
onLoad();
}
};
document.head.appendChild(script);
return script;
}
}
catch (e) {
console.error('Add script exception\n', e);
return null;
}
}
// *********************************************************
// ------Download Vestofy popup content---------------------
// *********************************************************
function loadFittingRoom(a_sShop, a_sPlatform, a_sOutlineImage, a_sBottomDescription, a_sKey, a_sSizeChartId, a_sVendor, a_sProductType, a_sTags, a_sLang) {
if (a_sPlatform === void 0) { a_sPlatform = 'Standalone'; }
if (a_sOutlineImage === void 0) { a_sOutlineImage = undefined; }
if (a_sBottomDescription === void 0) { a_sBottomDescription = undefined; }
if (a_sKey === void 0) { a_sKey = ""; }
if (a_sSizeChartId === void 0) { a_sSizeChartId = undefined; }
if (a_sVendor === void 0) { a_sVendor = undefined; }
if (a_sProductType === void 0) { a_sProductType = undefined; }
if (a_sTags === void 0) { a_sTags = undefined; }
if (a_sLang === void 0) { a_sLang = "en"; }
return new Promise(function (resolve, reject) {
try {
var l_sSrc_1 = "https://proxy.vestofy.com/proxy/";
if (devUrl) {
l_sSrc_1 = "https://vestofy-proxy.tunnelto.dev/proxy/";
console.warn('Vestofy: About to load debug fitting room\n', l_sSrc_1);
}
var params = {
size_chart_id: a_sSizeChartId,
product_id: undefined,
product_type: a_sProductType,
product_vendor: a_sVendor,
product_tags: a_sTags,
shop: a_sShop,
key: a_sKey,
locale: a_sLang,
platform: a_sPlatform,
outline_image: a_sOutlineImage,
bottom_description: a_sBottomDescription,
add_header: false
};
var queryString = Object.entries(params)
.filter(function (_a) {
var _ = _a[0], value = _a[1];
return value !== undefined && value !== null && value !== "";
})
.map(function (_a) {
var k = _a[0], v = _a[1];
return "".concat(encodeURIComponent(k), "=").concat(encodeURIComponent(v));
})
.join("&");
//l_sSrc = `${l_sSrc}?size_chart_id=${a_sSizeChartId}&product_id=${a_sProductID}&collection_id=${a_sCollectionID}&shop=${a_sShop}&key=${a_sKey}&locale=${a_sLang}&platform=${a_sPlatform}&outline_image=${a_sOutlineImage}&bottom_description=${a_sBottomDescription}&add_header=${false}`;
l_sSrc_1 = "".concat(l_sSrc_1, "?").concat(queryString);
jquery_1.default.ajax({
url: encodeURI(l_sSrc_1),
dataType: "jsonp",
method: "GET",
success: function (a_oDialogData) {
try {
window.$ = jquery_1.default; /**Add jQuery to dialog html */
if (a_oDialogData.html) {
resolve(a_oDialogData.html);
}
else {
resolve(a_oDialogData);
}
}
catch (e) {
console.error("insert Vestofy html exception\n", e);
// reject("Error to parse data, Please try to refresh");
resolve("<h3>Ooops, Something wrong: Error to parse data :(</br>Try to refresh.</br>If the problem continue contact support: contact@vestofy.com</h3>");
}
},
error: function (error) {
console.error("Ooops, Error to fetch content from: ".concat(l_sSrc_1, "\n"), error);
resolve("<h3>Ooops, Something wrong: Error to fetch content :(</br>Try to refresh.</br>If the problem continue contact support: contact@vestofy.com</h3>");
},
});
}
catch (e) {
console.error("Vestofy script exception:\n", e);
reject(e);
}
});
}
function renderLoader() {
return react_1.default.createElement("div", { className: "d-flex justify-content-center align-items-center", style: { height: "100vh" } },
react_1.default.createElement("div", { className: "spinner-border text-info", role: "status" },
react_1.default.createElement("span", { className: "sr-only" }, "Loading...")));
}
var FittingRoomContent = function (props) {
(0, react_1.useEffect)(function () {
try {
if (!props.loading && props.contentHtml && props.contentHtml.length > 0) {
if (props.dev) {
setTimeout(function () {
console.log('Vestofy: dispatch content event');
document.dispatchEvent(g_oVestofyContentLoadedEvent);
}, 10);
}
else {
document.dispatchEvent(g_oVestofyContentLoadedEvent);
}
}
}
catch (e) {
console.error('dispatch Vestofy init event exception\n', e);
}
return (function () {
});
});
return (props.loading ? renderLoader() : react_1.default.createElement(dangerously_set_html_content_1.default, { html: props.contentHtml, allowRerender: props.dev == true }));
};
function renderBtnImage(a_sSrc, a_iWidth) {
if (a_sSrc == EButtonIcon.meter_icon) {
return react_1.default.createElement("span", { className: 'buttonLogo buttonLogoPosition', style: { width: a_iWidth } });
}
else if (a_sSrc == EButtonIcon.meter_icon_dark) {
return react_1.default.createElement("span", { className: 'buttonLogoDark buttonLogoPosition', style: { width: a_iWidth } });
}
else if (a_sSrc == null) {
return null;
}
else {
return react_1.default.createElement("img", { className: 'buttonLogoPosition', src: a_sSrc, alt: 'size guide', width: a_iWidth, height: a_iWidth });
}
}
// ******************************************
// --------render Popup-----------
// ******************************************
function VestofySizeChartPopup(a_oOptions) {
if (a_oOptions === void 0) { a_oOptions = defaultPopupOptions; }
var _a = (0, react_1.useState)(""), htmlContent = _a[0], setHtmlContent = _a[1];
var _b = (0, react_1.useState)(false), dev = _b[0], setDev = _b[1];
addEventListener("vestofy_content_loaded_event", function (e) {
setHtmlContent(e.detail.html);
setDev(e.detail.dev);
});
try {
var l_oOptions = buildPopupOptions(a_oOptions);
return react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: "modal fade", id: "vestofy-chart-modal", role: "dialog", tabIndex: -1, "data-keyboard": 'true', "data-backdrop": 'false', "aria-hidden": "true", "aria-labelledby": "sizeChartDialogDescribe" },
react_1.default.createElement("div", { className: "modal-dialog modal-dialog-scrollable", role: "document" },
react_1.default.createElement("div", { className: "modal-content" },
react_1.default.createElement("div", { className: "modal-header d-flex justify-content-between align-items-start" },
react_1.default.createElement("button", { type: "button", className: "close position-absolute", style: { right: '1rem' }, "data-dismiss": "modal", "aria-label": "Close" },
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u00D7")),
react_1.default.createElement("h5", { className: "modal-title", id: "sizeChartDialogDescribe", style: { fontSize: '1.5em' } },
l_oOptions.dialogTitle,
dev ? react_1.default.createElement("span", { className: 'small text-muted' },
" ", "(Preview)") : null)),
react_1.default.createElement("div", { className: "modal-body", id: "chart-body" },
react_1.default.createElement("div", { id: 'vestofyTag' },
react_1.default.createElement(FittingRoomContent, { contentHtml: htmlContent, loading: htmlContent.length == 0, dev: dev })))))));
}
catch (e) {
console.error('SizeChartPopup exception:\n', e);
return null;
}
}
// ******************************************
// --------render button---------------------
// ******************************************
function VestofyShowBtn(props) {
var _a, _b, _c;
if (props === void 0) { props = defaultBtnOptions; }
var l_oOptions = buildBtnOptions(props);
var btnStyle = { outline: 'none', fontSize: l_oOptions.buttonTextSize, color: l_oOptions.buttonTextColor, backgroundColor: l_oOptions.buttonBackgroundColor, border: "".concat((_a = l_oOptions.border) === null || _a === void 0 ? void 0 : _a.BorderWidth, "px solid ").concat((_b = l_oOptions.border) === null || _b === void 0 ? void 0 : _b.BorderColor), borderRadius: "".concat((_c = l_oOptions.border) === null || _c === void 0 ? void 0 : _c.BorderRadius, "px") };
var adviceStyle = { display: l_oOptions.advice ? 'block' : 'none !important', fontSize: l_oOptions.buttonTextSize, backgroundColor: l_oOptions.adviceBackgroundColor, marginBottom: '2px' };
var alignButton = 'text-left';
if (l_oOptions.btnAlign == EAlignButton.eAlignCenter) {
alignButton = 'text-center';
}
else if (l_oOptions.btnAlign == EAlignButton.eAlignRight) {
alignButton = 'text-right';
}
btnStyle = Object.assign({}, btnStyle);
adviceStyle = Object.assign({}, adviceStyle);
return react_1.default.createElement(react_1.default.Fragment, null,
l_oOptions.advice ? react_1.default.createElement("div", null,
react_1.default.createElement("span", { style: adviceStyle, id: "showVestofySizeAdvice" }, l_oOptions.adviceText)) : null,
react_1.default.createElement("div", { className: alignButton },
react_1.default.createElement("button", { type: "button", id: "showVestofyBtn", className: "btn btn-primary", style: btnStyle, "data-toggle": "modal", "data-target": "#vestofy-chart-modal", onClick: props.onClick },
renderBtnImage(l_oOptions.buttonImgSrc, l_oOptions.buttonTextSize),
l_oOptions.buttonText)));
}
function InitDialogContent(props) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var l_sTags, l_sHtmlContent;
var _a, _b, _c;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
l_sTags = (_a = props.tags) === null || _a === void 0 ? void 0 : _a.join(',');
if ((_b = props.options) === null || _b === void 0 ? void 0 : _b.dev) {
console.log("size_charts_id: ".concat(props.size_chart_id, " vendor: ").concat(props.vendor, " product type: ").concat(props.product_type, " tags: ").concat(l_sTags));
}
l_sHtmlContent = LoadStorageDialogContent(props.shop, props.size_chart_id, props.vendor, props.product_type, l_sTags);
if (!(l_sHtmlContent == null || ((_c = props.options) === null || _c === void 0 ? void 0 : _c.dev))) return [3 /*break*/, 2];
return [4 /*yield*/, loadFittingRoom(props.shop, props.platform, props.bottom_image, props.bottom_description, props.key, props.size_chart_id, props.vendor, props.product_type, l_sTags, props.locale)];
case 1: return [2 /*return*/, _d.sent()];
case 2: return [2 /*return*/, g_sHtmlContent];
}
});
});
}
// *******************************************
// ---------Component hook--------------------
// *******************************************
var Vestofy = function (props) {
var local = typeof props.locale != 'undefined' ? props.locale : 'en';
/**Initialize and import scripts before render*/
(0, react_1.useLayoutEffect)(function () {
addScript("https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js", "jQuery", undefined, undefined, function () {
addScript("https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js", "bootstrap", undefined, // "sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+",
undefined, // "anonymous",
function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
ContentLoader();
return [2 /*return*/];
});
}); });
});
}, [local]);
var ContentLoader = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var l_sDialogContent, vestofyContentEvent, e_1;
var _a, _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
_c.trys.push([0, 2, , 3]);
if (props.options && props.options.dev) {
sessionStorage.clear();
}
return [4 /*yield*/, InitDialogContent(props)];
case 1:
l_sDialogContent = _c.sent();
SaveStorageDialogContent(l_sDialogContent, props.shop, props.size_chart_id, props.vendor, props.product_type, (_a = props.tags) === null || _a === void 0 ? void 0 : _a.join(','));
g_sHtmlContent = "".concat(l_sDialogContent); //deep copy
vestofyContentEvent = new CustomEvent("vestofy_content_loaded_event", { detail: { html: l_sDialogContent, dev: (_b = props.options) === null || _b === void 0 ? void 0 : _b.dev } });
dispatchEvent(vestofyContentEvent);
return [3 /*break*/, 3];
case 2:
e_1 = _c.sent();
console.error("Vestofy content load failed", e_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
return (react_1.default.createElement(react_1.default.Fragment, null, VestofyShowBtn(props.options)));
};
exports.default = Vestofy;
//# sourceMappingURL=App.js.map