@trycourier/react-preferences - npm Package Compare versions

Comparing version 0.1.10-alpha.28 to 0.1.10-internal.4b03cba.0

dist/components/index.js

@@ -6,6 +6,6 @@ "use strict";
 });
-Object.defineProperty(exports, "Preferences", {
+Object.defineProperty(exports, "PreferenceTemplate", {
   enumerable: true,
   get: function get() {
-    return _preferences.Preferences;
+    return _PreferenceTemplate.PreferenceTemplate;
   }
@@ -20,4 +20,4 @@ });
 
-var _preferences = require("./preferences");
+var _PreferenceTemplate = require("./PreferenceTemplate");
 
 var _PreferenceList = require("./PreferenceList");

dist/components/PreferenceList.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -10,27 +12,58 @@
 
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _preferences = require("./preferences");
+var _react = _interopRequireWildcard(require("react"));
 
-var _hooks = require("../hooks");
+var _reactProvider = require("@trycourier/react-provider");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _PreferenceTemplate = require("./PreferenceTemplate");
 
+var _reducer = _interopRequireDefault(require("../reducer"));
+
+var _usePreferencesActions = _interopRequireDefault(require("../hooks/use-preferences-actions"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var StyledList = _styledComponents["default"].div.withConfig({
   displayName: "PreferenceList__StyledList",
   componentId: "sc-14ehsz3-0"
-})(["background:\"#F9FAFB\";overflow:scroll;display:flex;height:410px;flex-direction:column;border-top:\"1px solid rgba(203,213,224,.5)\";scroll-snap-type:\"y proximity\";"]);
+})(["padding:0 24px;overflow:scroll;display:flex;height:410px;flex-direction:column;border-top:1px solid rgba(203,213,224,0.5);scroll-snap-type:\"y proximity\";"]);
 
 exports.StyledList = StyledList;
 
-var PreferenceList = function PreferenceList() {
-  var preferenceGroups = (0, _hooks.usePreferenceTemplates)();
-  return /*#__PURE__*/_react["default"].createElement(StyledList, null, !(preferenceGroups !== null && preferenceGroups !== void 0 && preferenceGroups.length) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null) : preferenceGroups.map(function (groupId) {
-    return /*#__PURE__*/_react["default"].createElement(_preferences.Preferences, {
-      key: groupId,
-      preferenceTemplateId: groupId
+var PreferenceList = function PreferenceList(props) {
+  var _brand$preferenceTemp, _brand$preferenceTemp2;
+
+  var _useCourier = (0, _reactProvider.useCourier)(),
+      brand = _useCourier.brand,
+      preferences = _useCourier.preferences;
+
+  var _usePreferenceActions = (0, _usePreferencesActions["default"])(),
+      fetchRecipientPreferences = _usePreferenceActions.fetchRecipientPreferences;
+
+  (0, _react.useEffect)(function () {
+    (0, _reactProvider.registerReducer)("preferences", _reducer["default"]);
+    fetchRecipientPreferences();
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: _objectSpread(_objectSpread({}, props.theme), {}, {
+      brand: brand
+    })
+  }, /*#__PURE__*/_react["default"].createElement(StyledList, null, preferences !== null && preferences !== void 0 && preferences.isLoading || !(brand !== null && brand !== void 0 && (_brand$preferenceTemp = brand.preferenceTemplates) !== null && _brand$preferenceTemp !== void 0 && _brand$preferenceTemp.length) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null) : brand === null || brand === void 0 ? void 0 : (_brand$preferenceTemp2 = brand.preferenceTemplates) === null || _brand$preferenceTemp2 === void 0 ? void 0 : _brand$preferenceTemp2.map(function (template) {
+    var _preferences$recipien;
+
+    return /*#__PURE__*/_react["default"].createElement(_PreferenceTemplate.PreferenceTemplate, {
+      key: template.templateId,
+      preferenceTemplate: template,
+      recipientPreference: preferences === null || preferences === void 0 ? void 0 : (_preferences$recipien = preferences.recipientPreferences) === null || _preferences$recipien === void 0 ? void 0 : _preferences$recipien.find(function (preference) {
+        return preference.templateId === template.templateId;
+      })
     });
-  }));
+  })));
 };
 
 exports.PreferenceList = PreferenceList;

dist/components/Status.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -10,4 +12,6 @@
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _reactToggle = _interopRequireDefault(require("react-toggle"));
@@ -18,20 +22,29 @@
 var StatusPreference = function StatusPreference(_ref) {
-  var label = _ref.label,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? "OPTED_IN" : _ref$value,
-      handleOnPreferenceChange = _ref.handleOnPreferenceChange;
+  var value = _ref.value,
+      onPreferenceChange = _ref.onPreferenceChange;
 
-  function onToggleStatusChange() {
-    var toggledValue = value === "OPTED_IN" ? "OPTED_OUT" : "OPTED_IN";
-    handleOnPreferenceChange(toggledValue);
-  }
+  var _useState = (0, _react.useState)(["REQUIRED", "OPTED_IN"].includes(value)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
 
-  return /*#__PURE__*/_react["default"].createElement(_StyledToggle.StyledToggle, null, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement("span", null, label), /*#__PURE__*/_react["default"].createElement(_reactToggle["default"], {
+  var onToggleStatusChange = function onToggleStatusChange(event) {
+    setChecked(event.target.checked);
+    var toggledValue = event.target.checked ? "OPTED_IN" : "OPTED_OUT";
+    onPreferenceChange({
+      status: toggledValue
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_StyledToggle.StyledToggle, {
+    checked: checked
+  }, /*#__PURE__*/_react["default"].createElement("label", null, value === "REQUIRED" ? "Required" : "Opted In"), /*#__PURE__*/_react["default"].createElement(_reactToggle["default"], {
     icons: false,
-    checked: value === "OPTED_IN" ? true : false,
+    disabled: value === "REQUIRED",
+    checked: checked,
     value: value,
     onChange: onToggleStatusChange
-  })));
+  }));
 };
 
 exports.StatusPreference = StatusPreference;

dist/components/StyledToggle.js

@@ -15,4 +15,14 @@ "use strict";
   componentId: "sc-10qmboz-0"
-})(["height:16px;label{margin:0;}.react-toggle{touch-action:pan-x;display:inline-block;position:relative;cursor:pointer;background-color:transparent;border:0;padding:0;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}.react-toggle-screenreader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.react-toggle--disabled{cursor:not-allowed;opacity:0.5;transition:opacity 0.25s;}.react-toggle-track{width:58px;height:27px;padding:0;border-radius:30px;background-color:#344563;transition:all 0.2s ease;}.react-toggle--checked .react-toggle-track{background-color:#9121c2;}.react-toggle-track-check{position:absolute;width:14px;height:10px;top:0px;bottom:0px;margin-top:auto;margin-bottom:auto;line-height:0;left:8px;opacity:0;transition:opacity 0.25s ease;}.react-toggle--checked .react-toggle-track-check{opacity:1;transition:opacity 0.25s ease;}.react-toggle-track-x{display:none;}.react-toggle-thumb{transition:all 0.5s cubic-bezier(0.23,1,0.32,1) 0ms;position:absolute;top:1px;left:1px;width:25px;height:25px;border-radius:50%;background-color:#fafafa;box-sizing:border-box;transition:all 0.25s ease;}.react-toggle--checked .react-toggle-thumb{left:32px;}.react-toggle--focus .react-toggle-thumb{box-shadow:0px 0px 2px 3px #0099e0;}.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb{box-shadow:0px 0px 5px 5px #0099e0;}label{display:flex;width:100%;span{width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}}"]);
+})(["display:flex;height:16px;label{margin:0;}.react-toggle{touch-action:pan-x;display:inline-block;position:relative;cursor:pointer;background-color:transparent;border:0;padding:0;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}.react-toggle-screenreader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.react-toggle--disabled{cursor:not-allowed;opacity:0.5;transition:opacity 0.25s;}.react-toggle-track{width:40px;height:12px;padding:0;border-radius:30px;background-color:#eae7eb;transition:all 0.2s ease;}.react-toggle-thumb{height:30px;}.react-toggle--checked .react-toggle-track{opacity:0.5;background-color:", ";}.react-toggle-track-check{position:absolute;width:14px;height:10px;top:0px;bottom:0px;margin-top:auto;margin-bottom:auto;line-height:0;left:8px;opacity:0;transition:opacity 0.25s ease;}.react-toggle--checked .react-toggle-track-check{opacity:1;transition:opacity 0.25s ease;}.react-toggle-track-x{display:none;}.react-toggle-thumb{transition:all 0.5s cubic-bezier(0.23,1,0.32,1) 0ms;position:absolute;top:-10px;left:-12px;width:30px;height:30px;border-radius:50%;background-color:#fafafa;box-sizing:border-box;transition:all 0.25s ease;box-shadow:0px 1.5px 4.5px rgba(44,19,56,0.25);}.react-toggle--checked .react-toggle-thumb{left:18px;background-color:", ";}.react-toggle--focus .react-toggle-thumb{box-shadow:0px 0px 2px 3px #0099e0;}.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb{box-shadow:0px 0px 5px 5px #0099e0;}label{display:flex;width:Calc(100% - 48px);font-size:12px;color:#73819b;span{width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}}"], function (_ref) {
+  var _theme$brand$colors$p, _theme$brand, _theme$brand$colors;
 
+  var theme = _ref.theme;
+  return (_theme$brand$colors$p = theme === null || theme === void 0 ? void 0 : (_theme$brand = theme.brand) === null || _theme$brand === void 0 ? void 0 : (_theme$brand$colors = _theme$brand.colors) === null || _theme$brand$colors === void 0 ? void 0 : _theme$brand$colors.primary) !== null && _theme$brand$colors$p !== void 0 ? _theme$brand$colors$p : "#9121c2";
+}, function (_ref2) {
+  var _theme$brand$colors$p2, _theme$brand2, _theme$brand2$colors;
+
+  var theme = _ref2.theme;
+  return (_theme$brand$colors$p2 = theme === null || theme === void 0 ? void 0 : (_theme$brand2 = theme.brand) === null || _theme$brand2 === void 0 ? void 0 : (_theme$brand2$colors = _theme$brand2.colors) === null || _theme$brand2$colors === void 0 ? void 0 : _theme$brand2$colors.primary) !== null && _theme$brand$colors$p2 !== void 0 ? _theme$brand$colors$p2 : "#9121c2";
+});
+
 exports.StyledToggle = StyledToggle;

dist/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  usePreferencesActions: true
+};
+Object.defineProperty(exports, "usePreferencesActions", {
+  enumerable: true,
+  get: function get() {
+    return _usePreferencesActions["default"];
+  }
+});
 
