@fixefy/fixefy-ui-components 0.0.37 → 0.0.39

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+    "bracketSpacing": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "tabWidth": 2,
+    "semi": false,
+    "printWidth": 120,
+    "jsxSingleQuote": true,
+    "endOfLine": "auto"
+  }

package/.swcrc

@@ -0,0 +1,20 @@
+{
+    "jsc": {
+      "externalHelpers": false,
+      "target": "es2016",
+      "parser": {
+        "syntax": "typescript",
+        "tsx": true,
+        "decorators": false,
+        "dynamicImport": true
+      },
+      "transform": {
+        "react": {
+          "runtime": "automatic"
+        }
+      }
+    },
+    "module": {
+      "type": "commonjs"
+    }
+  }

package/build/FxTag/FxTag.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxTag", {
+    enumerable: true,
+    get: function() {
+        return FxTag;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _ = require("@fixefy/fixefy-ui-utils/");
+const _tagstyles = require("./styles/tag.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const FxTag = ({ name, count = 0 })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        sx: {
+            maxWidth: 'fit-content',
+            mb: 1
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_tagstyles.StyledTag, {
+                name: name,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_tagstyles.StyledLabel, {
+                    children: (0, _.titleCase)(name)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_tagstyles.StyledCount, {
+                name: name,
+                children: count
+            })
+        ]
+    });

package/build/FxTag/fxtag_types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/build/FxTag/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FxTag: function() {
+        return _FxTag.FxTag;
+    },
+    TagPropsType: function() {
+        return _fxtag_types.TagPropsType;
+    }
+});
+const _FxTag = require("./FxTag");
+const _fxtag_types = require("./fxtag_types");

package/build/FxTag/styles/tag.styles.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    StyledCount: function() {
+        return StyledCount;
+    },
+    StyledLabel: function() {
+        return StyledLabel;
+    },
+    StyledTag: function() {
+        return StyledTag;
+    }
+});
+const _styles = require("@mui/material/styles");
+const _material = require("@mui/material");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+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 _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    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;
+}
+const StyledTag = (0, _styles.styled)(_material.Box)(({ theme, name })=>({
+        background: name === 'in_dispute' ? '#56CCF2' : name === '' ? '#BB6BD9' : theme.palette.reconcilation[name].background,
+        borderRadius: 8,
+        padding: '2px 8px',
+        border: `1px solid ${name === 'in_dispute' ? '#56CCF2' : name === '' ? '#BB6BD9' : theme.palette.reconcilation[name].border}`,
+        display: 'flex',
+        alignItems: 'center',
+        width: 'fit-content'
+    }));
+const StyledLabel = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+        lineHeight: '20px',
+        color: theme.palette.common.white
+    }));
+const StyledCount = (0, _styles.styled)(_material.Typography)(({ theme, name })=>_object_spread_props(_object_spread({}, theme.typography.subtitle2), {
+        lineHeight: '16px',
+        fontWeight: 700,
+        color: name === 'in_dispute' ? '#56CCF2' : name === '' ? '#BB6BD9' : theme.palette.reconcilation[name].background,
+        marginLeft: 8
+    }));

package/package.json

@@ -57,17 +57,17 @@
     "node": "18.17.1"
   },
   "files": [
-    "dist-*/**/*"
+    "*"
   ],
   "private": false,
-  "main": "./index.js",
-  "module": "./index.js",
+  "main": "build/index.js",
+  "module": "build/index.js",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "require": "./index.js"
+      "import": "./build/index.js",
+      "require": "./build/index.js"
     }
   },
-  "types": "./index.ts",
-  "version": "0.0.37"
+  "types": "build/index.d.ts",
+  "version": "0.0.39"
 }

package/src/FxActionsTray/FxActionsTray.tsx

