search

BeefreeSDK / beefree-sdk-npm-official

Official NPM package of Beefree SDK
https://developers.beefree.io
Apache License 2.0
19 stars 7 forks source link

Form fields are editable even when the loaded template has canBeModified: false setting #111

Open jatin-14 opened 1 year ago

jatin-14 commented 1 year ago

While using a default form block in popup builder, the fields are editable by default. When we load a JSON template to populate an existing popup, even if the "canBeModified": false is added as a setting in form structure, the fields are still editable. I'm using the Bee npm package - @mailupinc/bee-plugin 2.1.1

Steps to reproduce the behavior:

  1. Create a new instance of Bee popup builder and execute the start function.
  2. Now invoke the load or reload function in the callback of start and provide a predefined template JSON (attached).
  3. Check that the JSON template is having "canBeModified": false setting.
  4. See the end result in the loaded popup. The form fields are still editable.

Expected behavior The Edit button should be hidden for the respective fields having the setting "canBeModified" as false.

Screenshots

Screenshot 2023-04-13 at 12 13 42 PM

Desktop:

Additional context bee config JSON

` var beeConfig = { uid: "uid", container: "bee-plugin-container", onSave: (jsonFile, htmlFile) => { console.log("onSave", jsonFile, htmlFile); }, onSaveAsTemplate: (jsonFile) => { console.log("onSaveAsTemplate", jsonFile); }, onSend: (htmlFile) => { console.log("onSend", htmlFile); }, onError: (errorMessage) => { console.log("onError ", errorMessage); },

  defaultForm: {
    structure: {
      title: "Form Title",
      fields: {
        name: {
          type: "text",
          label: "Name",
          canBeModified: false,
          removeFromLayout: false,
          canBeRemovedFromLayout: true
        },
        surname: {
          type: "text",
          label: "Surname",
          removeFromLayout: true,
          canBeRemovedFromLayout: true,
        },
        email: {
          type: "email",
          label: "Email *",
          canBeModified: false,
          canBeRemovedFromLayout: false,
          attributes: {
            required: true,
            id: 'form_email'
          }
        },
        notes: {
          type: "textarea",
          label: "Notes",
          removeFromLayout: true,
          canBeRemovedFromLayout: true
        },
        privacy: {
          type: "checkbox",
          label:
            "Accept privacy policy. [Read it here](http://example.com)",
          canBeModified: false,
          removeFromLayout: true,
          canBeRemovedFromLayout: true,
          attributes: {
            required: true,
          }
        },
        submit_button: {
          type: "submit",
          label: "",
          canBeRemovedFromLayout: true,
          attributes: {
            value: "Submit",
            name: "submit_button",
            id: "test_id_submit"
          }
        }
      },
      layout: [
        ["name", "surname"],
        ["email"],
        ["notes"],
        ["privacy"],
        ["submit_button"],
      ],
    },
  },

  /** This config is for loading a predefined popup template */
  workspace: {
    popup: {
      contentWidth: 500,
      theme: "default",
      layout: "classic-center",
      backgroundImage: "",
      backgroundImageMobile: "",
      customStyles: {
        container: {
          // backgroundColor: "#1e2f40",
          borderRadius: "2px",
          padding: "0",
        },
        header: {
          padding: "10px"
        },
        content: {
          justifyContent: "auto",
        },
      },
      customLayout: {
        wrapper: {},
      },

    },
  },
};

    this.bee = new BeePlugin();

this.bee.getToken(clientId, clientSecret).then(() => {
  this.bee.start(beeConfig, template).then((res)=>{
    console.log('loaded');
  });
});`

