feat: change primary user role

* speed up intellisense by excluding node_modules
* make sure app is rendered only on client side to avoid window not defined error

Signed-off-by: Rakib Ansary <[email protected]>

jsconfig.json

@@ -4,5 +4,6 @@
     "paths": {
       "*": ["src/shared/*", "src/*", "node_modules/*"]
     }
-  }
+  },
+  "exclude": ["node_modules", "build"]
 }

src/shared/actions/identity.js

@@ -0,0 +1,27 @@
+import { createActions } from 'redux-actions';
+import { getService } from '../services/identity';
+
+/**
+ * @static
+ * @desc Creates an action that signals beginning of updating users primary role.
+ * @return {Action}
+ */
+function updatePrimaryRoleInit() {}
+
+/**
+ * @static
+ * @desc Update users primary role
+ * @param {String} role - role to be updated can be 'Topcoder Talent' or 'Topcoder Customer'
+ * @return {Action}
+ */
+async function updatePrimaryRoleDone(role, tokenV3) {
+  return getService(tokenV3).updatePrimaryRole(role);
+}
+
+
+export default createActions({
+  IDENTITY: {
+    UPDATE_PRIMARY_ROLE_INIT: updatePrimaryRoleInit,
+    UPDATE_PRIMARY_ROLE_DONE: updatePrimaryRoleDone,
+  },
+});

src/shared/app.jsx

@@ -33,6 +33,10 @@ if (process.env.NODE_ENV === 'production') {
 /* eslint-enable global-require */
 
 export default function App() {
+  if (!isomorphy.isClientSide()) {
+    return null;
+  }
+
   return (
     <div>
       <Helmet htmlAttributes={{ lang: 'en' }}>
@@ -54,9 +58,7 @@ export default function App() {
       />
       {isomorphy.isDevBuild() ? <DevTools /> : undefined}
       {
-        config.GAMIFICATION.ENABLE_SKILLS_REMIND_MODAL
-          && isomorphy.isClientSide()
-          ? <Gamification /> : undefined
+        config.GAMIFICATION.ENABLE_SKILLS_REMIND_MODAL ? <Gamification /> : undefined
       }
     </div>
   );

src/shared/components/Settings/Account/MyPrimaryRole/FormInputRadio/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import './styles.scss';
+
+const FormInputRadio = ({
+  text, value, selectedValue, onSelectionChange,
+}) => {
+  const handleChange = () => {
+    onSelectionChange(value);
+  };
+
+  const inputId = `roundedInputFieldRadioGroup-${value}`;
+  return (
+    <div styleName="rounded-input-field">
+      <div styleName="input-text-wrapper">
+        <span styleName="input-text">{text}</span>
+      </div>
+      <label styleName="input-radio-wrapper" htmlFor={inputId}>
+        <input
+          type="radio"
+          id={inputId}
+          name="roundedInputFieldRadioGroup"
+          value={value}
+          checked={selectedValue === value}
+          onChange={handleChange}
+          styleName="input-radio"
+        />
+        <span styleName="custom-radio" />
+      </label>
+    </div>
+  );
+};
+
+
+FormInputRadio.propTypes = {
+  text: PT.string.isRequired,
+  value: PT.string.isRequired,
+  selectedValue: PT.string.isRequired,
+  onSelectionChange: PT.func.isRequired,
+};
+
+export default FormInputRadio;

src/shared/components/Settings/Account/MyPrimaryRole/FormInputRadio/styles.scss

@@ -0,0 +1,93 @@
+@import "~styles/mixins";
+
+.rounded-input-field {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 16px;
+  width: calc(50% - 32px); // Subtract half the gap size from each button width
+  height: 72px;
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 8px;
+  margin-right: 32px; // Add the other half of the gap size as margin
+  &:last-child {
+    margin-right: 0; // Remove margin from the last button
+  }
+}
+
+
+.input-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.input-text-wrapper {
+  display: flex;
+  align-items: center; 
+}
+
+.input-text {
+  @include roboto-medium;
+
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+  color: $tco-black;
+  flex-grow: 0;
+}
+
+.input-radio-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.input-radio {
+  position: absolute;
+  opacity: 0;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.custom-radio {
+  position: absolute;
+  right: 16px;
+  top: 55%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border: 2px solid #aaa;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.input-radio:checked ~ .custom-radio {
+  border-color: #137D60;
+}
+
+.input-radio:checked ~ .custom-radio::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: #137D60;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+