@@ -0,0 +1,293 @@
+import React from 'react'
+import Image from 'next/image'
+
+import { Slide } from '@mui/material'
+import { imageLoader } from '@fixefy/fixefy-ui-utils'
+import { ActionsTrayPropsType } from './actions_tray_types'
+
+import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actions_tray.styles'
+
+export function FxActionsTray({ type, onApprove, onChallenge, show, onClose, chargesCount, container, direction = 'up' }: ActionsTrayPropsType) {
+  const renderActions = () => {
+    switch (type) {
+      case 'approved':
+        return <ApprovedActions onChallenge={onChallenge} />
+      case 'challenge':
+        return <ChallengeActions onChallenge={onChallenge} onApprove={onApprove} />
+      case 'pending':
+        return <PendingActions onApprove={onApprove} onChallenge={onChallenge} />
+      case 'no_pricing':
+        return <NoPricingActions onApprove={onApprove} onChallenge={onChallenge} />
+      default:
+        return <ApprovedActions onChallenge={onChallenge} />
+    }
+  }
+  return (
+    <div>
+      <Slide direction={direction} in={show} mountOnEnter unmountOnExit timeout={400} container={container}>
+        <Container>
+          <TitleWrapper>
+            <ChargesCount>{chargesCount}</ChargesCount>
+            <ChargesTitle>charges selected</ChargesTitle>
+          </TitleWrapper>
+          <Divider />
+          <div>
+            {renderActions()}
+            {/* {actions.map(({ title, name, onClick, ...action }, index) => (
+							<ActionBtn key={index} onClick={(event) => onClick(event, name)}>
+								<Image
+									loader={() =>
+										imageLoader({
+											root: "https://cdn-dev.fixefy.me/",
+											src: `actions/${action.extended.icon}}.svg`,
+										})
+									}
+									src={`actions/${action.extended.icon}}.svg`}
+									width={20}
+									height={20}
+									onLoad={() => console.log("loaded")}
+									onError={(e) => console.log("error:", e)}
+								/>
+								<ActionTitle>{titleCase(title)}</ActionTitle>
+							</ActionBtn>
+						))} */}
+          </div>
+          <Divider />
+          <div onClick={onClose}>
+            <Close>close</Close>
+          </div>
+        </Container>
+      </Slide>
+    </div>
+  )
+}
+
+const ChallengeActions = ({ onChallenge, onApprove }: { onChallenge?: () => void; onApprove?: () => void }) => {
+  return (
+    <>
+      <ActionBtn onClick={onChallenge} type="low">
+        <Image
+          alt="challenge"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/challenge.svg',
+            })
+          }
+          src={'actions/challenge.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>challenge</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onApprove}>
+        <Image
+          alt="approve"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/approve.svg',
+            })
+          }
+          src={'actions/approve.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>approve</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onApprove}>
+        <Image
+          alt="ignore and approve"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/ignore_and_approve.svg',
+            })
+          }
+          src={'actions/ignore_and_approve.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>ignore & approve</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onApprove}>
+        <Image
+          alt="change exception"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/change_exception.svg',
+            })
+          }
+          src={'actions/change_exception.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>Change exeption</ActionTitle>
+      </ActionBtn>
+    </>
+  )
+}
+const PendingActions = ({ onApprove, onChallenge }: { onChallenge?: () => void; onApprove?: () => void }) => {
+  return (
+    <>
+      <ActionBtn onClick={onApprove} type="excellent">
+        <Image
+          alt="approve"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/approve.svg',
+            })
+          }
+          src={'actions/approve.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>approve</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onChallenge}>
+        <Image
+          alt="challenge"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/challenge.svg',
+            })
+          }
+          src={'actions/challenge.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>challenge</ActionTitle>
+      </ActionBtn>
+
+      <ActionBtn onClick={onChallenge}>
+        <Image
+          alt="dive in"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/dive_in.svg',
+            })
+          }
+          src={'actions/dive_in.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>dive in</ActionTitle>
+      </ActionBtn>
+    </>
+  )
+}
+const NoPricingActions = ({ onApprove, onChallenge }: { onChallenge?: () => void; onApprove?: () => void }) => {
+  return (
+    <>
+      <ActionBtn onClick={onChallenge}>
+        <Image
+          alt="dive in"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/dive_in.svg',
+            })
+          }
+          src={'actions/dive_in.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>dive in</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onApprove}>
+        <Image
+          alt="solve"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/solve.svg',
+            })
+          }
+          src={'actions/solve.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>solve</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onApprove}>
+        <Image
+          alt="ignore and approve"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/ignore_and_approve.svg',
+            })
+          }
+          src={'actions/ignore_and_approve.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>ignore & approve</ActionTitle>
+      </ActionBtn>
+    </>
+  )
+}
+const ApprovedActions = ({ onChallenge }: { onChallenge?: () => void; onApprove?: () => void }) => {
+  return (
+    <>
+      <ActionBtn onClick={onChallenge}>
+        <Image
+          alt="dive in"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actionsCards/check_exceptions.svg',
+            })
+          }
+          src={'actionsCards/check_exceptions.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>dive in</ActionTitle>
+      </ActionBtn>
+      <ActionBtn onClick={onChallenge}>
+        <Image
+          alt="challenge"
+          loader={() =>
+            imageLoader({
+              root: 'https://cdn-dev.fixefy.me/',
+              src: 'actions/undo.svg',
+            })
+          }
+          src={'actions/undo.svg'}
+          width={20}
+          height={20}
+          onLoad={() => console.log('loaded')}
+          onError={(e: any) => console.log('error:', e)}
+        />
+        <ActionTitle>undo</ActionTitle>
+      </ActionBtn>
+    </>
+  )
+}

package/src/FxActionsTray/actions_tray_types.d.ts

