PDP Cleanup- Basic Details Card, Tax Card & Inventory Card Updates

[rymorgan]

See annotated .png for details.

[rymorgan]

Related to #1647

[kieha]

@rymorgan two questions for clarity's sake on this ticket:

1. Is the Allow Backorder toggle what is currently the Deny when out of stock checkbox?
2. The Quantity field should be moved from the top of the details into the Inventory Tracking card?

Also, my thoughts on this ticket, should I just convert the template (which is what it is currently) to React? And (my opinion), should this ticket also include editing the whole section above taxable, since all this is in the same template?

[rymorgan]

1. Yes, it's the allow backorder toggle. Saying allow backorder is a clear and more concise way of saying it.
2. Yes, move quantity field.
3. Absolutely, we should convert to react. @mikemurray want everything converted to react as we work on it. :)
4. Yes, let's do the card above taxable too. Here's a mock for that card.

[kieha]

@rymorgan cool. Thanks!

[kieha]

@rymorgan is there any need to expand the Taxable card when the expand is determined by the toggle?
My thinking: When you toggle the Taxable card is when you should see the fields nested under it.

[kieha]

@rymorgan this is what I have so far:

Any nitpicks/suggestions for the UI part?

[mikemurray]

can you make a [WIP] PR for this to better track changes?

The switches are are the old blaze / CSS version. You should use the <Switch> component. Also our card component has the ability to show a switch by default. The switch component also has a label built in.

Switch component: https://github.com/reactioncommerce/reaction/blob/development/imports/plugins/core/ui/client/components/switch/switch.js#L5

quick example:

Using the settings card will have everything you need to one of those settings panel, Its a combination of our Card component and a Switch so its pretty much a drop-in-repacement for Card.

https://github.com/reactioncommerce/reaction/blob/development/imports/plugins/included/social/client/components/settings.js#L71

          <SettingsCard
            key={index}
            i18nKeyTitle={`settings.${provider.name}`}
            expandable={true}
            onExpand={this.props.onSettingExpand}
            expanded={this.props.preferences[provider.name]}
            title={provider.name}
            name={provider.name}
            enabled={this.props.socialSettings.settings.apps[provider.name].enabled}
            icon={provider.icon}
            onSwitchChange={this.props.onSettingEnableChange}
          >
            <Form
              schema={SocialPackageConfig}
              doc={doc}
              docPath={`settings.public.apps.${provider.name}`}
              hideFields={[
                `settings.public.apps.${provider.name}.enabled`
              ]}
              name={`settings.public.apps.${provider.name}`}
              onSubmit={this.handleSubmit}
            />
          </SettingsCard>
        );

https://github.com/reactioncommerce/reaction/blob/development/imports/plugins/core/dashboard/client/components/toolbar.js#L65

      <Switch
        i18nKeyLabel="app.editMode"
        i18nKeyOnLabel="app.editMode"
        label={"Edit Mode"}
        onLabel={"Edit Mode"}
        checked={!this.props.isPreview}
        onChange={this.onViewContextChange}
      />

[rymorgan]

Thanks, @mikemurray -- here are my visual notes. This might end up being fixed when we switch over to Mike's components.

[rymorgan]

I also noticed that when you have all of the cards closed and go to open one of the variant options it opens up all the cards in the whole sidebar. It should only open that variant option only.

[kieha]

@rymorgan the Variant Options collapsible card request is in issue #2031. I'll add it when I'm done with this and take it up.

[kieha]

Status update:
Almost done with the ticket. Design part done. What's left is implementing some functionality.

[kieha]

Update:

• All functionality implemented.

Pending:

• Fixing reactivity issues
• Implement update quantity field with child variant quantities

[kieha]

Closed by #2086