react_size_chart
Version:
Vestfoy smart size charts react package
402 lines • 19.4 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-3.4.1.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 = "";
//let g_bLoading = true;
var devUrl = false;
var isString = function (value) { return typeof value === 'string'; };
function SaveStorageDialogContent(a_sHtmlDialogContent, a_sShop, a_sSizeChartId, a_sProductID, a_sCollectionID) {
if (a_sSizeChartId === void 0) { a_sSizeChartId = null; }
if (a_sProductID === void 0) { a_sProductID = null; }
if (a_sCollectionID === void 0) { a_sCollectionID = 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_sCollectionID)) {
sessionStorage.setItem(a_sShop + a_sCollectionID, 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_sProductID, a_sCollectionID) {
if (a_sSizeChartId === void 0) { a_sSizeChartId = null; }
if (a_sProductID === void 0) { a_sProductID = null; }
if (a_sCollectionID === void 0) { a_sCollectionID = null; }
try {
if (isString(a_sSizeChartId)) {
return sessionStorage.getItem(a_sShop + a_sSizeChartId);
}
else if (isString(a_sProductID)) {
return sessionStorage.getItem(a_sShop + a_sProductID);
}
else if (isString(a_sCollectionID)) {
return sessionStorage.getItem(a_sShop + a_sCollectionID);
}
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 = {
/**
* Popup dialog title (default: Size Guide)
*/
DialogTitle: 'Size Guide',
};
function buildBtnOptions(a_oPropsOptions) {
try {
var l_oOptions = {
ButtonText: a_oPropsOptions.ButtonText ? a_oPropsOptions.ButtonText : defaultBtnOptions.ButtonText,
ButtonTextSize: a_oPropsOptions.ButtonTextSize ? a_oPropsOptions.ButtonTextSize : defaultBtnOptions.ButtonTextSize,
ButtonTextColor: a_oPropsOptions.ButtonTextColor ? a_oPropsOptions.ButtonTextColor : defaultBtnOptions.ButtonTextColor,
ButtonBackgroundColor: a_oPropsOptions.ButtonBackgroundColor ? a_oPropsOptions.ButtonBackgroundColor : defaultBtnOptions.ButtonBackgroundColor,
ButtonImgSrc: a_oPropsOptions.ButtonImgSrc ? a_oPropsOptions.ButtonImgSrc : defaultBtnOptions.ButtonImgSrc,
btnAlign: a_oPropsOptions.btnAlign ? a_oPropsOptions.btnAlign : defaultBtnOptions.btnAlign,
border: a_oPropsOptions.border ? a_oPropsOptions.border : defaultBtnOptions.border,
advice: typeof a_oPropsOptions.advice != 'undefined' ? a_oPropsOptions.advice : defaultBtnOptions.advice,
adviceText: a_oPropsOptions.adviceText ? a_oPropsOptions.adviceText : 'Find your best size',
adviceBackgroundColor: a_oPropsOptions.adviceBackgroundColor ? a_oPropsOptions.adviceBackgroundColor : defaultBtnOptions.adviceBackgroundColor,
dev: typeof a_oPropsOptions.dev != 'undefined' ? a_oPropsOptions.dev : defaultBtnOptions.dev
};
return l_oOptions;
}
catch (e) {
console.error('build options error:\n', e);
return defaultBtnOptions;
}
}
function buildPopupOptions(a_oPropsOptions) {
try {
var l_oOptions = {
DialogTitle: a_oPropsOptions.DialogTitle ? a_oPropsOptions.DialogTitle : 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, onLoad) {
try {
var existing = document.getElementById(id);
if (existing) {
onLoad();
return existing;
}
else {
var script = document.createElement("script");
script.src = src;
script.id = id;
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_sKey, a_sSizeChartId, a_sProductID, a_sCollectionID, a_sLang) {
if (a_sKey === void 0) { a_sKey = ""; }
if (a_sSizeChartId === void 0) { a_sSizeChartId = null; }
if (a_sProductID === void 0) { a_sProductID = null; }
if (a_sCollectionID === void 0) { a_sCollectionID = null; }
if (a_sLang === void 0) { a_sLang = "en"; }
return new Promise(function (resolve, reject) {
try {
var l_sPlatform = "Standalone";
var l_sSrc_1 = "https://proxy.vestofy.com/";
if (devUrl) {
l_sSrc_1 = "https://vestofy-proxy.tunnelto.dev";
console.warn('Vestofy: About to load debug fitting room\n', l_sSrc_1);
}
l_sSrc_1 = "".concat(l_sSrc_1, "?size_chart_id=").concat(a_sSizeChartId, "&product_id=").concat(a_sProductID, "&collection_id=").concat(a_sCollectionID, "&shop=").concat(a_sShop, "&key=").concat(a_sKey, "&locale=").concat(a_sLang, "&platform=").concat(l_sPlatform, "&add_header=").concat(false);
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 (typeof a_oDialogData.html != "undefined") {
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: "spinner-border text-info", style: { display: 'block', marginTop: "10%" } },
react_1.default.createElement("div", { className: "text-center" },
react_1.default.createElement("div", { className: "loader" },
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)(g_sHtmlContent), 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) {
// console.log(`vestofy loaded:\n`, (e as CustomEvent).detail);
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-backdrop": 'false', "aria-hidden": "true", "aria-labelledby": "sizeChartDialogDescribe" },
react_1.default.createElement("div", { className: "modal-dialog", role: "document" },
react_1.default.createElement("div", { className: "modal-content" },
react_1.default.createElement("div", { className: "modal-header" },
react_1.default.createElement("button", { type: "button", className: "close", "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" }, l_oOptions.DialogTitle)),
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 == "", 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_sHtmlContent, l_sHtmlContent_1;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.dev) {
console.log("product_id: ".concat(props.product_id, " size_charts_id: ").concat(props.size_chart_id, " collection_id: ").concat(props.collection_id));
}
l_sHtmlContent = LoadStorageDialogContent(props.shop, props.size_chart_id, props.product_id, props.collection_id);
if (!(l_sHtmlContent == null)) return [3 /*break*/, 2];
return [4 /*yield*/, loadFittingRoom(props.shop, props.key, props.size_chart_id, props.product_id, props.collection_id, props.locale)];
case 1:
l_sHtmlContent_1 = _b.sent();
SaveStorageDialogContent(l_sHtmlContent_1, props.shop, props.size_chart_id, props.product_id, props.collection_id);
g_sHtmlContent = "".concat(l_sHtmlContent_1); //deep copy
return [2 /*return*/, l_sHtmlContent_1];
case 2:
g_sHtmlContent = l_sHtmlContent;
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 () {
if (props.options && props.options.dev) {
console.log('vestofy storage cleared');
sessionStorage.clear();
}
addScript("https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js", "jQuery", function () {
addScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js", "bootstrap", function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var l_sDialogContent, vestofyContentEvent;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, InitDialogContent(props)];
case 1:
l_sDialogContent = _b.sent();
vestofyContentEvent = new CustomEvent("vestofy_content_loaded_event", { detail: { html: l_sDialogContent, dev: (_a = props.options) === null || _a === void 0 ? void 0 : _a.dev } });
dispatchEvent(vestofyContentEvent);
return [2 /*return*/];
}
});
}); });
});
}, [local]);
return (react_1.default.createElement(react_1.default.Fragment, null, VestofyShowBtn(props.options)));
};
exports.default = Vestofy;
//# sourceMappingURL=App.js.map