@@ -11,2 +22,3 @@ var _components = require("./components");
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _components[key]) return;
@@ -19,2 +31,4 @@ Object.defineProperty(exports, key, {
   });
-});
+});
+
+var _usePreferencesActions = _interopRequireDefault(require("./hooks/use-preferences-actions"));

package.json

 {
   "name": "@trycourier/react-preferences",
-  "version": "0.1.10-alpha.28",
+  "version": "0.1.10-internal.4b03cba.0+4b03cba",
   "main": "dist/index.js",
@@ -20,2 +20,6 @@ "types": "typings/index.d.ts",
   },
+  "files": [
+    "dist/",
+    "typings/"
+  ],
   "license": "ISC",
@@ -25,3 +29,3 @@ "dependencies": {
   },
-  "gitHead": "4e42b82cec7b798e4a796e764d108943f3c35775"
+  "gitHead": "4b03cba256bdd9ddcabb90aef5f876002a724231"
 }

typings/components/index.d.ts

@@ -1,3 +0,3 @@
-export { Preferences } from "./preferences";
+export { PreferenceTemplate } from "./PreferenceTemplate";
 export { PreferenceList } from "./PreferenceList";
 //# sourceMappingURL=index.d.ts.map

typings/components/PreferenceList.d.ts

 import React from "react";
+import { ThemeProps } from "styled-components";
 export declare const StyledList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PreferenceList: React.FunctionComponent;
+export declare const PreferenceList: React.FunctionComponent<{
+    theme?: ThemeProps<any>;
+}>;
 //# sourceMappingURL=PreferenceList.d.ts.map

typings/components/Status.d.ts

@@ -1,3 +0,3 @@
-import { PreferenceItemComponentFn } from "./types";
+import { PreferenceItemComponentFn } from "../types";
 export declare const StatusPreference: PreferenceItemComponentFn;
 //# sourceMappingURL=Status.d.ts.map

typings/components/StyledToggle.d.ts

@@ -1,2 +0,4 @@
-export declare const StyledToggle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledToggle: import("styled-components").StyledComponent<"div", any, {
+    checked: boolean;
+}, never>;
 //# sourceMappingURL=StyledToggle.d.ts.map

typings/index.d.ts

 export * from "./components";
+export { default as usePreferencesActions } from "./hooks/use-preferences-actions";
 //# sourceMappingURL=index.d.ts.map

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

31438

decreased by-3.89%

Number of package files

38

decreased by-24%

Lines of code

461

decreased by-32.31%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes