pricing4react
Version:
A library of components that ease the integration of feature toggling driven by pricing plans into your React application's UI.
142 lines (141 loc) • 8.95 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
exports.__esModule = true;
exports.AttributesPage = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var Button_1 = require("../../components/Button");
var Table_1 = require("../../components/Table");
var Modal_1 = require("../../components/Modal");
var AttributeForm_1 = require("./AttributeForm");
var Icons_1 = require("../../components/Icons");
var EditorContextProvider_1 = require("../../context/EditorContextProvider");
require("./AttributesPage.css");
var emptyAttribute = {
id: "",
description: "",
type: "TEXT",
defaultValue: "",
expression: ""
};
function AttributesPage() {
var _a = (0, react_1.useContext)(EditorContextProvider_1.EditorContext), plans = _a.plans, setPlans = _a.setPlans, attributes = _a.attributes, setAttributes = _a.setAttributes;
var _b = (0, react_1.useState)(false), visible = _b[0], setvisible = _b[1];
var _c = (0, react_1.useState)("add"), command = _c[0], setCommand = _c[1];
var openModal = function () { return setvisible(true); };
var closeModal = function () { return setvisible(false); };
var addPlanAttributes = function (attribute) {
var updatedPlans = plans.map(function (plan) {
return __assign(__assign({}, plan), { features: __spreadArray(__spreadArray([], plan.features, true), [
{
name: attribute.id,
type: attribute.type,
value: attribute.defaultValue
},
], false) });
});
setPlans(updatedPlans);
};
var addAttribute = function (attribute) {
setAttributes(__spreadArray(__spreadArray([], attributes, true), [attribute], false));
addPlanAttributes(attribute);
closeModal();
};
var isAttributeDuplicatedWhenAdding = function (name) {
return attributes.filter(function (attribute) { return attribute.id === name; }).length !== 0;
};
return ((0, jsx_runtime_1.jsxs)("article", __assign({ className: "pp-content__main" }, { children: [(0, jsx_runtime_1.jsxs)("header", __assign({ className: "pp-content-header" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Plan's attributes" }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-content-header__btn", onClick: function () {
setCommand("add");
openModal();
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Plus, {}) })), (0, jsx_runtime_1.jsxs)(Modal_1.Modal, __assign({ open: visible && command === "add" }, { children: [(0, jsx_runtime_1.jsx)(AttributeForm_1.AttributeForm, { initialData: emptyAttribute, onSubmit: addAttribute, onValidation: isAttributeDuplicatedWhenAdding }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: closeModal }, { children: "Close" }))] }))] })), (0, jsx_runtime_1.jsx)(Table_1.Table, __assign({ className: "pp-table", labels: ["Name", "Type", "Default", "Actions"] }, { children: (0, jsx_runtime_1.jsx)(AttributeList, { command: command, setCommand: setCommand, isModalVisible: visible, setVisible: setvisible }) }))] })));
}
exports.AttributesPage = AttributesPage;
function AttributeList(_a) {
var isModalVisible = _a.isModalVisible, setVisible = _a.setVisible, command = _a.command, setCommand = _a.setCommand;
var _b = (0, react_1.useContext)(EditorContextProvider_1.EditorContext), attributes = _b.attributes, setAttributes = _b.setAttributes, plans = _b.plans, setPlans = _b.setPlans;
var _c = (0, react_1.useState)(-1), position = _c[0], setPosition = _c[1];
var displayDefaulValueText = function (defaultValue) {
switch (typeof defaultValue) {
case "string":
case "number":
return defaultValue;
case "boolean": {
return defaultValue ? "YES" : "NO";
}
}
};
var duplicatedAttributeWhenEditing = function (name) {
return attributes.filter(function (attribute, index) { return index !== position && attribute.id === name; }).length !== 0;
};
var deleteAttribute = function (name) {
setAttributes(attributes.filter(function (attribute) { return attribute.id !== name; }));
setPlans(plans.map(function (plan) {
var newFeatures = plan.features.filter(function (feature) { return feature.name !== name; });
return __assign(__assign({}, plan), { features: newFeatures });
}));
setVisible(false);
};
var computeNextFeature = function (previousFeature, newFeature) {
if (previousFeature.name !== newFeature.name &&
previousFeature.type === newFeature.type) {
return __assign(__assign({}, previousFeature), { name: newFeature.name });
}
if (previousFeature.type !== newFeature.type) {
return newFeature;
}
return previousFeature;
};
var editPlanAttributes = function (attribute) {
var newFeature = {
name: attribute.id,
type: attribute.type,
value: attribute.defaultValue
};
var updatedPlans = plans.map(function (plan) {
var oldAttribute = attributes[position];
return __assign(__assign({}, plan), { features: plan.features.map(function (feature) {
return feature.name === oldAttribute.id
? computeNextFeature(feature, newFeature)
: feature;
}) });
});
setPlans(updatedPlans);
};
var handleEditAttribute = function (newAttribute) {
setAttributes(function (attributes) {
return attributes.map(function (previousAttribute, index) {
return index === position ? newAttribute : previousAttribute;
});
});
editPlanAttributes(newAttribute);
setVisible(false);
};
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: attributes.map(function (attribute, index) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: attribute.id }), (0, jsx_runtime_1.jsx)("td", __assign({ className: "pp-table-type__".concat(attribute.type) }, { children: attribute.type })), (0, jsx_runtime_1.jsx)("td", { children: displayDefaulValueText(attribute.defaultValue) }), (0, jsx_runtime_1.jsxs)("td", __assign({ className: "pp-table-actions" }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () {
setPosition(index);
setVisible(true);
setCommand("edit");
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Pencil, {}) })), (0, jsx_runtime_1.jsxs)(Modal_1.Modal, __assign({ open: isModalVisible && command === "edit" && position === index }, { children: [(0, jsx_runtime_1.jsx)(AttributeForm_1.AttributeForm, { initialData: attribute, onSubmit: handleEditAttribute, onValidation: duplicatedAttributeWhenEditing }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: function () { return setVisible(false); } }, { children: "Close" }))] })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ onClick: function () {
setPosition(index);
setVisible(true);
setCommand("delete");
} }, { children: (0, jsx_runtime_1.jsx)(Icons_1.Trash, {}) })), (0, jsx_runtime_1.jsxs)(Modal_1.Modal, __assign({ open: isModalVisible && command === "delete" && position === index }, { children: [(0, jsx_runtime_1.jsxs)("h2", { children: ["Do you want to delete ", attribute.id, "?"] }), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: function () { return setVisible(false); } }, { children: "NO" })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ className: "pp-btn", onClick: function () { return deleteAttribute(attribute.id); } }, { children: "YES" }))] }))] }))] }, attribute.id)); }) }));
}