maintenance

src/components/create-token-components/capabilities.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {JSX, useEffect, useState} from 'react';
+
+import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
+
+import {documentationLinks} from 'constants/links';
+import {CapabilitiesType, capabilities} from 'constants/capabilities';
+
+import {AdvancedSelect, IAdvancedSelectItem} from 'components/ui/advanced-select';
+import {NewTabLink} from 'components/new-tab-link';
+import Theme from 'theme';
+
+interface ICapabilities {
+  selectedItems: IAdvancedSelectItem[];
+  setSelectedItems: (items: IAdvancedSelectItem[]) => void;
+  data?: IAdvancedSelectItem[];
+  label?: string;
+  labelColor?: string;
+  iconColor?: string;
+  capabilitiesSetTitle?: string;
+  className?: string;
+  allowMultiple?: boolean;
+}
+
+export const Capabilities = ({
+  label,
+  labelColor = Theme.colors.white,
+  iconColor = Theme.colors.white,
+  data = capabilities,
+  selectedItems,
+  setSelectedItems,
+  capabilitiesSetTitle = '',
+  className,
+  allowMultiple = true
+}: ICapabilities): JSX.Element => {
+  const [capabilitiesSet, setCapabilitiesSet] = useState(data);
+
+  useEffect(() => {
+    const filteredCapabilities = data.filter(capability => {
+      return capabilitiesSetTitle ? capability.type.includes(capabilitiesSetTitle) : true;
+    });
+
+    setCapabilitiesSet(filteredCapabilities);
+  }, [capabilitiesSetTitle]);
+
+  return (
+    <AdvancedSelect
+      allowMultiple={allowMultiple}
+      label={label}
+      labelColor={labelColor}
+      labelIcon={capabilitiesSetTitle !== CapabilitiesType.Quality ? <NewTabLink link={documentationLinks.supportedStreamCapabilities} icon={faQuestionCircle} iconColor={iconColor} /> : undefined}
+      data={capabilitiesSet}
+      selectedItems={selectedItems}
+      setSelectedItems={setSelectedItems}
+      className={className}
+    />
+  );
+};
+
+export default Capabilities;

src/components/create-token-components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+export {default as Capabilities} from './capabilities';
+export {default as ValidityTimeComponent} from './validity-time';
+export * from './validity-time';
+export {default as LabelIconTooltip} from './label-icon-tooltip';
+export * from './styles';

src/components/create-token-components/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import React from 'react';
+import {AdvancedSelect, IAdvancedSelectItem} from '../ui/advanced-select';
+import {Label} from '../forms/label';
+
+interface CapabilitiesProps {
+  label: string;
+  labelColor?: string;
+  iconColor?: string;
+  capabilitiesSetTitle: string;
+  selectedItems: IAdvancedSelectItem[];
+  setSelectedItems: (items: IAdvancedSelectItem[]) => void;
+}
+
+export const Capabilities: React.FC<CapabilitiesProps> = ({
+  label,
+  labelColor,
+  iconColor,
+  capabilitiesSetTitle,
+  selectedItems,
+  setSelectedItems
+}) => {
+  // Mock capabilities data - in a real app this would come from constants/capabilities
+  const mockCapabilities: IAdvancedSelectItem[] = [
+    { value: 'streaming', text: 'Streaming' },
+    { value: 'recording', text: 'Recording' },
+    { value: 'analytics', text: 'Analytics' },
+    { value: 'transcoding', text: 'Transcoding' }
+  ];
+
+  return (
+    <div>
+      <Label text={label} />
+      <AdvancedSelect
+        items={mockCapabilities}
+        selectedItems={selectedItems}
+        setSelectedItems={setSelectedItems}
+        placeholder={`Select ${capabilitiesSetTitle} capabilities...`}
+      />
+    </div>
+  );
+};

src/components/create-token-components/label-icon-tooltip.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faQuestionCircle, IconDefinition} from '@fortawesome/free-solid-svg-icons';
+
+import {Tooltip, Position} from 'components/tooltip';
+
+interface ILabelIconTooltip {
+  message: string;
+  icon?: IconDefinition;
+  position?: Position;
+}
+
+export const LabelIconTooltip = ({message, icon, position}: ILabelIconTooltip): React.JSX.Element => (
+  <Tooltip
+    position={position || Position.Right}
+    message={message}
+    width={300}
+  >
+    <FontAwesomeIcon icon={icon || faQuestionCircle} />
+  </Tooltip>
+);
+
+export default LabelIconTooltip;

src/components/create-token-components/styles.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+
+import {theme} from 'components/shared/theme';
+import {RadioGroup} from 'components/buttons/radio-button/style';
+// import Input from 'components/forms/Input';
+
+const {
+  spacing,
+  colors
+} = theme;
+
+export const CreateTokenContainer = styled.default.div`
+  margin: 0.5rem 0 0;
+`;
+
+export const FormWell = styled.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+
+export const RadioButtonContainer = styled.default.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: ${spacing.small} 0;
+  label {
+    font-size: 14px;
+    color: ${colors.white};
+  }
+  ${RadioGroup}{
+    flex-direction: column;
+    .reason-input {
+      display: flex;
+      flex-grow: 1;
+    }
+  }
+`;
+
+export const InputGroup = styled.default.div`
+  margin: 0 1rem 1rem 0;
+  input {
+    width: 200px;
+    padding-left: ${spacing.small};
+  }
+  > label {
+    display: block;
+  }
+  select {
+    width: 200px;
+  }
+`;
+
+export const RowsWrapper = styled.default.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;

src/components/create-token-components/validity-time.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import React, {Fragment} from 'react';
+
+import moment from 'moment';
+
+import {ISelectItemWithClassOptions} from 'interfaces';
+
+import RadioButtonGroup from 'components/buttons/radio-button';
+import {Label} from 'components/label';
+
+import {RadioButtonContainer} from '.';
+
+export const validityTimeOptions: ISelectItemWithClassOptions<string> = {
+  hour: {
+    label: '1 Hour',
+    value: `${moment.duration(1, 'hour').asSeconds()}`
+  },
+  day: {
+    label: '1 Day',
+    value: `${moment.duration(1, 'day').asSeconds()}`
+  },
+  week: {
+    label: '1 Week',
+    value: `${moment.duration(1, 'week').asSeconds()}`
+  },
+  month: {
+    label: '1 Month',
+    value: `${moment.duration(1, 'month').asSeconds()}`
+  },
+  year: {
+    label: '1 Year',
+    value: `${moment.duration(1, 'year').asSeconds()}`
+  },
+  decade: {
+    label: '10 Years',
+    value: `${moment.duration(10, 'year').asSeconds()}`
+  }
+};
+
+interface IValidityTimeComponent {
+  onChange: (value: string) => void;
+  currentValue: string;
+}
+
+export const ValidityTimeComponent = ({currentValue, onChange}: IValidityTimeComponent): React.JSX.Element => (
+  <Fragment>
+    <Label text="Valid For:" color="white" />
+    <RadioButtonContainer className="testId-expirationTime">
+      <RadioButtonGroup
+        items={Object.values(validityTimeOptions)}
+        currentValue={currentValue}
+        handleOnChange={onChange}
+      />
+    </RadioButtonContainer>
+  </Fragment>
+);
+
+export default ValidityTimeComponent;