Template JSON { "page": { "title": "", "description": "", "rows": [ { "container": { "style": { "background-color": "transparent", "background-image": "none", "background-repeat": "no-repeat", "background-position": "top left" } }, "content": { "style": { "background-color": "transparent", "color": "#000000", "width": "800px", "background-image": "none", "background-repeat": "no-repeat", "background-position": "top left", "border-top": "0px solid transparent", "border-right": "0px solid transparent", "border-bottom": "0px solid transparent", "border-left": "0px solid transparent", "border-radius": "0px" }, "computedStyle": { "rowColStackOnMobile": true, "rowReverseColStackOnMobile": false, "verticalAlign": "top", "hideContentOnMobile": false, "hideContentOnDesktop": false } }, "columns": [ { "style": { "background-color": "transparent", "border-bottom": "0px solid transparent", "border-left": "0px solid transparent", "border-right": "0px solid transparent", "border-top": "0px solid transparent", "padding-bottom": "5px", "padding-left": "0px", "padding-right": "0px", "padding-top": "5px" }, "modules": [ { "type": "mailup-bee-newsletter-modules-image", "descriptor": { "image": { "alt": "", "src": "https://cdn-m4m.chd01.com/dev/uploads/account_1400/1104/flower.jpg", "href": "", "target": "_blank", "width": "1280px", "height": "833px" }, "style": { "width": "100%", "padding-top": "0px", "padding-right": "0px", "padding-bottom": "0px", "padding-left": "0px" }, "computedStyle": { "class": "center autowidth", "width": "250px" }, "mobileStyle": {} }, "uuid": "0913caf1-c17b-43ee-9b6e-9d3814e22369" } ], "grid-columns": 6, "uuid": "6f85dafa-9b88-4d34-b7e9-07c2a95206b7" }, { "style": { "background-color": "transparent", "border-bottom": "0px solid transparent", "border-left": "0px solid transparent", "border-right": "0px solid transparent", "border-top": "0px solid transparent", "padding-bottom": "5px", "padding-left": "0px", "padding-right": "0px", "padding-top": "5px" }, "modules": [ { "type": "mailup-bee-newsletter-modules-form", "descriptor": { "form": { "structure": { "title": "Form Title", "fields": { "name": { "type": "text", "label": "Name", "canBeModified": false, "removeFromLayout": false, "canBeRemovedFromLayout": true }, "surname": { "type": "text", "label": "Surname", "removeFromLayout": true, "canBeRemovedFromLayout": true }, "email": { "type": "email", "label": "Email *", "canBeModified": false, "canBeRemovedFromLayout": false, "attributes": { "required": true, "id": "form_email" } }, "notes": { "type": "textarea", "label": "Notes", "removeFromLayout": true, "canBeRemovedFromLayout": true }, "privacy": { "type": "checkbox", "label": "Accept privacy policy. [Read it here](http://example.com)", "canBeModified": false, "removeFromLayout": true, "canBeRemovedFromLayout": true, "attributes": { "required": true } }, "submit_button": { "type": "submit", "label": "", "canBeRemovedFromLayout": true, "attributes": { "value": "Submit", "name": "submit_button", "id": "test_id_submit" } } }, "layout": [ [ "name", "surname" ], [ "email" ], [ "notes" ], [ "privacy" ], [ "submit_button" ] ] }, "attributes": {}, "style": { "labels": { "color": "#000000", "line-height": "200%", "font-weight": "", "font-style": "", "text-align": "left", "label-position": "top", "letter-spacing": "0", "min-width": "0" }, "fields": { "color": "#000000", "backgroundColor": "#ffffff", "outlineColor": "#3AAEE0", "border-top": "2px solid #797979", "border-right": "2px solid #797979", "border-bottom": "2px solid #797979", "border-left": "2px solid #797979", "padding-top": "5px", "padding-right": "5px", "padding-bottom": "5px", "padding-left": "5px", "border-radius": "4px" }, "buttons": { "backgroundColor": "#808080", "border-radius": "4px", "border-top": "0px solid transparent", "border-right": "0px solid transparent", "border-bottom": "0px solid transparent", "border-left": "0px solid transparent", "color": "#ffffff", "line-height": "200%", "text-align": "center", "width": "65%", "letter-spacing": "0", "font-weight": "", "font-style": "", "max-width": "100%", "padding-top": "5px", "padding-right": "20px", "padding-bottom": "5px", "padding-left": "20px", "outer": { "flexGrow": 1, "display": "block", "padding-top": "20px", "padding-right": "0px", "padding-bottom": "0px", "padding-left": "0px" } } } }, "style": { "width": "100%", "text-align": "center", "padding-top": "10px", "padding-right": "10px", "padding-bottom": "10px", "padding-left": "10px", "font-size": "14px", "font-weight": "400", "font-family": "inherit", "background-color": "transparent" }, "mobileStyle": {}, "computedStyle": { "class": "center", "hideContentOnMobile": false, "hideContentOnDesktop": false } }, "uuid": "a1a5306f-c10e-45d3-835f-4bb64fb79149" } ], "grid-columns": 6, "uuid": "0a081375-7bf4-4a2e-b2c1-3afac8ca8900" } ], "type": "two-columns-empty", "uuid": "25b57565-80dc-4259-89ed-c59e39ecc1ba" } ], "body": { "webFonts": [], "content": { "style": { "color": "#000000", "font-family": "Arial, Helvetica Neue, Helvetica, sans-serif" }, "computedStyle": { "linkColor": "#0068A5", "messageBackgroundColor": "transparent", "messageWidth": "500px", "messageWidthMobile": "250px" } }, "container": { "style": { "background-color": "#FFFFFF" } } }, "template": { "version": "2.0.0" } }, "comments": {} }