chore: use monorepo organization

2025-05-12 10:52:54 +01:00 · 2025-05-12 10:52:54 +01:00 · a687827f7e
commit a687827f7e
parent deaf7d6ecc
1099 changed files with 8184 additions and 11535 deletions
--- a/packages/admin-ui/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
+++ b/packages/admin-ui/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
@ -0,0 +1,144 @@
+import { Form, Formik, Field } from 'formik'
+import * as R from 'ramda'
+import React from 'react'
+import ErrorMessage from 'src/components/ErrorMessage'
+import Modal from 'src/components/Modal'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { H1, H3, P } from 'src/components/typography'
+import * as Yup from 'yup'
+
+import { Button } from 'src/components/buttons'
+import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
+
+const initialValues = {
+  customer: '',
+  discount: ''
+}
+
+const validationSchema = Yup.object().shape({
+  customer: Yup.string().required('A customer is required!'),
+  discount: Yup.number()
+    .required('A discount rate is required!')
+    .min(0, 'Discount rate should be a positive number!')
+    .max(100, 'Discount rate should have a maximum value of 100%!')
+})
+
+const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
+  if (!formikErrors || !formikTouched) return null
+  if (mutationError) return 'Internal server error'
+  if (formikErrors.customer && formikTouched.customer)
+    return formikErrors.customer
+  if (formikErrors.discount && formikTouched.discount)
+    return formikErrors.discount
+  return null
+}
+
+const IndividualDiscountModal = ({
+  showModal,
+  setShowModal,
+  onClose,
+  creationError,
+  addDiscount,
+  customers
+}) => {
+  const handleAddDiscount = (customer, discount) => {
+    addDiscount({
+      variables: {
+        customerId: customer,
+        discount: parseInt(discount)
+      }
+    })
+    setShowModal(false)
+  }
+
+  return (
+    <>
+      {showModal && (
+        <Modal
+          title="Add individual customer discount"
+          closeOnBackdropClick={true}
+          width={600}
+          height={500}
+          handleClose={onClose}
+          open={true}>
+          <Formik
+            validateOnBlur={false}
+            validateOnChange={false}
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={({ customer, discount }) => {
+              handleAddDiscount(customer, discount)
+            }}>
+            {({ errors, touched }) => (
+              <Form
+                id="individual-discount-form"
+                className="flex flex-col h-full gap-5">
+                <div className="mt-2 w-88">
+                  <Field
+                    name="customer"
+                    label="Select a customer"
+                    component={Autocomplete}
+                    fullWidth
+                    options={R.map(it => ({
+                      code: it.id,
+                      display: `${it?.idCardData?.firstName ?? ``}${
+                        it?.idCardData?.firstName && it?.idCardData?.lastName
+                          ? ` `
+                          : ``
+                      }${it?.idCardData?.lastName ?? ``} (${it.phone})`
+                    }))(customers)}
+                    labelProp="display"
+                    valueProp="code"
+                  />
+                </div>
+                <div>
+                  <div className="flex items-center">
+                    <H3>Define discount rate</H3>
+                    <HelpTooltip width={304}>
+                      <P>
+                        This is a percentage discount off of your existing
+                        commission rates for a customer entering this code at
+                        the machine.
+                      </P>
+                      <P>
+                        For instance, if you charge 8% commissions, and this
+                        code is set for 50%, then you'll instead be charging 4%
+                        on transactions using the code.
+                      </P>
+                    </HelpTooltip>
+                  </div>
+                  <div className="flex items-center">
+                    <Field
+                      name="discount"
+                      size="lg"
+                      autoComplete="off"
+                      width={50}
+                      decimalScale={0}
+                      component={NumberInput}
+                    />
+                    <H1 className="ml-2 mt-4 font-bold inline">%</H1>
+                  </div>
+                </div>
+                <div className="flex mt-auto mb-6">
+                  {getErrorMsg(errors, touched, creationError) && (
+                    <ErrorMessage>
+                      {getErrorMsg(errors, touched, creationError)}
+                    </ErrorMessage>
+                  )}
+                  <Button
+                    type="submit"
+                    form="individual-discount-form"
+                    className="ml-auto">
+                    Add discount
+                  </Button>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </Modal>
+      )}
+    </>
+  )
+}
+
+export default IndividualDiscountModal