@@ -0,0 +1,15 @@
+export type ActionsTrayPropsType = {
+  type: 'approved' | 'challenge' | 'pending' | 'no_pricing'
+  onApprove?: () => void
+  onChallenge?: () => void
+  onClick?: () => void
+  onClose?: () => void
+  show: boolean
+  chargesCount: number
+  container?: any
+  direction?: 'down' | 'left' | 'right' | 'up'
+}
+
+export type ActionButtonPropsType = {
+  type?: 'excellent' | 'high' | 'medium' | 'low' | 'bad'
+}

package/src/FxActionsTray/index.ts

@@ -0,0 +1,3 @@
+export { FxActionsTray } from './FxActionsTray'
+
+export type { ActionsTrayPropsType, ActionButtonPropsType } from './actions_tray_types'

package/src/FxActionsTray/styles/actions_tray.styles.tsx

@@ -0,0 +1,90 @@
+import { FxButton } from '../../FxButton'
+import { Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import { ActionButtonPropsType } from '../actions_tray_types'
+
+// const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)'
+const filterPrimary = 'invert(46%) sepia(48%) saturate(297%) hue-rotate(145deg) brightness(97%) contrast(90%)'
+
+export const Container = styled('div')(({ theme }: { theme: any }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  background: theme.palette.common.white,
+  border: '1px solid #C6DDE2',
+  boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
+  borderRadius: 8,
+  padding: '16px 24px',
+  height: 38,
+  width: 'fit-content',
+  margin: 4,
+}))
+
+export const ChargesCount = styled(Typography)(({ theme }: { theme: any }) => ({
+  ...theme.typography.table,
+  color: theme.palette.typography.title,
+  fontWeight: 700,
+  marginRight: 4,
+}))
+
+export const ChargesTitle = styled(Typography)(({ theme }: { theme: any }) => ({
+  ...theme.typography.table,
+  color: theme.palette.typography.title,
+}))
+
+export const Close = styled(Typography)(({ theme }: { theme: any }) => ({
+  ...theme.typography.body1,
+  color: theme.palette.primary['500'],
+  textTransform: 'uppercase',
+  fontWeight: 600,
+  letterSpacing: '0.5px',
+  cursor: 'pointer',
+}))
+
+export const TitleWrapper = styled('div')(({  }: { theme: any }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}))
+
+export const Divider = styled('div')(({ theme }: { theme: any }) => ({
+  width: 1,
+  height: '100%',
+  background: theme.palette.greyscale.contrastText,
+  marginRight: 24,
+  marginLeft: 24,
+}))
+
+export const ActionBtn = styled(FxButton)<ActionButtonPropsType>(({ theme, type }: { theme: any; type: any }) => ({
+  height: 40,
+  maxHeight: 40,
+  borderRadius: 100,
+
+  padding: '8px 16px',
+  color: type ? theme.palette.common.white : theme.palette.primary['500'],
+  borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
+  background: type ? theme.palette.score[type] : theme.palette.common.white,
+  marginRight: 8,
+
+  ['& img']: {
+    filter: type ? 'none' : filterPrimary,
+  },
+  ['&:hover']: {
+    background: type ? theme.palette.score[type] : theme.palette.common.white,
+    color: type ? theme.palette.common.white : theme.palette.primary['500'],
+    borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
+  },
+}))
+
+export const ActionTitle = styled('span')(({ theme }: { theme: any }) => ({
+  ...theme.typography.body1,
+  color: 'inherit',
+  textTransform: 'uppercase',
+  fontWeight: 600,
+  letterSpacing: '0.5px',
+  cursor: 'pointer',
+  marginLeft: 4,
+  marginTop: 2,
+}))

package/src/FxAggregationsBar/FxAggregations.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import { structureReader } from './helpers/structureReader'
+
+import { AggreationsBarPropsType } from './aggregations_types'
+
+export const FxAggregationsBar = (props: AggreationsBarPropsType) => {
+  const { structure, minWidth, mb, filter, initialValues } = props
+  const { children, extended } = structure
+  const { variables } = extended
+  const { collapsed } = variables
+
+  return (
+    <Stack
+      direction="row"
+      spacing={1.5}
+      sx={{
+        mb: mb ? mb : 0,
+        ['& div']: {
+          minWidth: minWidth,
+        },
+        ['& > span']: {
+          minWidth: minWidth,
+        },
+      }}
+    >
+      {children.map((child: any) => {
+        return structureReader(child, filter, collapsed, initialValues)
+      })}
+    </Stack>
+  )
+}

package/src/FxAggregationsBar/aggregations_types.d.ts

@@ -0,0 +1,21 @@
+export type AggregationsDataPropsType = {
+    title: string
+    value: number
+    type?: 'currency' | 'percentage'
+    loading?: boolean
+  }
+  
+  export type AggreationsBarPropsType = {
+    structure: any
+    minWidth?: string | number
+    mb?: string | number
+    filter?: object
+    initialValues?: {
+      score?: number
+      originalCharge?: number
+      underContractCharges?: number
+      fairValue?: number
+      spendRisk?: number
+      [x: string]: any
+    }
+  }