Feture/core 4379 update membership form (#723)

* [CORE-4379] Form fields update

* [CORE-4379] Form fields update#2

* [CORE-4379] Add planName and price to endpoint

* [CORE-4379] Field name update

* [CORE-4379] Add validation empty repo

* [CORE-4379] husky downgrade

* [CORE-4379] husky rollback

* [CORE-4379] Checkbox fix

* [CORE-4379] fetch price

* [CORE-4379] membership price fetch

* [CORE-4379] membership price fetch#2

* [CORE-4379] Radiobutton

* [CORE-4379] Style upd

* [CORE-4379] Uml upd

* [CORE-4379] Remove debug code

* [CORE-4379] Billing plan starting

* [CORE-4379] approveTermsConditions upd

* [CORE-4379] Update code style

* [CORE-4379] membership plan #1

* [CORE-4379] membership plan #2

* [CORE-4379] membership plan #3

* [CORE-4379] Check price fetch

* [CORE-4379] Discount calculate

* [CORE-4379] Fix radiobutton

* [CORE-4379] Starting plan update layout

* [CORE-4379] Fix submit membership endpoint

* [CORE-4379] Routes status fix

* [CORE-4379] Status pages fix

* [CORE-4379] Status pages fix #2

* [CORE-4379] Fix calculating discount

* [CORE-4379] Fix calculating discount #2

* [CORE-4379] Fix style

* [CORE-4379] Fix style #2

* [CORE-4379] Fix style #3

* [CORE-4379] Fix path payment

* [CORE-4379] Fix slug

* [CORE-4379] Fix slug #2

* [CORE-4379] Text upd #1

* [CORE-4379] Text upd #2

* [CORE-4379] Price N/A

* [CORE-4379] Radiobutton update. Fix status page

* [CORE-4379] Fix status page

* [CORE-4379] One repo for starting plan

* [CORE-4379] add noRepositories

* [CORE-4379] add noRepositories

* [CORE-4379] fix noRepositories

* [CORE-4379] Add error style for select

* [fix] Price error

* [fix] Update price if user change repository

* [fix] Url for Membership fees

* Add Icon

* [fix] Design up version

* [fix] Design version set latest

* [fix] Starting plan add caption

* [CORE-4379] Add discount to form

* [CORE-4379] Price calculated upd

* [CORE-4379] Fix route

Author: valeriibudko

api/services.js

@@ -23,3 +23,13 @@ export const createMembershipPayment = async (body) => {
 
   return response
 }
+
+export const getMembershipPrice = async (body) => {
+  const url = new URL('/internal/membership/price', process.env.API_URL)
+  const response = await apiRequest(url, {
+    body,
+    method: 'POST',
+  })
+
+  return response
+}

components/checkbox/animated.jsx

@@ -6,10 +6,11 @@ import {
   useSpringRef,
   useChain,
 } from 'react-spring'
+import { classNames } from '@oacore/design/lib/utils'
 
 import styles from './styles.module.scss'
 
-const Checkbox = ({ id, labelText, setCheckbox }) => {
+const Checkbox = ({ id, labelText, setCheckbox, className }) => {
   const [isChecked, setIsChecked] = useState(false)
   const checkboxAnimationRef = useSpringRef()
   const checkboxAnimationStyle = useSpring({
@@ -37,7 +38,7 @@ const Checkbox = ({ id, labelText, setCheckbox }) => {
 
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={styles.labelBox}>
+    <label key={labelText} className={styles.labelBox}>
       <input
         id={id}
         type="checkbox"
@@ -65,7 +66,9 @@ const Checkbox = ({ id, labelText, setCheckbox }) => {
           strokeDashoffset={checkmarkAnimationStyle.x}
         />
       </animated.svg>
-      <div className={styles.label}>{labelText}</div>
+      <div className={classNames.use(styles.label).join(className)}>
+        {labelText}
+      </div>
     </label>
   )
 }

components/checkbox/index.js

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as Checkbox } from './animated'
+export { default as Radiobutton } from './radiobutton'

components/checkbox/radiobutton.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.scss'
+
+const Radiobutton = ({ id, labelText, options, setRadioButtonsState }) => {
+  const handleRadioButton = (value) => {
+    const states = {
+      [id]: value,
+    }
+    setRadioButtonsState(states)
+  }
+
+  useEffect(() => {
+    handleRadioButton(options[0].id)
+  }, [])
+
+  return (
+    <div key={labelText}>
+      <div className={styles.radioTopLabel}>{labelText}:</div>
+      {options.map((field) => (
+        <div
+          key={field.value}
+          className={classNames.use(styles.radioFormCheck).join('form-check')}
+        >
+          <input
+            className="form-check-input "
+            type="radio"
+            name={id}
+            id={field.id}
+            onChange={() => handleRadioButton(field.id)}
+          />
+          <label className={styles.radioLabel} htmlFor={field.id}>
+            {field.value}
+          </label>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Radiobutton

components/checkbox/styles.module.scss

@@ -22,8 +22,6 @@
   border: 2px var(--gray-600) solid;
   margin-right: 10px;
   border-radius: 2px;
-  width: 20px;
-  height: 20px;
 }
 
 .label {
@@ -33,3 +31,15 @@
 .disabled {
   display: none;
 }
+
+.radio-top-label {
+  margin-bottom: 10px;
+}
+
+.radio-form-check {
+  margin-bottom: 5px;
+}
+
+.radio-label {
+  margin-left: 8px;
+}

components/utils.js

@@ -29,3 +29,11 @@ export const patchStats = (text, statistics) => {
   }
   return processTemplate(text, context)
 }
+
+export const patchStatsFull = (text, statistics) => {
+  const context = {}
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of Object.entries(statistics)) context[key] = value
+
+  return processTemplate(text, context)
+}

core.routes.yml

@@ -36,6 +36,9 @@ membership:
 
 payment:
   pattern: /payment
+
+membershipRequestStatus:
+  pattern: /membership-request-status
   children:
     success: /success
     error: /error

data/membership.yml

@@ -130,8 +130,11 @@ plans:
         - *statistics
         - *discovery-boost
       action:
-        title: Register your interest
-        url: 'https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform'
+        title: Become a member
+#        url: '/membership/starting'
+        url: '/member/starting'
+#        title: Register your interest
+#        url: 'https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform'
 
     - title: Supporting
       caption: <a href='membership/supporting'>Membership fees</a>
@@ -145,8 +148,11 @@ plans:
         - *tech-support
         - *api
       action:
-        title: Register your interest
-        url: https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform
+        title: Become a member
+        url: '/member/supporting'
+#        url: '/membership/supporting'
+#        title: Register your interest
+#        url: https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform
 
     - title: Sustaining
       caption: <a href='membership/sustaining'>Membership fees</a>
@@ -163,8 +169,11 @@ plans:
         - *styles
         - *health-check
       action:
-        title: Register your interest
-        url: https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform
+        title: Become a member
+        url: '/member/sustaining'
+#        url: '/membership/sustaining'
+#        title: Register your interest
+#        url: https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform
 
 box:
   description: Here you can find a comparison table with detailed information about each feature. It can help you choose the most suitable membership plan.
@@ -245,8 +254,8 @@ fee:
     **This discount is available for those who sign up for 3 or 5 years. Both annual and single payment invocing is possible.
   action:
     caption: Become member
-#    url: '/payment'
-    url: 'https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform'
+    url: '/member'
+#    url: 'https://docs.google.com/forms/d/e/1FAIpQLSfFJmMIspYfOEM5aOKG4FTZoK4qeqozyds47O75Wm4dJ1ta2w/viewform'
   table:
     headers:
       - name: Data provider size

data/payment.yml

@@ -1,10 +1,14 @@
-title:  Become a <span>{{planName}}</span> members
+title:  Become a <span>{{planName}}</span> member
 short-title: Become our new member!
 caption: Enter your details and our manager will contact you as soon as possible
 form:
   id: Member-details
   maxRepositoriesCount: 3
-  price: "Price:  <span> ￡ {{price}} *</span>"
+  price: "Fee:  <span> ￡ {{price}} *</span>"
+  price-calculated: "Fee:  <span> ￡ {{priceCalculated}} </span>"
+  error-price-calculation: |
+    <div><span>Fee:</span><span>We are afraid that we do not have enough data to calculate the fee automatically at this stage.
+    A member of the CORE team will be in touch with you shortly after submitting your request.</span></div>
   action:
     caption: Become a member
   fields:
@@ -30,30 +34,66 @@ form:
       type: async-select
       options: []
       id: repository
+      optional: true
+    - label: I cannot find one or more of my repositories in the list.
+      type: checkbox
+      id: noRepositories
     - label: Can't find repository?
       type: caption
       options:
           - name: Register repository
-            action: 'benefits'
+            action: '/benefits'
           - name: Contact us
-            action: 'contact'
+            action: '/about#contact'
     - label: Add
       type: button
       caption: You can add up to 3 repositories
+      id: addRepositories
     - placeholder: e.g. John
       label: Name of contact person
       id: contactName
       type: input
+    - placeholder: e.g. Developer
+      label: What is your role in the organisation?
+      id: roleInOrganisation
+      type: input
     - placeholder: e.g. [email protected]
       label: Email
       id: email
       type: input
+    - placeholder: Select the type of your contract
+      label: Types of contracts
+      id: typesContracts
+      type: select
+      options:
+        - id: Annual rolling
+          name: Annual rolling
+          value: annual-rolling
+        - id: 3-year
+          name: 3-year
+          value: 10
+        - id: 5-year
+          name: 5-year
+          value: 15
+    - label: Invoicing frequency
+      type: radio
+      id: invoicingFrequency
+      options:
+        - id: single-payment
+          name: single-payment
+          value: Single payment
+        - id: annually
+          name: annually
+          value: Annually
     - placeholder: " "
       label: Any additional information you want to tell us
       id: additionalInfo
       type: input
       optional: true
       appendText: Optional
+    - label: Please read and agree to the CORE <a href='https://core.ac.uk/terms' target='_blank'>Terms and Conditions</a> and <a href='https://core.ac.uk/privacy' target='_blank'>Privacy notice</a>.
+      type: checkbox
+      id: approveTermsConditions
 
 additional-info:
   icon: "*"
@@ -70,7 +110,7 @@ success:
  description: CORE is a mission-driven and not-for-profit endeavour and we rely on the generous support of our members to support and sustain the service.
  image:
   url: /images/membership/email.svg
-  caption: Thank you for apply with CORE Membership for organisations. Your request has been successfully sent. Our teams will contact you shortly.
+  caption: Thank you for apply with CORE Membership for organisations. Your request has been successfully sent. Our team will contact you shortly.
  button:
   caption: homepage
   url: "/"