React Js Developers : Create a Email Editor with React-Quill ⭐ Weekly Issue to Solve

This is Weekly React.js Issue to Solve

Issue to Solve

Need to create a new email template settings page that allows users to edit email templates using the react-quill library. This library provides a rich text editor component for React applications. The goal is to use react-quill to allow users to modify the message content of an email template.

The email template settings page should provide a user interface where users can see and edit the email template. The react-quill (https://github.com/zenoamaro/react-quill) component will be used as the editor for the email template message.

The email template message should be saved in the settings so that it can be retrieved and used later when sending emails. It is important to ensure that the updated template message is properly saved and associated with the correct email template.

GitHub Issue link :

https://github.com/idurar/erp-crm/issues/548

Additional context

Additionally, this page should support editing multiple templates. This means there should be a way to switch between different email templates and update their respective message content using the react-quill editor.

By following these guidelines, you can create a fully functional email template settings page that allows users to customize and save email templates using the react-quill library.

Settings Api

router.route('/setting/listAll').get(catchErrors(settingController.listAll));
router.route('/setting/filter').get(catchErrors(settingController.filter));
router
  .route('/setting/readBySettingKey/:settingKey')
  .get(catchErrors(settingController.readBySettingKey));
router.route('/setting/listBySettingKey').get(catchErrors(settingController.listBySettingKey));
router
  .route('/setting/updateBySettingKey/:settingKey?')
  .patch(catchErrors(settingController.updateBySettingKey));
router.route('/setting/updateManySetting').patch(catchErrors(settingController.updateManySetting));

Settings Key

[
  {
    "settingKey": "email_invoice_default",
    "settingValue": "<p>email_invoice_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_quote_default",
    "settingValue": "<p>email_quote_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_offer_default",
    "settingValue": "<p>email_offer_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_payment_receipt_default",
    "settingValue": "<p>email_offer_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_signup_email_confirm_default",
    "settingValue": "<p>email_signup_email_confirm</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_reset_password_default",
    "settingValue": "<p>email_reset_password</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "welcome_email_default",
    "settingValue": "<p>welcome_email</p>",
    "valueType": "string",
    "isCoreSetting": true
  }
]

How You Can Help

To get started, simply follow these steps:

1. Visit our GitHub repository and familiarize yourself with the project structure, codebase, and existing features.
2. Locate the relevant issue titled "feat : Create New Generic Upload Controller #412"
3. Fork the repository to your own GitHub account. Implement the required changes in your forked repository. Once you're satisfied with your changes, submit a pull request to our main repository.

Why Contribute?

By contributing to the idurar-erp-crm project, you will:

Gain valuable experience working on a real-world open source ERP CRM system.
Showcase your React.js skills to potential employers and the wider developer community.
Collaborate with a team of passionate developers from around the world.
Make a meaningful impact by enhancing the functionality and usability of our project.

About the Project

idurar-erp-crm is a powerful and feature-rich ERP CRM system built using React.js. It aims to revolutionize businesses by seamlessly integrating essential business processes, customer relationship management, and sales automation into one robust platform.

Join Our Community

We believe in the power of collaboration and welcome developers of all skill levels to join our community. Whether you're a seasoned React.js expert or just starting out, we value your unique perspective and contributions.

Ready to dive in and make a difference? Head over to our GitHub repository, find the issue, and let's get started. Together, we can build something extraordinary!

If you have any questions or need any assistance, please don't hesitate to comment below. We're here to help.

Happy coding!

Best regards,
The idurar-erp-crm Team

Comments

[Salah Eddine Lalami]

github.com/Sinharitik589 ,Just make new PR with good approach and clean code : github.com/idurar/erp-crm/pull/555